How to enable Vue.js dev tool to inspect the web extension under development? #150

albertpratomo · 2023-07-19T21:41:35Z

albertpratomo
Jul 19, 2023

I would love to develop my web ext using Vue.js dev tool, but it's not detecting it now.. Any idea?

I realize the app is actually served in my localhost:

http://localhost:3303/background/index.html
http://localhost:3303/options/index.html
http://localhost:3303/popup/index.html

So I can go there and see the app, also use the Vue dev tool.

However, by default it will throw error because webextension-polyfill can't be used outside of Chrome context.

To work around that, instead of always using browser storage, we can use localStorage as fallback.

I will make a PR for this soon.

albertpratomo · 2023-07-24T22:45:54Z

I realize the app is actually served in my localhost:

http://localhost:3303/background/index.html
http://localhost:3303/options/index.html
http://localhost:3303/popup/index.html

So I can go there and see the app, also use the Vue dev tool.

However, by default it will throw error because webextension-polyfill can't be used outside of Chrome context.

To work around that, instead of always using browser storage, we can use localStorage as fallback.

I will make a PR for this soon.

2 replies

Hey @albertpratomo , Could you please share further steps to start using vue.js devtools ? If Needed, I would be happy to contribute

I run into this console error when navigating to any of these urls.