Chrome扩展开发：如何根据文本选中状态展示不同右键菜单？

这个需求我之前做扩展的时候碰到过，其实利用Chrome扩展的contextMenus API结合事件监听就能轻松实现，给你两种常用的思路：

方案一：动态切换两个菜单的可见性 #

这种方式适合需要给选中/未选中状态设置不同回调的场景，步骤如下：

1. 初始化两个菜单
   在你的background脚本（Manifest V2）或者service worker（Manifest V3）里先创建两个菜单，默认只显示“未选中”的那个：

   // 未选中文本时的菜单
   chrome.contextMenus.create({
     id: "menu-no-selection",
     title: "Not selected",
     contexts: ["all"],
     onclick: search // 你的回调函数
   });
   
   // 选中文本时的菜单，默认隐藏
   chrome.contextMenus.create({
     id: "menu-with-selection",
     title: "Selected",
     contexts: ["all"],
     onclick: search,
     visible: false
   });
   

2. 监听菜单显示事件，动态切换可见性
   利用chrome.contextMenus.onShown事件（菜单显示前触发），获取当前页面的选中文本，然后更新两个菜单的可见状态：

   chrome.contextMenus.onShown.addListener((info) => {
     // Chrome会自动把选中文本放到info.selectionText里，没有选中则为undefined
     const hasSelectedText = !!info.selectionText;
   
     // 更新两个菜单的可见性
     chrome.contextMenus.update("menu-no-selection", {
       visible: !hasSelectedText
     });
     chrome.contextMenus.update("menu-with-selection", {
       visible: hasSelectedText
     });
   
     // 必须调用refresh让修改生效
     chrome.contextMenus.refresh();
   });
   

方案二：动态修改单个菜单的标题 #

如果只是标题不同，回调逻辑可以复用的话，用这种方式更简洁：

1. 初始化单个菜单

   chrome.contextMenus.create({
     id: "main-menu",
     title: "Not selected",
     contexts: ["all"],
     onclick: search
   });
   

2. 动态更新菜单标题
   同样在onShown事件里判断选中文本，修改菜单标题：

   chrome.contextMenus.onShown.addListener((info) => {
     const newTitle = info.selectionText ? "Selected" : "Not selected";
     chrome.contextMenus.update("main-menu", { title: newTitle });
     chrome.contextMenus.refresh();
   });
   

注意事项 #

• 记得在manifest.json里声明contextMenus权限：

  "permissions": ["contextMenus"]
  

• 如果用的是Manifest V3，要把background配置成service worker，代码逻辑和V2基本一致，只是脚本的运行环境略有不同；
• 你的search回调函数里可以通过info.selectionText拿到用户选中的文本，方便后续处理。

内容的提问来源于stack exchange，提问作者misterdh