google-chrome - 如何在工具栏中制作谷歌扩展选项页面

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

那是一个 popup ，而不是选项页面。目前，您有两种方法来创建选项页面:

• Old way: In a separated tab.

• New way (Chrome 40 onwards): In a popup in the extensions page.

  

但是，这些页面并不太特别，您唯一应该做的就是将它们存储在 chrome.storage.sync 中，因为您可以分别在两个链接中阅读:

Use the storage.sync API to persist these preferences. These values will then become accessible in any script within your extension, on all your user's devices.

Always use the storage.sync API to persist your options. This will make them accessible from script within your extension, on all of your user's devices.

因此，只要您将首选项存储在那里，就可以在浏览器操作(或页面操作)弹出窗口中制作一个选项页面。您只需将以下内容添加到您的 manifest.json 并创建 popup.html 页面:

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