Chrome扩展Manifest V3版本下如何给浏览器操作按钮添加右键菜单项

Manifest V3 对扩展能力做了多处调整，你只需要修改几处逻辑即可实现原有功能：

• 替换上下文取值：Manifest V3 中废弃了browser_action和page_action两类上下文，统一合并为action，对应 manifest 中配置的action按钮入口。
• 更换点击事件监听方式：chrome.contextMenus.create方法不再支持直接传入onclick回调参数，需通过全局的chrome.contextMenus.onClicked事件监听菜单点击。
• 调整菜单创建时机：建议将菜单创建逻辑放在chrome.runtime.onInstalled事件回调中，避免扩展刷新、更新时重复创建同ID菜单抛出冲突错误。

正确实现代码（background.js） #

// 扩展安装/更新时初始化右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'foo',
    title: 'first',
    contexts: ['action']
  })
})

// 监听右键菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'foo') {
    // 注意：Service Worker 环境没有 window 对象，不能直接调用 alert()
    // 如需提示可使用 chrome.notifications API 或向内容脚本发消息触发页面弹窗
    console.log('first 菜单项被点击')
  }
})

你当前的manifest.json配置已经正确声明了contextMenus权限，无需额外调整。

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