为什么 chrome.tabs.create 创建 2 个选项卡？

Question

当 chrome.tabs.create 函数被收到的消息触发时，它会创建 2 个选项卡。在下面的演示代码中，创建了1个cat标签，创建了2个dog标签。

这是设计使然还是错误？如果是已知错误，您能否提供错误 ID 以便我跟踪其进度？如何避免创建 2 个重复的选项卡？

调试控制台包含以下输出，因此即使在调试输出中只打印了一次对 secondaryTabCreationCallback_ 的调用，但实际上重复的选项卡也会注入内容脚本！！！！

Creating secondary tab
Created secondary tab: 11968
Kill request from tab: 11966
Kill request from tab: 11968

background.js

var handler = {
  url1_: 'https://www.google.com/?gws_rd=ssl#q=cat',
  url2_: 'https://www.google.com/?gws_rd=ssl#q=dog',

  windowId_: chrome.windows.WINDOW_ID_CURRENT,

  createPrimaryTab: function() {
    chrome.tabs.create(
        {'url': handler.url1_, 'active': false, 'windowId': handler.windowId_},
        handler.primaryTabCreationCallback_);
  },

  primaryTabCreationCallback_: function(tab) {
    chrome.tabs.executeScript(tab.id, {file: "content_script.js"});
  },

  createSecondaryTab_: function() {
    console.log("Creating secondary tab");
    chrome.tabs.create(
        {'url': handler.url2_, 'active': false, 'windowId': handler.windowId_},
        handler.secondaryTabCreationCallback_);
  },

  secondaryTabCreationCallback_: function(tab) {
    console.log("Created secondary tab: " + tab.id);
    chrome.tabs.executeScript(tab.id, {file: "content_script2.js"});
  },
};

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  switch (message.type) {
    case "CREATE_TAB":
      handler.createSecondaryTab_();
      break;
    case "KILL_ME":
      console.log("Kill request from tab: " + sender.tab.id);
      // chrome.tabs.remove(sender.tab.id);
      break;
    default:
      alert("Not Reached");
      break;
  }
});

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': chrome.extension.getURL('background.html')});
});

window.onload = function() {
  document.getElementById("start_button").onclick = handler.createPrimaryTab;
}

content_script.js

chrome.runtime.sendMessage({type: "CREATE_TAB"});

content_script2.js

chrome.runtime.sendMessage({type: "KILL_ME"});

background.html

<!doctype html>
<html>
  <head>
    <script src="background.js"></script>
  </head>
  <body>
    <div>
      <input type="button" id="start_button" value="Start">
    </div>
  </body>
</html>

manifest.json

{
  "manifest_version": 2,

  "name": "Tab Bug",
  "description": "Demonstrates bug in chrome.tabs.create.",
  "version": "1.0",

  "permissions": [
    "activeTab",
    "nativeMessaging",
    "tabs",
    "https://www.google.com/"
  ],
  "icons": { "128": "icon128.png" },
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "background": {
    "page": "background.html"
  }
}

Answer 1

问题是有 2 "background" 页运行。

manifest文件中指定的官方后台页面
chrome.tabs.create({'url': chrome.extension.getURL('background.html')}) 创建的选项卡。

这意味着有 2 个消息侦听器，这就是打开 2 个选项卡的原因。

可以通过查看 chrome 扩展页面上的扩展并单击 "Inspect views: background.html" 来找到来自官方 manifest.json 后台的控制台消息。其中显示：

Creating secondary tab
Created secondary tab: 11966
Kill request from tab: 11966
Kill request from tab: 11968

解决这个问题。 manifest.json 后台文件可以指向脚本 "starter.js" 而不是 html 页面，它只有以下 javascript:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': chrome.extension.getURL('background.html')});
});

Answer 2

我的background.js很简单

chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.create({
    url: chrome.runtime.getURL('popup.html'),
  })
})

manifest.json

"background": {
  "persistent": false,
  "scripts": [
    "background.js"
  ]
},

已尝试 disable/enable 扩展（这样 chrome 会破坏此扩展的所有背景页面）但它仍然会打开重复的标签！！

所以问题可能出在有人包含 background.js。你猜怎么着！这是 popup.html.

根本原因是 webpack.config.js 中的 HtmlWebpackPlugin。它默认包括所有chunks（包括background）。

所以我们只是从 popup.html 配置中排除 background 块，然后它应该会按预期工作。

new HtmlWebpackPlugin({
  template: 'public/popup.html',
  filename: 'popup.html',
  excludeChunks: ['background'],
}),

为什么 chrome.tabs.create 创建 2 个选项卡？

Why does chrome.tabs.create create 2 tabs?

google-chrome-extension

background.js

content_script.js

content_script2.js

background.html

manifest.json

manifest.json