Google chrome extension 在使用Vue CSP模式开发Chrome扩展时，我可以使用Vue扩展吗？

我正在使用VueJS开发一个Chrome扩展。我可以使用Vue扩展调试我的Vue代码，而不是为Chrome扩展开发。但是，在使用Chrome developer工具在Chrome extension中进行检查时，调试我的Chrome extension时，我无法看到Vue extension选项卡。谢谢

---

不幸的是，目前无法在扩展中使用vue devtools，因为扩展页面是通过chrome扩展提供的：//

---

这是一个已知问题，链接：

首先，启用Chrome ext开发环境中的Vue开发工具

经验 这些天我在开发一个Chrome浏览器插件。我发现

\uu VUE\u DEVTOOLS\u GLOBAL\u HOOK\uu

未定义

虽然不是大问题，但我想解决它。我在网上搜索了很多信息

例子： 1.打开

chrome-extension:///app.html

2.将

Vue.config.devtools

设置为true

3.授予Vue Devtools外部文件访问权限

但一切都不起作用。

解决方案 正如我们所知，

vue devtools

是vue生态系统的重要组成部分，但目前它与web浏览器绑定

但是现在有一个包提供了一个独立的vue devtools应用程序，可以用来调试任何vue应用程序，而不管环境如何。现在，您可以调试在移动浏览器、safari、原生脚本等中打开的应用程序，而不仅仅是桌面chrome或firefox

此软件包名为

vue remote devtools

，它是一个独立的电子shell，用于远程调试vue应用程序

让我们试一试：

遵循

README.md

步骤

全局安装程序包：

npm安装-g@vue/devtools

在终端中运行：

vue devtools

你会看到一个电子应用程序像这样出现

3.将脚本标记插入Chrome扩展名

.html

文件

警告 由于Chrome的内容安全策略（CSP）对插件的限制，Chrome扩展的web请求可能会被阻止

此时，您需要修改ChromeExt配置文件

manifest.js

content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"

虽然您可以将

content\u security\u policy

复制到相应的文件

manifest.js

，但我仍然希望您能够了解CSP是什么：

最后 连接成功

参考：

---

确保将您的标志设置为“开发”。即使您已将

Vue.config.debug

设置为true，如果您的环境变量未设置为development，例如

NODE_ENV

您的Vue选项卡也不会出现我应该在哪里设置NODE_ENV？我相信这不是在节点环境下运行的chrome。这适用于vueify或vue loader。如果您单独使用vue，则不需要