chrome 扩展的 vue cli "live build" 文件夹

Question

我正在做一个扩展并使用 npm run build（使用 vue cli）制作我的选项页面。我需要与 chrome.local.storage 互动。所以现在每次更改我都需要进行新构建，然后在扩展中对其进行测试。

最好有一些“实时构建文件夹”

我可以使用 esbuild 或 esbuild-vue，但是在我的项目中使用 Vuetify 我无法让它工作

目前我正在使用 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"),
    },
});

Answer 1

好的，Vuetify 3 (Alpha) + Vite 正在为我工作。

例子

对于示例项目，您可以克隆：https://github.com/zoutepopcorn/extension-live-build

设置

首先使用 vuetify vue add vuetify

设置一个新项目 vue create my-app

然后选择：

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

现在编辑 vite.config.js 并添加构建和基础：

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

现在您已经设置了文件夹前端和网络扩展，如下所示：

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

现在你可以 package.json 像这样：

{ 
  ...
  "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"
  }
}

chrome 扩展的 vue cli "live build" 文件夹

vue cli "live build" folder for chrome extension

vue.js

firefox-addon-webextensions

webextension-storage

例子

设置