构建上下文菜单

鼠标的替代点击(通常称为右键点击)会显示上下文菜单。如需构建上下文菜单,请先将 "contextMenus" 权限 添加到 manifest.json 文件。

manifest.json:

  "permissions": [
    "contextMenus"
  ],

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

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

此示例的其余部分取自 Global Google 搜索上下文菜单示例,该示例提供了多个上下文菜单选项。当扩展程序包含多个上下文菜单时,Chrome 会自动将它们折叠到单个父菜单中,如下所示:

嵌套的上下文菜单。
图 4:上下文菜单和嵌套的子菜单。

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

service-worker.js:

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

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