【问题标题】：Can I use Vue extension when developing a Chrome extension using Vue CSP mode?使用 Vue CSP 模式开发 Chrome 扩展时可以使用 Vue 扩展吗？
【发布时间】：2016-04-01 15:45:33
【问题描述】：

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

【问题讨论】：

确保将您的标志设置为开发。即使您将Vue.config.debug 设置为true，如果您的环境变量未设置为开发，例如NODE_ENV，您的Vue 选项卡也不会出现
我应该在哪里设置 NODE_ENV？我相信这是 chrome 没有在节点环境上运行。
这适用于 vueify 或 vue-loader。如果你单独使用vue，那么就不需要了

标签： google-chrome-extension vue.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

经验

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

虽然不是什么大问题，但是我想解决。网上查了很多资料。

示例：

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

2.设置Vue.config.devtools为真

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

但一切都不起作用。

解决方案

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

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

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

让我们试一试：

按照README.md 的步骤，

全局安装包：

npm install -g @vue/devtools
在您的终端中运行：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'"

虽然你可以将content_security_policy复制到对应的文件manifest.js，但还是希望你能找出CSP是什么：

What is Content Security Policy (CSP)

终于

连接成功！

参考：

vue-remote-devtools

DevTools for Chrome Extension Development.

【讨论】：