How to make Google extension options page in the toolbar - google-chrome

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

That's a popup, not an options page. Currently you have two ways to do an options page as such:
Old way: In a separated tab.
New way (Chrome 40 onwards): In a popup in the extensions page.
However, those page are not too special and the only thing you should do to persist the user's preferences is to store them in chrome.storage.sync, as you can read in both links, respectively:
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.
So as long as you store the preferences in there, you can make an options page in the browser action (or page action) popup. You just need to add the following to your manifest.json and to create the popup.html page:
"browser_action": {
"default_title": "Manipulate DOM",
"default_icon": "icon.png",
"default_popup": "popup.html",
...
}