Open multiple links in Chrome at once as new tabs
I’m trying to open multiple links at once in Google Chrome in new tabs but it fails.
Problems:
- Blocked by popup
- Open in new windows instead of tab after the user allowed the popup
With this, I can open multiple links at once in Firefox:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" >');</script>
<link rel="stylesheet" href="style.css">
<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="openLinks()">Open</button>
</body>
</html>
Also, I came across someone who found a workaround.
I tried using setInterval to try to open the links individually but it didn’t work.
You can do this in vanilla JavaScript:
<html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.java2s.com/")
window.open("http://www.java2s.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>
Here is a more Chrome-specific implementation (if popup blockers are giving you difficulty):
var linkArray = []; // your links
for (var i = 0; i < linkArray.length; i++) {
// will open each link in the current window
chrome.tabs.create({
url: linkArray[i]
});
}
Here is some documentation: https://developer.chrome.com/extensions/tabs
The reason that the browser extension can do it is because Chrome extensions have access to a special Chrome API, which lets you use:
chrome.windows.create({tabid: n})
where createData has a tabid value greater than any current tab (and you can find the greatest current tabid using chrome.windows.getAll()).
However, in terms of doing it on your page (or anywhere that’s not a Chrome extension), that’s not possible, since whether or not a new window opens in a new tab is determined entirely by the user’s settings.
User will have to allow popups but I ended up doing this:
function openMultipleTabs(urlsArray){
urlsArray.forEach(function(url){
let link = document.createElement('a');
link.href = url;
link.target="_blank";
link.click();
});
}
The best way to open multiple tabs or windows is by using setTimeout() of 500ms.
window.open("https://facebook.com", "one", windowFeatures);
setTimeout(function(){
window.open("https://facebook.com", "two", windowFeatures);
}, 500);
The following code will open multiple popUp on the button click.
<html>
<head>
<title></title>
<script type="text/javascript">
function open_win() {
window.open("url","windowName","windowFeatures")
window.open("url","DifferentWindowName","windowFeatures")// different name for each popup
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
you need to make sure that each window name is different, otherwise the last popup will overwrite it’s previous popup. As a result you will end up with a single popup.
Worth mentioning that you need to actually have popups allowed in your browser settings. Don’t rely on browser alert asking you if you want to allow the popup to open.
I have a simple solution playing with setTimeout, check below
function openMultipleTabs(urlsArray: string[]) {
urlsArray.forEach((url: string, key: number) => {
if (key === 0) {
window.open(url, `_blank_first_${key.toString()}`);
} else {
setTimeout(function () {
console.log("resolved", key);
window.open(url, `_blank_${key.toString()}`);
}, 1500 * key);
}
});
}
Looks like extension uses below code to open those tabs.
function openTab(urls, delay, window_id, tab_position, close_time) {
var obj = {
windowId: window_id,
url: urls.shift().url,
selected: false
}
if(tab_position != null) {
obj.index = tab_position
tab_position++;
}
chrome.tabs.create(obj, function(tab) {
if(close_time > 0) {
window.setTimeout(function() {
chrome.tabs.remove(tab.id);
}, close_time*1000);
}
});
if(urls.length > 0) {
window.setTimeout(function() {openTab(urls, delay, window_id, tab_position, close_time)}, delay*1000);
}
}
If you want to take a look at the code of the extension for reference you will find the extensions in (for Windows) C:\Documents and Settings\*UserName*\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions
Since modern browsers (and even old ones with blockers), will absolutely not allow this (one user action, one new tab). My solution was:
openInfoLinks = () => {
const urlsArray = [
`https://...`,
`https://...`,
`https://...`,
]
window.open(
urlsArray[this.linkCounter],
`_blank_${someIdentifier}_${this.linkCounter}`
);
this.linkCounter++;
setTimeout(() => {
this.linkCounter = 0;
}, 500);
}
The user can open the links in quick succession with ctrl+click-ing the button N times.
