Disable hash in vite script - multiple entry points for chrome extension

Question

I'm trying to write a chrome extension. I've found a way to create multiple pages and a background script, but the background script contains a hash and is placed into the dist/assets folder. I would like to output just 'dist/background.js'. Alternatively (and maybe better) I would like to have my manifest updated to contain the actual script name with the hash.

Here's my vite.config.ts

import { defineConfig, BuildOptions } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    // lib: {
    //   entry: resolve(__dirname, 'background.ts'),
    //   name: 'background',
    //   fileName: format => `background.{format}.js`
    // },
    rollupOptions: {
      // output: {
      //   format: 'cjs'
      // },
      input: {
        main: resolve(__dirname, 'index.html'),
        popup: resolve(__dirname, 'popup/index.html'),
        options: resolve(__dirname, 'options/index.html'),
        background: resolve(__dirname, 'background.ts'),
      },
      // output: {
      //   format: 'cjs'
      // }
    }
  }
})

I've tried a few things and some are shown here commented out, but I couldn't get anything to work how I wanted. Finally I was able to get it to work if I create a separate vite.config.background.ts file:

import { defineConfig } from 'vite'
const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: resolve(__dirname, 'background.ts'),
      output: {
        format: "esm",
        file: "dist/background.js",
        dir: null,
      }
    }
  }
})

And edit my build script to build it after the other config:

"build": "vue-tsc --noEmit && vite build && vite build --config vite.config.background.ts",

But is there any way to use just one file, or to generate the manifest and use the hashed file name? Right now it is a static json file.

Answer 1

Running multiple rollup builds with one vite build command is not supported but you can generate a manifest file directly from vite. To generate it simply set build.manifest to true (but I am not sure if this will contain everything that you need for a manifest file for a web plugin though).

Answer 2

This is what I ended up doing which isn't optimal. It's just hard to believe that you can specify multiple inputs which produce multiple outputs, but not define output settings for each... Structure:

+-- dist (output directory)
+-- options (options page)
+-- popup (popup page)
+-- public (contents copied directly to dist
|   +-- background.js (generated background script from '/background.ts')
|   +-- manifest.json (extension manifest)
+-- scripts (scripts used in build)
|   +-- watch.mjs (script for 'yarn watch')
+-- src (main page)
+-- background.ts

So manifest.json is in the public directory which is copied to the root of dist. And the background script build puts the output background.js in that folder too for the main build to copy as part of the 'main' page.

scripts/watch.mjs

import { createServer, build } from 'vite'

/**
 * @type {(server: import('vite').ViteDevServer) => Promise<import('rollup').RollupWatcher>}
 */
function watchBackground(server) {
  return build({
    configFile: 'vite.config.background.ts',
    mode: 'development',
    build: {
      watch: {},
    },
  })
}

/**
 * @type {(server: import('vite').ViteDevServer) => Promise<import('rollup').RollupWatcher>}
 */
 function watchMain(server) {
  return build({
    configFile: 'vite.config.ts',
    mode: 'development',
    build: {
      watch: {},
    },
  })
}

// bootstrap
const server = await createServer({ configFile: 'vite.config.ts' })

await server.listen()
await watchBackground(server) // outputs to public/background.js, so run first
await watchMain(server)

vite.config.background.ts

import { defineConfig } from 'vite'
const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: resolve(__dirname, 'background.ts'),
      output: {
        format: "esm",
        file: "public/background.js",
        dir: null,
      }
    }
  }
})

vite.config.ts

import { defineConfig, BuildOptions } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        popup: resolve(__dirname, 'popup/index.html'),
        options: resolve(__dirname, 'options/index.html'),
      },
    }
  }
})