Vite构建Chrome扩展时Content Script加载报错求助

这个错误是因为Content Script运行在Chrome的隔离环境中，Vite构建模式默认的ES模块输出格式与该环境不兼容，导致Vue的define方法无法被正确识别。以下是具体解决配置：

1. 调整Vite构建配置，为Content Script指定IIFE格式输出 #

修改你的vite.config.js，添加针对Content Script的Rollup构建规则，确保其输出为IIFE格式（立即执行函数），避免模块加载问题：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { crx } from "@crxjs/vite-plugin";
import manifest from "./public/manifest.json";
import tailwindcss from "tailwindcss";

export default defineConfig({
  plugins: [
    vue(),
    crx({ manifest }),
    tailwindcss(),
  ],
  build: {
    // 关闭模块预加载polyfill，Content Script无需该特性
    modulePreload: {
      polyfill: false
    },
    rollupOptions: {
      // 明确指定扩展各部分的入口文件（需与manifest.json对应）
      input: {
        popup: "src/popup.html", // 替换为你实际的Popup入口
        background: "src/background.js", // 替换为你实际的Background入口
        content: "src/content-script.js", // 替换为你实际的Content Script入口
      },
      output: {
        // 为Content Script单独设置输出格式和文件名
        entryFileNames: (chunk) => {
          return chunk.name === "content" ? "content-script.js" : "[name].js";
        },
        format: (chunk) => {
          // Content Script用IIFE格式，其他入口保持ES模块
          return chunk.name === "content" ? "iife" : "es";
        },
        // 全局变量映射，确保Vue能被正确识别
        globals: {
          vue: "Vue"
        }
      }
    }
  }
});

2. 确保Content Script的代码写法兼容隔离环境 #

在你的Content Script入口文件（比如content-script.js）中，避免依赖全局模块定义，直接导入并初始化Vue实例：

import { createApp } from 'vue';
import ContentApp from './components/ContentApp.vue';

// 创建挂载容器并添加到页面
const container = document.createElement('div');
// 可自定义容器样式避免影响页面
container.style.cssText = 'position: fixed; top: 0; right: 0; z-index: 9999;';
document.body.appendChild(container);

// 初始化Vue应用
createApp(ContentApp).mount(container);

3. 检查crxjs版本兼容性 #

由于你使用的是Vite 3.2.3，需要确保@crxjs/vite-plugin版本为v1.x（v2.x及以上仅兼容Vite 4+）。如果当前版本不匹配，执行以下命令降级：

npm uninstall @crxjs/vite-plugin
npm install @crxjs/vite-plugin@1.0.14 --save-dev

4. 排查压缩导致的问题（可选） #

如果以上配置仍报错，可临时关闭构建压缩，排查是否是代码压缩导致变量被误删：

build: {
  minify: false,
  // ...其他配置
}

若关闭压缩后正常，再开启压缩并调整terserOptions保留必要变量：

build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: false,
      drop_debugger: false,
      // 保留Vue相关的全局变量
      keep_fnames: true
    }
  },
  // ...其他配置
}

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