WebExtension development

[aleksanderd]

Hi!

I just learning vue/etc and at searching for UI part for my webextension.
Is it good idea to use quasar for it? Is it possible to make it native and port to android/iphone later?

At webextension basically we have two entry points: background.js (for background browser wide tasks) and options.html (for frontend ui) + manifest.json of the extension.

The build must be precompiled - no eval/etc allowed since ‘Content Privacy Policy’ in web extensions(it is the main reason I choiced vue at all). No any dynamic js/css injects allowed. It is preffered to have static js/css files to include using html markup. Also, no any dev servers/listeners applicable since the app works like “locally” by loading in browser or (same) via web-ext tool for firefox or via it’s webpack plugin.

I have vue app but with custom webpack config. I tried to change vue-cli created configs but they are too complex, so I written all from scratch. All seems to be ok, but there is no any UI yet. Now I looking for good UI lib/framework.

What the best way to use quasar here?

1. Install quasar-framwork npm package to existing project and use it (without quasar-cli, etc). Is there any troubles possible?
2. Create a project via quasar-cli. But how to build the extension?
   2.1) Change webpack configs.
   2.2) May be, introduce quasar wrap type or so?
3. Just use any simplier UI for vue (recommendations welcome).

Thank you!

[spectrolite]

Option 1 will probably have you end up in a tangle, I’d try option 2.

Beware as some Quasar components actually do use vue’s v-html which may do dynamic js/css injects. But it’s not many and you can easily check the source code of components for the v-html string. Depending on how strict they are about this, it may not be a problem at all (as long as you don’t try actually injecting css/js), but they may also reject your code for having the ability to do it if you allow user input into the v-html content (xss vulnerability). So you may want to either avoid those components, or just be extra careful of how you use them.

The community is working on a fix for 0.14 final, to make js/css injection impossible by default, and require explicit activation by the developer.
Other than that, I’d say Quasar is the perfect tool for the job, and the changes you’ll need to make to webpack seem minimal.

I’m sure that if you document your journey here and share some code, @rstoenescu will seriously consider upgrading the CLI with a quasar build webextension based on it.

[spectrolite]

Btw I just noticed a “chrome extension starter kit” has been on the roadmap for a while, so there’s definitely some interest in that direction.
https://github.com/quasarframework/quasar/projects/3

[pooch]

bump and +1 for the chrome extension starter kit. Thank-you @rstoenescu for such an amazing framework!