Chrome扩展使用chrome.scripting.executeScript加载打包JS文件时提示非UTF-8编码错误

我之前也碰到过类似的坑，结合你的配置来看，这个错误大概率和Vite打包的输出设置或者Chrome对扩展资源的校验逻辑有关，咱们一步步来解决：

可能的原因分析 #

看起来你已经确认了文件的编码是UTF-8，但Chrome还是报错，大概率是打包过程中输出的文件被注入了非标准UTF-8的内容，或者打包工具没有明确声明编码格式，导致Chrome的资源加载器误判。

解决方案步骤 #

1. 强制Vite/Rollup输出UTF-8编码

在你的vite.config.js里，给Rollup的output配置加上charset: "utf-8"，明确告诉打包工具输出UTF-8编码的文件：

import { defineConfig } from "vite";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import terser from "@rollup/plugin-terser";

export default defineConfig({
    build: {
        rollupOptions: {
            input: "src/content-script.js",
            output: {
                dir: "dist",
                entryFileNames: "content-script.bundle.js",
                format: "iife",
                charset: "utf-8" // 新增这行，强制指定UTF-8编码
            },
            plugins: [nodeResolve(), terser()],
        },
    },
});

2. 配置Terser压缩器输出UTF-8

如果上面的设置还没解决问题，可能是Terser压缩插件在处理时生成了非UTF-8的内容，给它加上编码配置：

// 修改vite.config.js里的terser插件配置
terser({
    output: {
        charset: 'utf-8' // 强制压缩输出UTF-8
    }
})

3. 检查文件是否带BOM

有时候即使VSCode显示是UTF-8，文件可能带有UTF-8 BOM（字节顺序标记），Chrome的脚本加载器可能不兼容这种格式。你可以：

• 用VSCode打开打包后的content-script.bundle.js
• 点击右下角的编码标识（比如“UTF-8”）
• 选择“通过编码保存”，然后选“UTF-8 without BOM”

4. 可选：显式声明可访问资源

虽然chrome.scripting.executeScript加载的文件不需要声明为web_accessible_resources，但有时候显式声明可以避免Chrome的资源校验问题。在manifest.json里添加：

"web_accessible_resources": [
    {
        "resources": ["dist/content-script.bundle.js"],
        "matches": ["https://demo/*"] // 匹配你的目标网站域名
    }
]

5. 排查路径问题

最后确认一下executeScript里的文件路径是否正确：你写的是"/dist/content-script.bundle.js"，要确保打包后这个文件确实在扩展根目录的dist文件夹下，路径没有写错。

按照上面的步骤调整后，重新打包并加载扩展，应该就能解决这个编码错误的问题了。

备注：内容来源于stack exchange，提问作者ichini