如何在工具栏中制作Google扩展选项页面

Question

最近，我开始学习如何制作 Google Chrome 扩展程序。我的问题是我不知道如何在工具栏中创建一个按钮，以便当我单击它时，它会显示我的扩展选项，如下例所示：

我可以让我的扩展程序的图标出现在工具栏中，但是当我单击它时没有任何反应。这是我的

manifest.json

:

{
    "name": "Extension Name",
    "version": "0.1.1.2",
    "description": "Extension's description",
    "manifest_version": 2,
    "options_page": "options.html",
    "background": {
        "page": "index.html"
    },
    "browser_action": {
        "name": "Manipulate DOM",
        "icons": {
            "128":"icon.png"
        },
        "default_icon": "icon.png"
    },
    "content_scripts": [ {
        "js": [ "js-resource.js" ],
        "matches": [ "http://*/*", "https://*/*"]
    }]
}

Answer 1

这是一个弹出窗口，而不是选项页面。目前，您有两种方法来创建选项页面：

• 旧方法：在单独的选项卡中。

• 新方式（Chrome 40 及以上）：在扩展页面的弹出窗口中。

  

但是，这些页面并不太特别，为了保留用户的偏好，您唯一应该做的就是将它们存储在

chrome.storage.sync

中，您可以分别在两个链接中阅读：

使用

storage.sync

API 来保留这些首选项。然后，这些值将可以在您的所有用户设备上的扩展程序内的任何脚本中访问。

始终使用

storage.sync

API 来保留您的选项。这将使您可以在所有用户的设备上通过扩展程序内的脚本访问它们。

因此，只要您将首选项存储在那里，您就可以在浏览器操作（或页面操作）弹出窗口中创建一个选项页面。您只需将以下内容添加到您的

manifest.json

并创建

popup.html

页面：

"browser_action": {
    "default_title":    "Manipulate DOM",
    "default_icon":     "icon.png",
    "default_popup":    "popup.html",
    ...
}

Answer 2

他们在清单 3 中更改了它，所以现在不再是原来的方法了

"action":{ "default_popup": "popup.html"   }

如果您想阅读更多内容，请前往这里