React.js: How to run window.open() multiple times in succession? - javascript

I use a few state variables to determine which sites should be opened in new tabs (or maybe a new window if tabs aren't possible) with a single button click. However, window.open() only opens the first link.
In this code I tried pushing the target sites to an array and running .forEach and .map on the array items.
open_selected_websites() {
const sites_to_open = [];
// check each property for true and array.push if so
this.final_social_media_site_selections.facebook && sites_to_open.push('http://facebook.com');
this.final_social_media_site_selections.twitter && sites_to_open.push('http://twitter.com');
this.final_social_media_site_selections.linkedin && sites_to_open.push('http://linkedin.com');
this.final_social_media_site_selections.instagram && sites_to_open.push('http://instagram.com');
this.final_social_media_site_selections.pinterest && sites_to_open.push('http://pinterest.com');
console.log(sites_to_open); // all observables are true and all sites appear in the array.
sites_to_open.forEach((social_media_site) => {
// setTimeout(() => {
window.open(social_media_site);
// }, 500)
})
In both cases, facebook loaded in a new tab. It is the first array item.
Then I tried adding a setTimeout to see if some time space might affect things. No, still only Facebook.
Then I tried testing only one site in each function:
<Button
size='huge'
color='orange'
onClick={ () => {
// final_edits_store.open_selected_websites();
final_edits_store.test_to_open_twitter();
final_edits_store.test_to_open_facebook();
} }
>
Copy Text and Open Social Media Sites in New Tabs
</Button>
In this case Twitter opened. The twitter function was listed first.
Does anyone know what is causing window.open() not to fire multiple times? And how to overcome this limit?

You can't.
Browsers only allow a single window to be triggered from a given user interaction.
This is a security feature to prevent websites bombing the user with vast numbers of new windows.

jsFiddle here - https://jsfiddle.net/523bLxf4/12/
Try the name parameter that window.open takes. I was able to open multiple windows.
Instead of window.open(social_media_site); try window.open(social_media_site, social_media_site);
In the name parameter use some tag that uniquely identifies the window.

Related

JS how to open new tab multiple times in loop

How can I open multiple times new tab in chrome using window.open with for loop?
example:
const openFollowedProfiles = () => {
for (const profile of store.followed){
console.log(profile)
window.open(profile, '_blank');
}
};
Due to security reasons, you can't open multiple windows at once.
Each time you want to create a new window you must get user's interaction with a site ("click" event for example).

How to make the user not duplicate browser tabs?

There was a task to make each web page of the project not repetitive. Those. the user should not, as a consequence of inattention within the same browser, open multiple duplicates of the same web page. Please suggest a specific solution.
The task can be solved very simply, if one condition is met — each page has its own unique identifier. I have this $(‘body’).attr (‘id’).
Let’s call the function noDuplicateTabs and call it every time the page starts.
We use localStorage:
let noDuplicateTabs = function (pageName) {
localStorage.getItem(pageName)
? window.close()
: localStorage.setItem(pageName, 'open');
window.onbeforeunload = function () {
localStorage.setItem(pageName, '');
};
}
Thus, we pass the name of the page in the function, check for the presence of a value using the localStorage key corresponding to the page name.
If a key with a non-empty value is found, then we close the page, if not, then write the value to it ‘open’.
We also use the onbeforeunload property of the window, which works before reloading or closing the page. In this case, we will erase the value.
Now there will be no duplicates within the same browser.

JS Performing actions on a popup window

So lately I have been learning JS and trying to interact with webpages, scraping at first but now also doing interactions on a specific webpage.
For instance, I have a webpage that contains a button, I want to press this button roughly every 30 seconds and then it refreshes (and the countdown starts again). I wrote to following script to do this:
var klikCount = 0;
function getPlayElement() {
var playElement = document.querySelector('.button_red');
return playElement;
}
function doKlik() {
var playElement = getPlayElement();
klikCount++;
console.log('Watched ' + klikCount);
playElement.click();
setTimeout(doKlik, 30000);
}
doKlik()
But now I need to step up my game, and every time I click the button a new window pops up and I need to perform an action in there too, then close it and go back to the 'main' script.
Is this possible through JS? Please keep in mind I am a total javascript noob and not aware of a lot of basic functionality.
Thank you,
Alex
DOM events have an isTrusted property that is true only when the event has been generated by the user, instead of synthetically, as it is for the el.click() case.
The popup is one of the numerous Web mechanism that works only if the click, or similar action, has been performed by the user, not the code itself.
Giving a page the ability to open infinite amount of popups has never been a great idea so that very long time ago they killed the feature in many ways.
You could, in your own tab/window, create iframes and perform actions within these frames through postMessage, but I'm not sure that's good enough for you.
Regardless, the code that would work if the click was generated from the user, is something like the following:
document.body.addEventListener(
'click',
event => {
const outer = open(
'about:blank',
'blanka',
'menubar=no,location=yes,resizable=no,scrollbars=no,status=yes'
);
outer.document.open();
outer.document.write('This is a pretty big popup!');
// post a message to the opener (aka current window)
outer.document.write(
'<script>opener.postMessage("O hi Mark!", "*");</script>'
);
// set a timer to close the popup
outer.document.write(
'<script>setTimeout(close, 1000)</script>'
);
outer.document.close();
// you could also outer.close()
// instead of waiting the timeout
}
);
// will receive the message and log
// "O hi Mark!"
addEventListener('message', event => {
console.log(event.data);
});
Every popup has an opener, and every different window can communicate via postMessage.
You can read more about window.open in MDN.

Close all tabs to right of current tab with JavaScript or greasemonkey?

I'm currently coding a bot to do something for me and currently it has to open a large number of tabs every iteration and to make the bot fully automatic I have to find a way to close them all except the original the bot is running from. (The tabs have to be closed before the next iteration or what it's doing fails.)
I found a way to actually do this using a function that would detect the URL and do a specific function for that and then close it. Here's the code...
if (window.location.href.indexOf("https://www.google.com") != -1) {
So this detects that my URL contains a certain string and therefore activates on all pages after this URL. It works for what I want.
Not possible generally via userscripts because modern browsers block the attempts to close tabs/windows (Firefox has a config value to allow it but not all users would be willing to enable it). You will have to convert the userscript to an extension/addon.
In case you don't mind changing the default browser config to allow scripts to close tabs, use GM_setValue to raise a flag that will be periodically checked by your script in other tabs:
var dontCloseMe = false;
setInterval(function() {
var shouldClose = Date.now() - GM_getValue("terminate", 0) < 2 * 100;
if (shouldClose && !dontCloseMe) {
window.close();
}
}, 100);
.................
if (shouldCloseOtherTabs) {
dontCloseMe = true;
GM_setValue("terminate", Date.now());
}
And make sure the // #include actually includes the urls of those other tabs.

Persistent unique ID for Chrome tabs that lasts between browser sessions

I'm trying to ascertain some way to establish a unique ID for Chrome tabs that meets the following conditions:
Uniquely identifies each tab
Stays the same for a given tab between browser restarts (session-restored tabs)
Stays the same if a tab is closed and then reopened with Undo Closed Tab (Ctrl+Shift+T)
Stays distinct if a tab is duplicated
I've done some rather aggressive research to find a comprehensive solution, but nothing seems to quite do the trick. Here are the methods I have tried, in increasing order of efficacy:
Use Chrome's provided tab.id: does not persist between browser sessions or close/undo-close
Put a GUID in cookies: is not unique per tab, only per domain/URL
Put a GUID in localStorage: persists between browser sessions and close/undo-close, but is not unique per tab, only per domain
Put a GUID in sessionStorage: unique per tab, persists across close/undo-close, unique for duplicated tabs, but is wiped out between browser sessions
Use identifiable webpage document attributes as a unique key: this is the best approach I've found so far. A key can be constructed via a content script from the following values: [location.href, document.referrer, history.length].
Regarding this last approach, the constructed key is unique across all tabs which share a common URL, referrer, and history length. Those values will remain the same for a given tab between browser restarts/session-restores and close/undo-closes. While this key is "pretty" unique, there are cases where it is ambiguous: for example, 3 new tabs opened to http://www.google.com would all have the same key in common (and this kind of thing happens pretty often in practice).
The "put GUID in sessionStorage" method can additionally be used to disambiguate between multiple tabs with the same constructed key for the close/undo-close and duplicated-tab cases during the current browser session. But this does not solve the ambiguity problem between browser restarts.
This last ambiguity can be partially mitigated during session restore by observing which tabs Chrome opens together in which windows, and extrapolating for a given ambiguous key which tab belongs to which window based on the presence of expected 'sibling' tabs (recorded during the previous browser session). As you might imagine, implementing this solution is quite involved and rather dodgy. And it can only disambiguate between same-keyed tabs that Chrome restores into different windows. That leaves same-keyed tabs that restore into the same window as irreconcilably ambiguous.
Is there a better way? A guaranteed unique, browser-generated, per-tab GUID that persists between browser restarts (session restores) and close/undo-close would be ideal but so far I haven't found anything like this.
The question here does most of the discovery work, and the accepted answer basically completes it, but there's a big implementation gap still for people looking to implement something which requires persistent tab IDs. I've attempted to distill this into an actual implementation.
To recap: Tabs can be (almost) uniquely and consistently identified as required by the question by maintaining a register of tabs which stores the following combination of variables in local persistent storage:
Tab.id
Tab.index
A 'fingerprint' of the document open in the tab - [location.href, document.referrer, history.length]
These variables can be tracked and stored in the registry using listeners on a combination of the following events:
onUpdated
onCreated
onMoved
onDetached
onAttached
onRemoved
onReplaced
There are still ways to fool this method, but in practice they are probably pretty rare - mostly edge cases.
Since it looks like I'm not the only one who has needed to solve this problem, I built my implementation as a library with the intention that it could be used in any Chrome extension. It's MIT licensed and available on GitHub for forking and pull requests (in fact, any feedback would be welcome - there are definitely possible improvements).
If I correctly understand your problem, your 5th method should do the trick, but along with these two criteria:
chrome.tabs.windowId (The ID of the window the tab is contained within)
chrome.tabs.index (The zero-based index of the tab within its window)
All these values need to be stored inside your extension. Besides that, you will also have to hook up your extension to chrome.tabs.onUpdated() and updated accordingly, when tabs are being dragged around, moved across owner windows, etc.
Put this as a persistent background script in manifest.json:
"background": {
"scripts": [ "background.js" ],
"persistent": true
},
Here is background.js.
Hopefully the code is self explanatory.
var tabs_hashes = {};
var tabs_hashes_save_queued = false;
function Start(){
chrome.tabs.query({windowType: "normal"}, function(querytabs){
querytabs.forEach(function(tab){
tabs_hashes[tab.id] = GetHash(tab.url);
});
if (localStorage.getItem("tabs_hashes") !== null){
var ref_load = JSON.parse(localStorage["tabs_hashes"]);
var ref_tabId = {};
querytabs.forEach(function(tab){
for (var t = 0; t < ref_load.length; t++){
if (ref_load[t][1] === tabs_hashes[tab.id]){
ref_tabId[ref_load[t][0]] = tab.id;
ref_load.splice(t, 1);
break;
}
}
});
// do what you have to do to convert previous tabId to the new one
// just use ref_tabId[your_previous_tabId] to get the current corresponding new tabId
console.log(ref_tabId);
}
});
}
function SaveHashes(){
if (!tabs_hashes_save_queued && Object.keys(tabs_hashes).length > 0){
tabs_hashes_save_queued = true;
chrome.tabs.query({windowType: "normal"}, function(querytabs){
var data = [];
querytabs.forEach(function(tab){
if (tabs_hashes[tab.id]){
data.push([tab.id, tabs_hashes[tab.id]]);
} else {
data.push([tab.id, GetHash(tab.url)]);
}
});
localStorage["tabs_hashes"] = JSON.stringify(data);
setTimeout(function(){ tabs_hashes_save_queued = false; }, 1000);
});
}
}
function GetHash(s){
var hash = 0;
if (s.length === 0){
return 0;
}
for (var i = 0; i < s.length; i++){
hash = (hash << 5)-hash;
hash = hash+s.charCodeAt(i);
hash |= 0;
}
return Math.abs(hash);
}
chrome.tabs.onCreated.addListener(function(tab){
SaveHashes();
});
chrome.tabs.onAttached.addListener(function(tabId){
SaveHashes();
});
chrome.tabs.onRemoved.addListener(function(tabId){
delete tabs_hashes[tabId];
SaveHashes();
});
chrome.tabs.onDetached.addListener(function(tabId){
SaveHashes();
});
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo){
if (changeInfo.pinned != undefined || changeInfo.url != undefined){
delete tabs_hashes[tabId];
SaveHashes();
}
});
chrome.tabs.onMoved.addListener(function(tabId){
SaveHashes();
});
chrome.tabs.onReplaced.addListener(function(addedTabId, removedTabId){
delete tabs_hashes[removedTabId];
SaveHashes();
});
Start();
I use array to save data, because in this way I can preserve tabs order, which is unlikely if data would be saved in the object. When loading data after browser's restart, even if url is not unique, I can trust that it will be under some "close enough" index. I would do it more complex, for example reverse check if tab was not found, but this works ok so far.

Categories