Chrome扩展contextMenu在browser_action中不受documentUrlPatterns限制的问题解决

问题出在documentUrlPatterns仅对与文档相关的上下文（如页面内容、选中区域等）生效，browser_action的右键菜单不受该参数约束，所以需要通过动态控制菜单的显示状态来实现需求。

步骤1：修改菜单控制逻辑 #

保留原有菜单创建代码，新增动态切换菜单可见性的逻辑：

// 创建右键菜单
chrome.contextMenus.create({
  id: 'PDF_TOP',
  title: 'PDF编辑/打印/转换',
  contexts: ['all'],
  documentUrlPatterns: ['*://*/*.pdf']
});

// 更新菜单可见性的函数
function updatePDFMenuVisibility() {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    // 判断当前活跃标签页URL是否以.pdf结尾
    const isPDFPage = tabs[0]?.url?.endsWith('.pdf');
    // 非PDF页面隐藏菜单，PDF页面显示
    chrome.contextMenus.update('PDF_TOP', { hidden: !isPDFPage });
  });
}

// 监听标签页切换事件
chrome.tabs.onActivated.addListener(updatePDFMenuVisibility);

// 监听标签页URL更新完成事件
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.active) {
    updatePDFMenuVisibility();
  }
});

// 插件安装/更新时初始化菜单状态
chrome.runtime.onInstalled.addListener(updatePDFMenuVisibility);

步骤2：配置必要权限 #

在manifest.json中添加tabs和contextMenus权限，确保可以获取标签页信息和操作右键菜单：

{
  "permissions": ["tabs", "contextMenus"]
}

原理说明 #

• documentUrlPatterns仅约束页面内的右键菜单触发条件，对浏览器工具栏按钮（browser_action）的右键菜单无效；
• 通过监听标签页的切换和更新事件，实时判断当前页面是否为PDF，调用chrome.contextMenus.update动态设置菜单的hidden属性，实现按需显示。

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