Chrome扩展链接类右键菜单能否在弹窗前提取链接内容实现动态菜单项

根因说明 #

原实现将链接地址获取逻辑放在菜单点击的onclick回调中，该回调的触发时机为用户点击菜单项之后，无法介入菜单渲染前的标题调整环节。Chrome扩展原生提供了两类机制，可以在菜单展示前根据右键的链接上下文调整标题。

方案一：基于onShown事件动态更新（Manifest V3 推荐） #

该方案适配Chrome 88及以上版本，仅需维护单个菜单项，根据实时右键上下文动态修改标题，逻辑更灵活：

• 实现逻辑：
  • 扩展初始化时仅创建一次菜单项，避免重复创建报错
  • 利用chrome.contextMenus.onShown钩子：该事件在右键菜单即将弹出、尚未渲染给用户时触发，回调参数直接携带当前交互的完整上下文（包括被右键的链接地址linkUrl）
  • 在钩子回调中匹配链接前缀，调用chrome.contextMenus.update()修改菜单项标题
  • 调用chrome.contextMenus.refresh()刷新菜单UI，确保修改后的标题正常渲染
• 完整示例代码（后台Service Worker内执行）：

let dynamicMenuId;

// 初始化菜单项
function initContextMenu() {
  chrome.contextMenus.removeAll(() => {
    dynamicMenuId = chrome.contextMenus.create({
      id: 'dynamic-link-action',
      title: '默认操作',
      contexts: ['link']
    });
  });
}

// 菜单弹出前的钩子逻辑
chrome.contextMenus.onShown.addListener((info, tab) => {
  // 仅处理右键链接场景
  if (info.contexts.includes('link') && info.linkUrl) {
    let menuTitle;
    // 按规则匹配链接前缀
    if (info.linkUrl.startsWith('https://www.google.com')) {
      menuTitle = 'AAA';
    } else if (info.linkUrl.startsWith('https://twitter.com')) {
      menuTitle = 'BBB';
    } else {
      menuTitle = '默认操作';
    }
    // 更新菜单标题
    chrome.contextMenus.update(dynamicMenuId, {
      title: menuTitle
    });
    // 必须调用refresh才能让UI更新生效
    chrome.contextMenus.refresh();
  }
});

// 绑定菜单点击后的实际执行逻辑
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'dynamic-link-action' && info.linkUrl) {
    const targetContent = info.linkUrl;
    chrome.tabs.create({
      url: "https://twitter.com/search?q=" + targetContent
    });
  }
});

// 扩展安装时初始化菜单
chrome.runtime.onInstalled.addListener(() => {
  initContextMenu();
});

• 关键注意点：
  • 必须在调用update之后执行chrome.contextMenus.refresh()，否则UI不会同步更新标题
  • 在manifest.json中需要声明contextMenus权限，无需额外站点权限即可正常获取右键链接地址

方案二：基于URL匹配规则的静态菜单（旧版本兼容） #

如果需要兼容Chrome 88以下的旧版本，不需要依赖onShown钩子，可以利用菜单项的targetUrlPatterns配置实现：

• 针对google域名链接创建独立菜单项，配置targetUrlPatterns: ["https://www.google.com/*"]，标题直接写死为AAA，该菜单仅在右键匹配规则的链接时展示
• 针对twitter域名链接创建独立菜单项，配置targetUrlPatterns: ["https://twitter.com/*"]，标题直接写死为BBB，该菜单仅在右键匹配规则的链接时展示
• 每个独立菜单项单独绑定自己的点击回调逻辑，因为展示范围已经被匹配规则过滤，不需要动态调整标题

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