javascript - Adding drop-down menu to chrome extension icon - Stack Overflow

admin管理员组

文章数量:1398578

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 "Customize and control Google Chrome" button (located to the right of your extension icons). I tried to Google it but no one seemed to be talking about that. Am I missing any mon sense about Chrome extension development?

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 "Customize and control Google Chrome" button (located to the right of your extension icons). I tried to Google it but no one seemed to be talking about that. Am I missing any mon sense about Chrome extension development?

• javascript
• google-chrome
• google-chrome-extension

Share Improve this question Follow asked Jun 18, 2014 at 22:14 goldfrapp04goldfrapp04 2,35588 gold badges3535 silver badges4646 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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}`) };

本文标签： javascriptAdding dropdown menu to chrome extension iconStack Overflow