Better development workflow

Is your feature request related to a problem? Please describe. So, I’ve been playing with extensions for a while, but this is the first template that has core features like hot reloading working - thanks!

However, developing popups is still very cumbersome. They reload as soon as saved, and the inspector keeps unloading when you save, though I’ve seen in Firefox that you can force it show.

Nonetheless, you still can’t seem to use Vue devtools, even with Vue.config.devtools = true.

Describe the solution you’d like We’ve started to think about building some kind of development sandbox, where we would run popup and options apps directly in the browser, and maybe mock the web extension API objects / calls we need. This way, we’re not constantly fighting with the extension framework as we just try to build UI, stores, etc.

Then, I figured, maybe someone has done this, so let’s look at the Vue Devtools, and sure enough, they have done some of this:

• https://github.com/vuejs/vue-devtools

Check the “Hacking” section.

Their solution runs a webpack dev server of the devtools app in the browser window itself, so you can build the extension as if building a straight vue extension, at http://localhost:8100.

They don’t seem to have mocked the extensions API, but they have aa top section where they fire calls at the dev tools.

Perhaps, some kind of tool belt for extension background scripts etc could be developed that does something similar? Not sure if this would be in-page or perhaps using iframes.

Describe alternatives you’ve considered See above

Additional context I’d be happy to help work on this, maybe as a separate project.

[Kocal]

I wrote a wiki page about development behavior: https://github.com/Kocal/vue-web-extension/wiki/1.-Development-workflow @davestewart WDYT?

[davestewart]

I think all this info would make a great start to a GitHub Wiki 😄