无需crxjs等外部库，如何在Vite中为Content Script使用导入？

将ES模块导入Chrome扩展的Content Script时存在问题，考虑通过将Content Script打包为单个文件来解决该问题。

我正在使用vite-web-extension模板项目，当前的Vite配置如下：

import react from "@vitejs/plugin-react-swc";
import { resolve } from "path";
import { defineConfig } from "vite";
import copyContentStyle from "./utils/plugins/copy-content-style";
import makeManifest from "./utils/plugins/make-manifest";

const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const assetsDir = resolve(root, "assets");
const outDir = resolve(__dirname, "dist");
const publicDir = resolve(__dirname, "public");

const IS_DEV = process.env.DEV === "true";

export default defineConfig({
  resolve: {
    alias: {
      "@src": root,
      "@assets": assetsDir,
      "@pages": pagesDir,
    },
  },
  plugins: [react(), makeManifest(), copyContentStyle()],
  publicDir,
  build: {
    minify: !IS_DEV,
    outDir,
    sourcemap: IS_DEV,
    emptyOutDir: IS_DEV,
    rollupOptions: {
      input: {
        // devtools: resolve(pagesDir, 'devtools', 'index.html'),
        // panel: resolve(pagesDir, "panel", "index.html"),
        content: resolve(pagesDir, "content", "index.ts"),
        background: resolve(pagesDir, "background", "index.ts"),
        popup: resolve(pagesDir, "popup", "index.html"),
        // newtab: resolve(pagesDir, "newtab", "index.html"),
        // options: resolve(pagesDir, "options", "index.html"),
      },
      output: {
        entryFileNames: (chunk) => {
          return `src/pages/${chunk.name}/index.js`;
        },
      },
    },
  },
});

我尝试为Content Script单独配置Vite以将其打包为单个文件，但未成功，对应的配置如下：

import { resolve } from "path";
import { defineConfig } from "vite";
import copyContentStyle from "./utils/plugins/copy-content-style";
import { viteSingleFile } from "vite-plugin-singlefile";

const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const assetsDir = resolve(root, "assets");
const outDir = resolve(__dirname, "dist");
const publicDir = resolve(__dirname, "public");

const IS_DEV = process.env.DEV === "true";

export default defineConfig({
  resolve: {
    alias: {
      "@src": root,
      "@assets": assetsDir,
      "@pages": pagesDir,
    },
  },
  plugins: [copyContentStyle(), viteSingleFile()],
  publicDir,
  build: {
    minify: !IS_DEV,
    outDir,
    sourcemap: IS_DEV,
    emptyOutDir: IS_DEV,
    rollupOptions: {
      input: {
        content: resolve(pagesDir, "content", "index.ts"),
      },
      output: {
        dir: `src/pages/content`,
      },
    },
  },
});

内容的提问来源于stack exchange，提问作者mr0b0t0