单击工具栏图标时在新选项卡中打开 chrome 扩展

Question

我希望扩展 HTML 在新选项卡中打开，而不是在弹出窗口中打开。现有的扩展Session Buddy具有我想要复制的确切行为。

问题是，当我点击工具栏图标后，Chrome 会不停地打开新的扩展标签，而所需的行为（显然）是只打开一个标签。奇怪的是，当我使用“网址”（例如https://stackoverflow.com/ ）时，我只能打开一个选项卡。

manifest.json：

{
    "manifest_version": 2,
    "name": "angular chrome extension boilerplate",
    "version": "1.0.0",
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "permissions": [
        "activeTab",
        "tabs",
        "background"
    ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

background.js：

chrome.tabs.create({ url: chrome.extension.getURL('index.html') });

本网站上的几篇文章都有类似的问题，但没有一个建议的解决方案对我有用：

• Chrome 扩展程序：onclick 扩展程序图标，在新选项卡中打开 popup.html：当我使用事件页面或向事件添加侦听器onClicked时，单击扩展程序工具栏图标时没有任何反应。

Answer 1

事实证明，在单击工具栏图标时打开选项卡的正确方法是将调用包装chrome.tabs.create()在onClicked侦听器中：

修订background.js：

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

最初这不会起作用，因为chrome.browserAction.onClicked是undefined. 为了解决这个问题，需要"browser_action"向manifest.json. 此外，之前使用的持久化背景和activeTab权限是不必要的，可以删除：

修订manifest.json：

{
    "manifest_version": 2,
    "name": "angular chrome extension boilerplate",
    "version": "1.0.0",
    "browser_action": { },
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": [
        "tabs",
        "background"
    ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}