Chrome扩展Manifest V3注入内容脚本失败问题求助

1. 源码路径与打包后路径不匹配 #

你在executeScript中使用的是源码路径src/content_scripts/events.js，但Vue3+Vite打包后，源码文件会被编译并输出到dist目录的特定位置，而非保留原有的src目录结构。Chrome扩展只能访问打包后扩展根目录下的文件，因此无法找到该路径。

2. 内容脚本未被正确打包进扩展包 #

Vite默认不会自动将src/content_scripts这类目录下的文件复制到打包目录，导致该文件不在最终的扩展包中，Chrome自然无法加载。

具体解决步骤： #

步骤1：配置Vite打包规则，保留内容脚本路径

安装rollup-plugin-copy插件用于复制静态文件：

npm install rollup-plugin-copy --save-dev

修改vite.config.js，添加复制规则和入口配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import copy from 'rollup-plugin-copy'

export default defineConfig({
  plugins: [
    vue(),
    copy({
      targets: [
        // 复制content_scripts目录到打包后的dist目录
        { src: 'src/content_scripts/**/*', dest: 'dist/content_scripts' },
        // 复制manifest.json到dist根目录（如果manifest不在public下）
        { src: 'manifest.json', dest: 'dist' }
      ],
      hook: 'writeBundle'
    })
  ],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        // 指定background脚本的入口
        background: resolve(__dirname, 'src/background/index.js')
      }
    }
  }
})

步骤2：修正注入路径

将background中的executeScript路径改为打包后的相对路径：

chrome.scripting.executeScript({
  target: { tabId },
  // 路径对应dist/content_scripts/events.js
  files: ['content_scripts/events.js']
});

步骤3：验证打包后的目录结构

执行npm run build后，检查dist目录结构是否如下：

dist/
├── content_scripts/
│   └── events.js
├── src/
│   └── background/
│       └── index.js（或打包后的background文件）
├── icons/
└── manifest.json

步骤4：加载打包后的扩展进行测试

在Chrome扩展管理页面，选择"加载已解压的扩展程序"，选中dist目录，再测试注入逻辑。

注意：开发环境下Vite的热更新机制可能导致路径混乱，建议始终使用生产打包后的扩展包进行测试，避免路径问题。

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