vue cli "live build" folder for chrome extension

Question

I'm making an extension and using npm run build (with vue cli) to make my option page. I need to interact with chrome.local.storage. So for now every change I need to make a new build and then test it in the extension.

It would be nice to have some "live build folder"

I can use esbuild or esbuild-vue, but with Vuetify on my project I cant get it working

For now I'm using esbuild-vue:

const vuePlugin = require('esbuild-vue');

require('esbuild').build({
    entryPoints: ['main.js'],
    bundle: true,
    outfile: 'out.js',
    plugins: [vuePlugin()],
    watch: {
        onRebuild(error, result) {
            if (error) console.error('watch build failed:', error)
            else console.log('watch build succeeded:', result)
        },
    },
    define: {
        "process.env.NODE_ENV": JSON.stringify("development"),
    },
});

For now I'm using esbuild-vue with watch: {} in it. But I'm not sure if I can make it work with offline Vuetify dep. — Johan Hoeksma, Sep 06 '21 at 11:07
Ok I tried https://github.com/privatenumber/esbuild-loader. But it still takes 4.x seconds to build. Also no luck with nuxt + esbuild. Maybe just stick to esbuild + vue voor dev. — Johan Hoeksma, Sep 07 '21 at 12:55

score 0 · Accepted Answer · answered Dec 06 '21 at 15:25

Ok, Vuetify 3 (Alpha) + Vite is working for me.

Example

For an example project you can clone: https://github.com/zoutepopcorn/extension-live-build

Setup

First setup a new project vue create my-app with vuetify vue add vuetify

Then choose:

? Choose a preset: (Use arrow keys)
  Default (recommended)
> Preview (Vuetify 3 + Vite) 
  Prototype (rapid development)
  V3 (alpha)
  Configure (advanced)

Now edit the vite.config.js and add build and base:

export default defineConfig({
  ...
  build: {
    outDir: "extension/options"
  },
  base: "options"
})

Now you have setup folders front-end and webextension like this:

extension  (extension )
  |-- manifest.json
  |--- options (build output front-end)
src (front-end options)
package.json
vite.config.js
...

Now you can have you're package.json like this:

{ 
  ...
  "scripts": {
        "watch": "vite build --watch",
        "chromium": "web-ext run -t chromium --chromium-binary /usr/bin/google-chrome-stable --arg=\"--auto-open-devtools-for-tabs\" --start-url \"about:blank\"",
        "all": "npm run chromium & npm run watch"
  }
}

vue cli "live build" folder for chrome extension

1 Answers1

Example

Setup