我目前正在构建一个带有 vuejs 供电前端的 Chrome 扩展程序。使用vuecli 效果非常好。直到应用开始使用Webextension-API 为止。普通网站无权访问该API；注册扩展。
那么，使用 vuecli（支持 webpack 工具）开发 vuejs-Extension 的最佳设置是什么？什么设置允许测试应用程序？
【问题讨论】：
标签： javascript vue.js google-chrome-extension vue-cli
我建议使用vue-cli-plugin-browser-extension。请注意，虽然 README 表明 Vue CLI 3.x 支持，但它也适用于 Vue CLI 4.x（使用 4.3.1 测试）。
它支持多种可以为您节省大量时间的功能，包括实时重新加载以及捆绑 Chrome 和 Firefox（以及其他浏览器）。
要将其安装在 Vue CLI 项目中，只需运行：vue add browser-extension。
【讨论】：
经过一番思考，我发现了vue-cli-service-binary。此二进制文件允许watch 一个项目并根据需要重新构建应用程序。默认情况下，vuecli 会将文件输出到dist，这是我放置manifest.json、contentScript.js 和backgroundScript.js 文件的目录。然后，以下命令将根据需要重新构建应用程序，允许 几乎 热重新加载（打开和关闭弹出窗口）。小型应用程序的构建时间相当快（约 200 毫秒）。
vue-cli-service build --watch --no-clean
最后，您可能必须在保存时禁用eslint（请参阅this），因为它会引发关于找不到chrome 的错误。然后我将解压后的扩展加载到一个干净的 Chrome 会话中，并开始使用开发人员工具对其进行测试。不幸的是，我还没有让Vue Devtools 使用扩展。
它对我有用：我可以以合理的方式开发vuejs-powered Chrome 扩展。我仍然想知道是否有人有更好的工作流程或改进想法？
编辑： @tony19 的回答是首选方式。
【讨论】：