如何在生产模式下为 chrome 扩展启用 Vue devtools？

Posted 2023-02-22

【中文标题】如何在生产模式下为 chrome 扩展启用 Vue devtools？

【英文标题】：How to enable Vue devtools in production mode for chrome extensions?

【发布时间】：2017-11-30 07:58:14

【问题描述】：

我正在构建一个 chrome 扩展，并使用 vue-cli webpack 配置。我希望在运行 npm run build 命令后能够使用 vue devtools。

我尝试在main.js中添加Vue.config.devtools = true;，或者将NODE_ENV: '"production"'改为NODE_ENV: '"development"'，但是vue devtools仍然没有出现。

如何在生产模式下启用 vue devtools？

【问题讨论】：

文件顶部是 Vue.config.devtools = true 吗？还要检查 AdBlock 我遇到了一些问题

【参考方案1】：

首先，在 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.

【讨论】：

完成这一切后它仍然对我不起作用，连接后它会立即断开连接。只有在降级到 vue-devtools@^5.1.4 之后它才最终起作用。

【参考方案2】：

看起来我遇到了问题，因为我正在尝试在 Chrome 扩展程序中使用 vue devtools。不幸的是，无法使用 vue devtools，因为扩展页面是通过 chrome-extension://

提供的

延伸阅读：https://github.com/vuejs/vue-devtools/issues/120