Vue-devtools: DevTools for Chrome Extension Development.

[IORoot]

Hi there,
I'm building a chrome extension (a browser action) and including VUE.js into it. However, whenever I inspect the code for the browser action your VUE DevTools does not appear in the list of tabs.
Perhaps I've not enabled it properly, but is this something I should be able to do? or is this limitation?

VUE Devtools opens up correctly in the normal devtools window by the way. It's only in the instance of the browser extension. Any suggestions?
Many thanks!

[warrantica]

Same for me as well. It seems that the dev tool works with http:// (or file:// if "Allow access to file URLs" is selected), but extension pages are served over chrome-extension:// so that may have something to do with it.

[alexander-ossur]

Same story. Yet I did not test with usual pages by http:// or file://

[mickdekkers]

Related: #130

[posva]

Maybe we could learn from redux or react devtools. I think they support this. https://github.com/zalmoxisus/redux-devtools-extension/blob/v2.2.1/src/browser/extension/inject/index.js

I don't know if it's related to remote debugging

[Folyd]

Sounds so bad that the "chrome://" pages didn't get support 😭 😞

[fremdev]

Any progress or workaround?

[posva]

Please don't comment to say _+1_, use the reaction feature 🙂

[yesm1994]

any progress?

[avrtau]

This worked for me:
https://github.com/vuejs/vue-devtools/issues/62#issuecomment-21532515

[andreiglingeanu]

Hey @posva, yes, that is the only way to go. Specifically because content_scripts defined in chrome shell won't ever run in the context of a Web Extension page.

Sadly, that's something that people from react-devtools are also struggling with. Tough redux-devtools managed to solve that by instructing extensions developers to manually include a specially prepared script that will trigger the devtools initialization in the context of a chrome://* page.

Maybe that's something we can learn from?

---

Actually, the way React people solved this problem is a totally different approach. They built a custom Electron app where they included the whole devtools UI. Also, they provide you with a way to _connect_ to them with a manually injected script. This works with both background, popup & content pages of Web Extensions, as long as you relax your CSP rule a bit. More info here.

[michalsnik]

I also think we should create electron based devtools package that will allow remote debugging whatever our users need.

[Akryum]

Discussion on the Electron shell: #451, related PR: #452.

I think we can close this as a remote Electron shell would fix this.

[ppKrauss]

Is a bug, Chrome extension vue-devtools not detecting Vue.js

please see https://stackoverflow.com/q/49196181/287948

[zrshishir]

I have faced same problem. Now I can see the vue tab in my console. I was using production version of vue now i am using vue developer version. It may help you.

[torarnv]

This is still an issue. Using Vue in a Chrome extension, eg: chrome-extension://<hash>/app.html, results in Vue.config.devtools being true, but devetools is undefined, resulting in this message on every reload:

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

The Vue devtools button is grayed ut, and says "Vue.js not detected" when clicking it.

[wujunchuan]

@torarnv I have solved this problem

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,

1. Install the package globally:

   npm install -g @vue/devtools

2. run in your terminal: vue-devtools

   you 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:

vue-remote-devtools

DevTools for Chrome Extension Development.

[Ge-Ge]

@wujunchuan

I connect vue-remote-devtools success，but i cannot find component.
I run vue.js on conent_script.

[tyler36]

@wujunchuan worked for me with Chrome 72.

After changing manifest.js, I had to un-install / re-install extension to force the content_security_policy update

[theharshin]

The separate electron shell works for popup pages & standalone pages. There is still no workaround for making vue-devtools work with content scripts. I'm developing an extension that injects a whole sidebar built with Vue. There is still no way of debugging that!
I've created an issue with some more details here: https://github.com/vuejs/vue-devtools/issues/988
Kindly look into this please 😓

[linkerGitHub]

thanks for @wujunchuan 's idea, it inspired me.
if you want to use devTools for content script of chrome extension, you can try this tricky way.

1.install vue-remote-devtools,
npm install -g @vue/devtools
2.run it in terminal
vue-devtools
3.send a GET request to get the script it provide and use eval to run it, like this:

// at your content script
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8098/')
xhr.onload = function (x, e) {
  eval(x.currentTarget.responseText)
};
xhr.send();

4.reinstall extension and reload your page with extension.here is what it look like

[traxium]

@linkerGitHub
It's also possible to install npm install --save-dev @vue/devtools locally, start local ./node_modules/.bin/vue-devtools and connect a content script to Vue DevTools without <script src="http://localhost:8098"></script> via:

// content-script.js

import devtools from '@vue/devtools' // Make sure you import devtools before Vue, otherwise it might not work as expected.
import Vue from 'vue'

if (process.env.NODE_ENV === 'development') {
  devtools.connect(/* host, port */)
}

because Vue DevTools server doesn't return proper CORS headers for xhr.open('GET', 'http://localhost:8098/') and this GET request is blocked by the latest version of Chrome:

Access to XMLHttpRequest at 'http://localhost:8098/' from origin 'https://my.website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.