Chrome扩展迁移到Vue报Cannot read 'onClicked' of undefined错误如何解决

问题根因 #

你遇到的报错本质是contextMenus扩展API未被正确授权，或者API调用位置不符合权限要求，具体可按以下步骤排查：

排查&解决步骤 #

• 第一步：核对最终打包的权限配置
  你项目中public目录下的manifest.json的permissions数组未声明contextMenus权限，如果你使用的构建插件（通常是vue-cli-plugin-browser-extension）未开启配置合并，会优先使用你手动编写的manifest文件，忽略vue.config.js中声明的权限。

  1. 打开打包后dist目录下的manifest.json，检查permissions字段是否包含contextMenus
  2. 如果缺失，直接在项目源文件的manifest.json的permissions数组中添加"contextMenus"即可

• 第二步：核对API调用位置
  chrome.contextMenus.onClicked监听事件只能在background后台脚本中注册调用，如果你把这段代码写在了popup页面组件、contentScript注入脚本中，会因为上下文无权限访问该API导致报错。请把contextMenus相关的注册、监听逻辑全部迁移到src/background.js中。

• 第三步：排查popup空白问题
  popup空白通常是页面代码执行报错阻断了渲染，按以下操作查看具体报错：

  1. 打开Chrome扩展管理页，开启开发者模式
  2. 找到你的扩展，点击「检查视图」分类下的popup.html链接，打开弹出页专属调试控制台
  3. 根据控制台报错修复对应问题，常见原因包括资源路径错误、在popup中非法调用仅background可访问的API等

补充说明 #

如果你替换browser为chrome后仍报相同错误，就可以完全排除浏览器API前缀的问题，100%是权限未生效或者调用位置错误导致的chrome.contextMenus整体为undefined。

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