构建上下文菜单

系统会显示鼠标的替代点击（通常称为右键点击）的上下文菜单。本页介绍了如何实现上下文菜单。如需查看相关 API 成员的完整列表，请参阅 browser.contextMenu。

如需构建上下文菜单，请先向 manifest.json 文件添加 "contextMenus" 权限。

manifest.json:

  "permissions": [
    "contextMenus"
  ],

（可选）如果您想在菜单项旁边显示图标，请使用 "icons" 键。在此示例中，“Global Google Search”扩展程序的菜单项使用 16x16 图标。

带有 16x16 图标的上下文菜单项。

此示例的其余部分取自全局 Google 搜索上下文菜单示例，该示例提供了多个上下文菜单选项。如果扩展程序包含多个上下文菜单，Chrome 会自动将它们折叠为单个父级菜单，如下所示：

图 4：一个上下文菜单和一个嵌套的子菜单。

该示例通过在扩展程序 Service Worker中调用 contextMenus.create() 来展示这一点。子菜单项是从 locales.js 文件导入的。然后，runtime.onInstalled 会遍历这些元素。

service-worker.js：

const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  ...
}

browser.runtime.onInstalled.addListener(async () => {
  for (let [tld, locale] of Object.entries(tldLocales)) {
    browser.contextMenus.create({
      id: tld,
      title: locale,
      type: 'normal',
      contexts: ['selection'],
    });
  }
});