How to enable Vue devtools in production mode for chrome extensions?
First,use Vue devtools in Chrome ext Development environment is enabled.
Experience
These days I'm developing a Chrome browser plugin.I found that __VUE_DEVTOOLS_GLOBAL_HOOK__ undefined.
Although not a big problem, but I want to solve it.I have searched a lot of information online.
example:
1.open chrome-extension://<hash>/app.html
2.set Vue.config.devtools to be true
3.grant Vue Devtools ext file access
but all doesn't work.
Solution
As we know, vue-devtools is an essential piece of the Vue ecosystem, but it is currently tied to a web browser.
But now There is a package provides a standalone vue-devtools application, that can be used to debug any Vue app regardless of the environment. Now you can debug your app opened in mobile browser, safari, native script etc. not just desktop chrome or firefox.
This package name is vue-remote-devtools, which is a standalone electron shell to remotely debug Vue apps!
Let's have a try:
Following the README.md steps,
Install the package globally:
npm install -g @vue/devtoolsrun in your terminal:
vue-devtoolsyou will see a electron app appear like this
3.inject the script tag to your Chrome Extension .html file.
Warning
Due to Chrome's Content Security Policy (CSP) restrictions on plug-ins,Chrome Extension's web request may be blocked.
At this point you need to modify the Chrome Ext configuration file manifest.js.
content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"Although you can copy content_security_policy to the corresponding file manifest.js, but I still hope you can find out what the CSP is:
What is Content Security Policy (CSP)
Finally
Connect Success！
Ref:
It looks like I have the problem because I'm trying to use vue devtools in Chrome extension. Unfortunately, it's impossible to use vue devtools because extension pages are served over chrome-extension://
Further reading: https://github.com/vuejs/vue-devtools/issues/120