Vue-devtools: Any way to run dev-tools on an app/extension?

[jofranmi]

Hello, I'm working on a Chrome app, I got Vue up running on it but I can't seem to get the devtools in the console app, any way around this?

[posva]

Sorry for the delay.
Did you find a way of doing it?

[mickdekkers]

@posva I can confirm that Vue dev tools does not detect Vue instances injected into the page by Chrome extensions.

I've created a fairly minimal issue reproduction repo here: https://github.com/SoullessWaffle/yaglman/tree/devtools-repro

Version info

Vue 2.1.10
Vue dev tools 3.0.5

Issue reproduction steps

1. $ git clone https://github.com/SoullessWaffle/yaglman.git
2. $ git checkout devtools-repro
3. $ npm install
4. $ npm run watch
5. Open Chrome and go to Extensions, ensure Developer mode is checked in the top right
6. Click Load unpacked extension and select the project's dist directory
7. Navigate to any GitHub labels page, e.g. https://github.com/vuejs/vue/labels
8. Open the Chrome dev tools
9. Observe that the Vue tab is not shown, the Vue dev tools icon on the top right
   of the browser window is greyed out and when clicked says "Vue.js is not detected"
   despite there being a Vue instance on the page (the import/export buttons on the labels table)

Expected behavior

The Vue instance is detected and the Vue tab shows up in the Chrome dev tools

[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

[posva]

Closing in favour of #120

[mickdekkers]

@posva Would adding chrome-extension://* here work? It wouldn't fix the detection issues for content scripts I described above but perhaps it might allow the devtools to work in chrome apps.

[posva]

It doesn't seem to be a valid one :(

[mickdekkers]

Damn :/
Maybe chrome-extension://*/*? Probably not but worth a try.

If it's not valid then maybe it's a Chrome security thing where it doesn't let extensions modify other extension pages...

[posva]

nope 😞

[yesm1994]

@jofranmi Same issue here! Did you find any solutions?
I'm using Vue.js to develop chrome app, I can use https://github.com/jusio/storage-area-explorer correctly in chrome apps.，but after reading vue-devtools's source code，
This project just not support chrome app to develop.
Due to Chrome APP security reasons, injectScripts(), remote Shell are both forbidden.
Can't find a proper way to use devtools, which makes me freak out.

I really hope Vue devtools can be used every where.

[Akryum]

There is a standalone devtools app as listed in the README: https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

[yesm1994]

@Akryum Unfortunately, I've tried this solution, Chrome‘s CSP in Chrome app not allow to load script like this also.

[yesm1994]

Any one who is looking for a solution to use this devtools, modifying source code is needed.

In chrome app, bellows are forbidden:
First, content_scripts match [all_urls] is not working.
Second, inject script is forbidden.
Third, port connection between background and devtools cannot established.