How to make Google extension options page in the toolbar

Question

Recently, I've started learning how to make Google Chrome extensions. My problem is that I don't know how to make a button in the toolbar so that when I click on it, it show me options for my extension like this example:

I can get the icon of my extension to appear in the toolbar, but nothing happens when I click on it. Here is my 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中，你可以分别在两个链接中阅读：

  

使用storage.sync API来保留这些偏好设置。然后，您可以在所有用户设备上的扩展程序中的任何脚本中访问这些值。

     

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

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

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