浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例

chrome.contextMenus 允许开发者向浏览器的右键菜单添加自定义项。

在使用 chrome.contextMenus 之前，必须在 manifest.json 中声明权限：
浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例-LMLPHP

{
    "manifest_version": 3,
    "name": "chrome.contextMenus",
    "description": "chrome.contextMenus API 基础用法",
    "version": "1.0",
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icons/icon128.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "contextMenus"
    ],
    "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    }
}

在 manifest.json 声明 contextMenus 权限。

1、chrome.contextMenus.create

可以通过 chrome.contextMenus.create 进行创建右键菜单，如下：
浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例-LMLPHP

chrome.runtime.onInstalled.addListener(function () {
  chrome.contextMenus.create({
    id: "1",
    title: "右键菜单选择一",
  });
});

看看效果吧。
浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例-LMLPHP
chrome.contextMenus.create 有哪些参数可配置呢？

id：菜单项的唯一标识符
title：菜单名称
type：菜单类型，包括：“normal”（默认） | “checkbox”（多选） | “radio”（单选） | “separator” （分隔符）
contexts：菜单项出现的上下文，包括：

"all": 上下文菜单项将在所有可用的上下文中显示。
"page": 表示上下文菜单项只在常规网页的空白处（非链接、非媒体等）上点击时显示。
"frame": 表示上下文菜单项只在网页中的 iframe 上点击时显示。
"selection": 表示上下文菜单项只在用户选中文本时显示。
"link": 表示上下文菜单项只在链接上点击时显示。
"editable": 表示上下文菜单项只在可编辑区域（如文本框）点击时显示。
"image": 表示上下文菜单项只在图像上点击时显示。
"video": 表示上下文菜单项只在视频上点击时显示。
"audio": 表示上下文菜单项只在音频元素上点击时显示。
"launcher": （已弃用）原先用于Chrome应用的启动器上的菜单。
"action": 表示上下文菜单项只在扩展的操作按钮（地址栏旁的图标）上点击时显示。

parentId：父级菜单唯一标识
checked：当 type 为多选或单选时，菜单是否被选中
enabled：菜单是否被禁用
documentUrlPatterns：指定上下文菜单项应该在哪些文档页面的 URL 中显示
targetUrlPatterns：匹配触发上下文菜单项显示的链接的 URL

其中：id、title、parentId、checked、enabled 都是比较容易理解的。就不一一举例了。

假设我们希望当选中文字右键时，菜单按分类展示，比如：一级菜单：水果类；二级菜单：苹果、梨子、西瓜
可以如下创建菜单：
浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例-LMLPHP

chrome.runtime.onInstalled.addListener(function () {
  // 定义菜单
  const menuList = [
    {
      id: "1",
      title: "水果类",
      children: [
        { id: "1-1", title: "苹果", parentId: "1" },
        { id: "1-2", title: "梨子", parentId: "1" },
        { id: "1-3", title: "西瓜", parentId: "1" },
      ],
    },
  ];

  // 创建菜单
  function createMenu(menu) {
    chrome.contextMenus.create(
      {
        id: menu.id,
        title: menu.title,
        contexts: ["selection"],
        parentId: menu.parentId,
      },
      function () {
        if (Array.isArray(menu.children)) {
          menu.children.forEach(createMenu);
        }
      }
    );
  }

  menuList.forEach(createMenu);
});

定义了一个菜单列表 menuList ，通过递归 createMenu 创建菜单。同时，我们将 contexts 设置了 selection ，即在选中文本时才显示菜单。

效果如下：
浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例-LMLPHP

documentUrlPatterns：表示哪些网址下可以看到右键菜单。
假如：我们只想让百度界面才能看到菜单，可以将 documentUrlPatterns 设置如下：
浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例-LMLPHP
documentUrlPatterns 支持通配符，*：匹配任何字符数量的任何字符序列。

targetUrlPatterns：它的作用和 documentUrlPatterns 类似，都是限制哪些内容可以看到菜单的，区别是：

documentUrlPatterns 是针对网页的
targetUrlPatterns 是针对页面上的某些元素（如链接、图片）的 URL 匹配

2、chrome.contextMenus.update

更新菜单，除了 id 不能更新外，其他创建选项均可以更新，比如：更新菜单标题 title
浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例-LMLPHP

  chrome.contextMenus.create({
    id: "1",
    title: "更新菜单",
  });

  // 更新菜单
  function updateMenu(id, title) {
    chrome.contextMenus.update(id, {
      title,
    });
  }
  updateMenu("1", "更新菜单2");

3、chrome.contextMenus.remove

移除指定菜单项

chrome.contextMenus.remove("id");

这个 API 比较简单，就不单独举例了。

4、chrome.contextMenus.removeAll

移除所有菜单项

chrome.contextMenus.removeAll()

代码地址：传送门

总结

使用右键菜单要开启权限：contextMenus
chrome.contextMenus.create：创建菜单
chrome.contextMenus.update：更新菜单
chrome.contextMenus.remove：移除菜单
chrome.contextMenus.removeAll：移除全部菜单

创作不易，动动您发财的小手，点赞关注一波，支持我创作更多对您有帮助的文章！

小鱼神1024