在某些网页 chrome 扩展上显示上下文菜单

在某些网页上，我们需要对特定的内容进行一些操作，如搜索、翻译、收藏等等。这时候，在网页上右键点击可以弹出上下文菜单就非常方便了。

实现步骤

1. 创建一个 chrome 扩展
2. 在扩展的 manifest.json 文件中加入 contextMenus 权限

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": [
    "contextMenus"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

3. 在 background.js 文件中监听 contextMenus 点击事件，并添加菜单项

// 添加菜单项
chrome.contextMenus.create({
  id: "search",
  title: "在 Google 中搜索 \"%s\"",
  contexts: ["selection"]
});

// 监听菜单项点击事件
chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "search") {
    var query = info.selectionText;
    chrome.tabs.create({url: "https://www.google.com/search?q=" + encodeURIComponent(query)});
  }
});

4. 在网页上右键点击文本可以看到刚刚添加的菜单项，点击菜单项会在新的标签页中跳转到 Google 搜索页面并搜索选中的文本

注意事项

1. 扩展需要在浏览器的扩展页中开启开发者模式才能加载
2. 菜单项的上下文类型可以是 ["page", "frame", "selection", "link", "editable", "image", "video", "audio", "launcher", "browser_action", "page_action"]
3. 菜单项和菜单项点击事件必须在 background.js 文件中实现

以上是在某些网页 chrome 扩展上显示上下文菜单的实现步骤，可以方便地对选中的内容进行操作。