Adding drop-down menu to chrome extension icon

Question

I know that I can associate a popup.html to clicks on the extension button. However, I want it to be a menu, like the one popping up after clicking on Chrome\'s own \"C

Answer 1

You can't.

You can either register a click via chrome.browserAction.onClicked but show no UI, or open an HTML page in a popup. You can style it to look like a menu, but it will still not be like a native drop-down menu.

Note that you can right-click the extension button, but the menu you get there is fixed. I submitted a feature request a long time ago regarding that, but it never took off. There is a contextMenus context "browser_action" now that achieves this.

Answer 2

A practical example, since the documentation isn't actually that clarifying:

manifest.js

{
  "name": "Foo menu",
  "description": "Demonstrating context menus on browser actions",
  "manifest_version": 2,
  "version": "1.0",
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "Click me"
  },
  "icons": {
    "16": "icon.png",
  },
  "permissions": ["contextMenus"]
}

background.js

chrome.contextMenus.removeAll();
chrome.contextMenus.create({
  id: "FOO_ACTION",
  title: "Foo",
  contexts: ["browser_action"],
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "FOO_ACTION") {
    // Execute foo using tab id
    foo(tab.id);
  }
});

const foo = (tabId) => { console.log(`Foo called on tab with id ${tabId}`) };