I Need to Open a New Window in the Background With JavaScript, and Make Sure the Original Is Still Focused

Open new window without focus on it

What you seek is called a "pop-under" window

  • Open a new window using let handle = window.open()
  • Lose focus of the new window by using handle.blur()
  • The return focus to your existing window using window.focus()

However, it's not a guarantee as user browser settings may override this behavior, especially pop-up blockers.

Open new tab in background leaving focus on current tab - Chrome

As you want this for personal usage, and you do not mind using an extension, then you can write your own one.

Writing a chrome extension to achieve your required behavior is actually super easy, All you need to know is how to open/close tabs from the extension.
The following page describes the whole API

Here is an example :

1 - Create a manifest.json file, and ask for the tabs permission

{
"name": "blabla",
"version": "0.1",
"permissions": ["tabs"],
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Open a background tab every x time"
},
"manifest_version": 2
}

2 - Create background.js script in the same folder

const INTERVAL = 5000;
setTimeout(function(){
chrome.tabs.create({url: "https://www.stackoverflow.com", active: false }, tab =>{
setTimeout(function(){
chrome.tabs.remove(tab.id);
},INTERVAL);
});
},INTERVAL);

You can download it from here too

Note: Please note the active parameter here , it defines whether the tab should become the active tab in the window. Does not affect
whether the window is focused

3 - Use the extension in chrome

  1. If you are using the download link, then unpack the archive
  2. Navigate from chrome menu to extensions
  3. Enable the developer mode in the top right corner
  4. Click on Load Unpacked button to select the extension folder
  5. The extension will run automatically

Can't open new window with background.js

follow these steps.

  1. create a button and click event listener on the popup window.
  2. send a message from the popup to background script using chrome message-passing API.
  3. implement Message listener on background script.
  4. inside the listener call the function to create a new window.

Popup.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>popup</title>
</head>
<body>
<button id="test">Click me</button>
<script src="./popup.js"></script>
</body>
</html>

Popup.js

document.getElementById("test").addEventListener("click", (event) => {
console.log("button clicked");
chrome.runtime.sendMessage({ msg: "create-window" }, (response) => {
console.log(response)
})
})

Background.js

chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.msg == "create-window") {
console.log("message received ")
createWindow("https://google.com")
sendResponse({ response: "response from background script" });
return true;
}
});
function createWindow(url) {
let createData = {
url: url,
width: 600,
height: 400
}
chrome.windows.create(createData, (window) => {
console.log(window)
})
}

Google Chrome - how to open new window, in background

Try with that

var url = "yourURL.html";
window.open(url, "s", "width= 640, height= 480, left=0, top=0,
resizable=yes, toolbar=no, location=no, directories=no, status=no,
menubar=no, scrollbars=yes, resizable=no, copyhistory=no").blur();
window.focus();

Using blur/focus on window object you can manage which one appears active from time to time.

Stay on Current Tab while using window.open()

http://www.pageresource.com/jscript/jwinopen.htm also check this

You can't directly control this, because it can be configured by the user. You might try "_newtab" which might work for Firefox but really you shouldn't rely on a new tab being opened. The user may have their browser settings set to open a new tab when a popup window is opened or it may show up as a popup. It just all depends on the browser settings.



Related Topics



Leave a reply



Submit