Adding icon menus to Chrome extensions - google-chrome-extension

Question

I successfully created my first Chrome extension. It now runs only when the extension icon is clicked instead of on the background, and that is great. However, I would like to add more actions to my extension I have been trying to use an extension popup to run other functions but I can't make it work. It doesn't have to be like that, so I am open for suggestions. I do not want to use context menus. I want people to click on the extension icon and show them a "menu".
Right now my extension only alerts a message when it finds a valid page (from mydomain.com), and it finds a hidden field with the name "returnURL". It alerts the value.
I would like to be able to add the ability to click on the icon but instead show an options menu with multiple options.
Something like this:
Click on the extension icon and show two options
Get Response URL (this option will run the current functionality I have now)
Do something else (So I could have another function to execute on the
loaded page)
...and more options if I needed to add them on future versions of my extension.
How do I modify my extension to do that.
Here is my code:
manifest.json
{
"name": "Get Response URL",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "mkto_icon.png",
"name": "Click to get URL"
},
"background":{
"scripts":["background.js"]
},
"permissions":["http://mydomain.com/*"]
}
background.js
chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON
if (tab.url.indexOf("http://mydomain.com/") != -1) { // Inspect whether the place where user clicked matches with our list of URL
chrome.tabs.executeScript(tab.id, {
"file": "contentscript.js"
}, function () { // Execute your code
console.log("Script Executed .. "); // Notification on Completion
});
}
});
contentscript.js
if (document.getElementsByName("returnURL")){
alert("\nThe Response URL on this form is:\n\n" + document.getElementsByName("returnURL")[0].value);
}
I followed the documentation I found on the Google Extensions developer site but I couldn't make it work. Your help is much appreciated.

Answer 1

You cannot have a real menu with a Chrome extension. You can however show an HTML page when the button is clicked (a pop-up). You can style this HTML page in a way that looks similar to a menu:
"browser_action": {
"default_icon": "mkto_icon.png",
"default_title": "Click here to open menu",
"default_popup": "popup.html"
},
Add a file popup.html to you extension and whatever content you want to show up. Scripts loaded by the pop-up page can load content scripts and communicate with them just like the background page.
For reference: browser actions documentation.