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

Question

我正在使用VueJS开发Chrome扩展程序。我没有开发Chrome扩展程序时可以使用Vue扩展程序来调试我的Vue代码。但是，在使用chrome开发人员工具检查chrome扩展程序时，我无法在调试Chrome扩展程序时看到Vue扩展选项卡。谢谢！

Answer 1

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

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

Answer 2

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

体验

这些天我正在开发Chrome浏览器插件。我发现__VUE_DEVTOOLS_GLOBAL_HOOK__未定义。

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

例如：

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

2.set Vue.config.devtools为真

3.grant Vue Devtools ext文件访问

但一切都行不通。

解决方案

众所周知，vue-devtools是Vue生态系统的重要组成部分，但它目前与网络浏览器相关联。

但是现在有一个软件包提供了一个独立的vue-devtools应用程序，可以用来调试任何Vue应用程序，无论环境如何。现在，您可以调试在移动浏览器，Safari，本机脚本等中打开的应用程序，而不仅仅是桌面Chrome或Firefox。

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

我们来试试吧：

遵循README.md步骤，

1. 全局安装包：

   npm install -g @vue/devtools

2. 在您的终端中运行：vue-devtools

   你会看到一个电子应用程序看起来像这样

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

警告

由于Chrome对插件的内容安全政策（CSP）限制，Chrome扩展程序的网络请求可能会被屏蔽。

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

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

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

What is Content Security Policy (CSP)

最后

连接成功！

参考：

vue-remote-devtools

DevTools for Chrome Extension Development.