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

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

问题是，当我点击工具栏图标时，Chrome会不停地打开新的扩展标签，而我想要的行为（显然）是只打开一个标签。奇怪的是，当我使用“web URL”时，我只能打开一个选项卡，例如

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'"
}

{
    "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'"
}

background.js

：

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

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

这个网站上的几个帖子都有类似的问题，但没有一个建议的解决方案适合我：

• ：当我使用事件页面或将侦听器添加到单击的

  onClicked

  even时，当我单击扩展工具栏图标时，不会发生任何事情

---

事实证明，在单击工具栏图标时打开选项卡的正确方法是将对

chrome.tabs.create（）

的调用包装在一个

onClicked

侦听器中：

修订的

background.js

：

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

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

最初，由于

chrome.browserAction.onClicked

未定义，这将不起作用。要解决这个问题。此外，以前使用的持久后台和

activeTab

权限是不必要的，可以删除：

修订的

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'"
}

{
    "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'"
}

---

将其放在图标的单击侦听器中：。如果我将

chrome.tabs.create（）

放在单击侦听器中，则该选项卡不会打开。是时候打开了！