首先,启用了在Chrome扩展开发环境中使用Vue devtools。

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

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

例子:

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

Vue.config.devtools

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

解决方案

正如我们所知, vue-devtools

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

vue-remote-devtools ,这是一个独立的电子shell,用于远程调试Vue应用程序!

让我们试一试:

README.md 步骤,

1. 全局安装软件包:

   npm install -g @vue/devtools

2. 在终端中运行:

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

3.将脚本标记注入到Chrome扩展中 .html

警告

manifest.js .

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

content_security_policy 清单.js

What is Content Security Policy (CSP)

最后

vue-remote-devtools

DevTools for Chrome Extension Development.

看起来我有这个问题,因为我试图在Chrome扩展中使用vue devtools。不幸的是,无法使用vue devtools,因为扩展页面是通过chrome扩展提供的://

https://github.com/vuejs/vue-devtools/issues/120