javascript 在后台打开新标签页，将焦点放在当前标签页上 - Chrome

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

提问by Gabe

How to execute in JavaScript a CTRL + click on a link that works in the latest version of Chrome (v68)?

如何在 JavaScript 中执行 CTRL + 单击适用于最新版 Chrome (v68) 的链接？

Context - I'm running a JavaScript script that opens a certain tab at certain hours of the day (and closes it after a few minutes). I'm trying to get it to open the tab in background leaving the focus on the current tab that I'm using.

上下文 - 我正在运行一个 JavaScript 脚本，该脚本在一天中的特定时间打开某个选项卡（并在几分钟后关闭它）。我试图让它在后台打开选项卡，将焦点留在我正在使用的当前选项卡上。

The tab opened programmatically leads Chrome to pop up even when minimized, quite disrupting.

以编程方式打开的选项卡即使在最小化时也会导致 Chrome 弹出，这非常具有破坏性。

These old solutionsthat I found here on Stack Overflow don't work with the latest version of Chrome.

我在 Stack Overflow 上找到的这些旧解决方案不适用于最新版本的 Chrome。

Manually CTRL + clicking a link achieves the effect that I want (tab is opened in background). Can this be achieved programmatically on the latest version of Chrome?

手动CTRL+点击链接达到我想要的效果（tab在后台打开）。这可以在最新版本的 Chrome 上以编程方式实现吗？

---

---

The following code does not work anymore with the latest version of Chrome..

以下代码不再适用于最新版本的 Chrome..

const openNewBackgroundTab = (url) => {
  const anchor = document.createElement("a");
  anchor.href = url;
  document.body.appendChild(anchor);
  const evt = document.createEvent("MouseEvents");    
  // the tenth parameter of initMouseEvent sets ctrl key
  evt.initMouseEvent(
    "click", true, true, window, 0, 0, 0, 0, 0,
    true, false, false, false, 0, null
  );
  anchor.dispatchEvent(evt);
}
openNewBackgroundTab('https://stackoverflow.com');

.. the new tab still gets the focus.

.. 新标签仍然是焦点。

---

---

STEPS to reproduce:

重现步骤：

• Open window 1 and in console execute:

• 打开窗口 1 并在控制台中执行：

let winStacko; setTimeout(() => { winStacko = open('https://www.stackoverflow.com'); }, 30 * 1000); setTimeout(() => winStacko.close(), 2 * 60 * 1000);

let winStacko; setTimeout(() => { winStacko = open('https://www.stackoverflow.com'); }, 30 * 1000); setTimeout(() => winStacko.close(), 2 * 60 * 1000);

• Open window 2 within 30 seconds after executing the script

• 执行脚本后30秒内打开窗口2

DESIRED behavior:

期望的行为：

• Window 2 has the focus for the whole time while the background tab is opened and then closed.

• 在背景选项卡打开然后关闭时，窗口 2 始终具有焦点。

采纳答案by Hyyan Abo Fakher

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

编写一个 chrome 扩展来实现你所需的行为实际上非常简单，你只需要知道如何从扩展中打开/关闭选项卡。以下页面描述了整个API

Here is an example :

这是一个例子：

1 - Create a manifest.jsonfile, and ask for the tabspermission

1 - 创建一个manifest.json文件，并请求tabs权限

{
  "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.jsscript in the same folder

2 -background.js在同一文件夹中创建脚本

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 activeparameter here , it defines whether the tab should become the active tab in the window. Does not affect whether the window is focused

注意：请注意active这里的参数，它定义了该选项卡是否应成为窗口中的活动选项卡。不影响窗口是否聚焦

3 - Use the extension in chrome

3 - 在 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 Unpackedbutton to select the extension folder
5. The extension will run automatically

1. 如果您使用的是下载链接，请解压存档
2. 从 chrome 菜单导航到扩展
3. 右上角开启开发者模式
4. 单击Load Unpacked按钮选择扩展文件夹
5. 扩展程序将自动运行

回答by Gabe

I PARTIALLYresolved using a Chrome plugin: Force Background Tab

我部分解决了使用 Chrome 插件：强制背景选项卡

https://chrome.google.com/webstore/detail/force-background-tab/gidlfommnbibbmegmgajdbikelkdcmcl/related?hl=en

https://chrome.google.com/webstore/detail/force-background-tab/gidlffommnbibbmegmgajajdbikelkdcmcl/related?hl=en

Using that add-on the tab is opened in background without focus. The only issue is that the last used tab of the window (can be different from the tab that launches the new tab) still pops up in front of any other application in use.

使用该附加组件，该选项卡在没有焦点的情况下在后台打开。唯一的问题是窗口上次使用的选项卡（可能与启动新选项卡的选项卡不同）仍会在任何其他正在使用的应用程序前面弹出。

回答by bluninja1234

In the old days, you could do this using stuff like :

在过去，您可以使用以下内容来执行此操作：

if(window.focus == false)
{
    this.focus();
}

Now you have to use extra plugins, due to abusers.
The Solution: Window Rollover:
The solution is to create another page. When you click the link, the window closes, it switches to a page that opens the window that just closed, and changes it's location to the new page.
Page 1 code:

由于滥用者，现在您必须使用额外的插件。
解决方案：窗口翻转：
解决方案是创建另一个页面。当您单击链接时，窗口关闭，它切换到一个页面，打开刚刚关闭的窗口，并将其位置更改为新页面。
第 1 页代码：

document.getElementById("myId").onclick = function(){window.open("page2.html");window.close()}

Page 2 code:

第2页代码：

window.open("previouspage.html");
window.location = "newpage.html";
//close the page
window.close();

I call this strategy "Window Rollover."

我将此策略称为“窗口翻转”。

回答by TiagoMagalhaes

You can try a kind of pop under, where you open the same url in a new tab, then change the location.href of current tab to the desired new url.

您可以尝试一种 pop under，在新选项卡中打开相同的 url，然后将当前选项卡的 location.href 更改为所需的新 url。

window.open(window.location.href);
window.location.href = 'http://www.google.com';