使用 Vuejs 和 Vue Cli 构建 Chrome 个扩展
Building Chrome Extensions with Vuejs and Vuecli
我目前正在构建一个带有 vuejs powered frontend. This worked pretty great using vuecli 的 Chrome 扩展。直到应用程序开始使用 Webextension-API。普通网站无法访问此API；注册扩展做。
那么，使用 vuecli（支持 webpack 工具）来开发 vuejs-Extension 的最佳设置是什么？什么设置允许测试应用程序？
经过一番思考，我找到了vue-cli-service-binary。此二进制文件允许 watch 项目并根据需要重建应用程序。默认情况下，vuecli会将文件输出到dist，这是我放置manifest.json、contentScript.js和backgroundScript.js文件的目录。然后，以下命令将根据需要重建应用程序，允许 almost 热重载（打开和关闭弹出窗口）。小型应用程序的构建时间相当快（~200 毫秒）。
vue-cli-service build --watch --no-clean
最后，您可能必须在保存时禁用 eslint（请参阅 this），因为它会引发有关 chrome 未找到的错误。然后，我将解压后的扩展加载到一个干净的 Chrome 会话中，并开始使用开发人员工具对其进行测试。不幸的是，我还没有 Vue Devtools 使用扩展程序。
它对我有用：我可以以合理的方式开发 vuejs 驱动的 Chrome 扩展。我仍然想知道是否有人有更好的工作流程或改进想法？
编辑：
@tony19 的回答是首选方式。
我建议使用 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.
我目前正在构建一个带有 vuejs powered frontend. This worked pretty great using vuecli 的 Chrome 扩展。直到应用程序开始使用 Webextension-API。普通网站无法访问此API；注册扩展做。
那么，使用 vuecli（支持 webpack 工具）来开发 vuejs-Extension 的最佳设置是什么？什么设置允许测试应用程序？
经过一番思考，我找到了vue-cli-service-binary。此二进制文件允许 watch 项目并根据需要重建应用程序。默认情况下，vuecli会将文件输出到dist，这是我放置manifest.json、contentScript.js和backgroundScript.js文件的目录。然后，以下命令将根据需要重建应用程序，允许 almost 热重载（打开和关闭弹出窗口）。小型应用程序的构建时间相当快（~200 毫秒）。
vue-cli-service build --watch --no-clean
最后，您可能必须在保存时禁用 eslint（请参阅 this），因为它会引发有关 chrome 未找到的错误。然后，我将解压后的扩展加载到一个干净的 Chrome 会话中，并开始使用开发人员工具对其进行测试。不幸的是，我还没有 Vue Devtools 使用扩展程序。
它对我有用：我可以以合理的方式开发 vuejs 驱动的 Chrome 扩展。我仍然想知道是否有人有更好的工作流程或改进想法？
编辑： @tony19 的回答是首选方式。
我建议使用 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.