If you are getting invalid utf-8 issue here's a fix.

[rahulnpadalkar]

After building the extension with pnpm build and loading the dist folder using the Load Unpacked button in Chrome extensions, I was getting a Invalid UTF-8 file.

After a lot of head banging and cursing, i found the issue to be in the minfier that vite uses. ESBuild messes up the utf-8 encoding somehow. The solution is to use terser instead.

To use terser first install it with pnpm i terser -F <package-name> and then add minify:terser to the vite.config.mts file

The final file looks like this

import { resolve } from 'node:path';
import { makeEntryPointPlugin } from '@extension/hmr';
import { withPageConfig } from '@extension/vite-config';
import { IS_DEV } from '@extension/env';

const rootDir = resolve(import.meta.dirname);
const srcDir = resolve(rootDir, 'src');

export default withPageConfig({
  resolve: {
    alias: {
      '@src': srcDir,
    },
  },
  publicDir: resolve(rootDir, 'public'),
  plugins: [IS_DEV && makeEntryPointPlugin()],
  build: {
    minify: 'terser',                    // <------- Added this line
    lib: {
      name: 'ContentScript',
      fileName: 'index',
      formats: ['iife'],
      entry: resolve(srcDir, 'index.ts'),
    },
    outDir: resolve(rootDir, '..', '..', 'dist', 'content'),
  },
});

Hope this helps someone! Cheers 🍺