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

EN

不幸的是，目前不可能在扩展中使用vue devtools，因为扩展页面是通过chrome- extension ://提供的

这是一个已知问题，链接：https://github.com/vuejs/vue-devtools/issues/120

首先，启用在Chrome ext开发环境中使用Vue devtools。

体验

这几天我正在开发一个Chrome浏览器插件，我发现__VUE_DEVTOOLS_GLOBAL_HOOK__没有定义。

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

示例：

1.打开chrome-extension://<hash>/app.html

2.将Vue.config.devtools设置为true

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

但全部不起作用。

解决方案

正如我们所知，vue-devtools是Vue生态系统中必不可少的一部分，但目前它与web浏览器捆绑在一起。

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

这个包名叫vue-remote-devtools，它是一个独立的电子外壳，用于远程调试Vue应用程序！

让我们试一试：

遵循README.md步骤，

1. 全局安装程序包：

npm install -g @vue/devtools

在终端中运行

1. ：vue-devtools

您将看到一个电子应用程序，如下所示的

3.将脚本标记注入您的Chrome扩展.html文件。

警告

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

此时，您需要修改Chrome Ext配置文件manifest.js。

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

虽然您可以将CSP复制到相应的文件manifest.js中，但我仍然希望您能找出content_security_policy是什么：

What is Content Security Policy (CSP)

最后

连接成功！

​

参考：

vue-remote-devtools

DevTools for Chrome Extension Development.