2023-03-26 chrome extension開発

vueでchrome extensionを開発する

vite.configの
import manifest from '../manifest.json' assert { type: 'json' } で
Cannot find module './manifest.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
エラーが出る。resoleveJsonModuleをtrueにしても治らず以下のようにしたらエラーが消えた。
型もチェックできるしこれでよさそう

vite.config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx, ManifestV3Export } from '@crxjs/vite-plugin'
import { resolve } from 'path'

const manifest: ManifestV3Export = {
  manifest_version: 3,
  name: "CRXJS Vue Vite Example",
  version: "1.0.0",
  action: { 
    default_popup: "src/pages/popup/index.html"
  },
  options_page: "src/pages/option/index.html",
}

export default defineConfig({
  plugins: [
    vue(),
    crx({ manifest }),
  ],
  build: {
    rollupOptions: {
      input: {
        popup: resolve(__dirname, 'src/pages/popup/index.html'),
        option: resolve(__dirname, 'src/pages/option/index.html'),
      },
    },
  }
})