Vite + Chrome 扩展清单 v3 - 对于页内脚本“无法在模块外部使用 import 语句”

Question

我创建了一个基于https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite项目的扩展。在清单中我将background类型设置为module

 background: {
    service_worker: "background.js",
    type: "module",
  },

在后台服务中，我动态创建页内内容脚本，如下所示

 await chrome.scripting.registerContentScripts([
      {
        id: currInpageId,
        matches: ["file://*/*", "http://*/*", "https://*/*"],
        js: [`inpage-${inpageType}.js`],
        runAt: "document_start",
        allFrames: true,
        world: "MAIN",
      },
    ]);

inpage 文件作为单独的输入传递给 vite.config

input: {
          ...inpageTypes.reduce(
            (acc, inpageType) => ({
              ...acc,
              [`inpage-${inpageType}`]: resolve(
                inpageDir,
                `inpage-${inpageType}.ts`
              ),
            }),
            {}
          ),
        },

但是当我运行 ext 时出现错误

未捕获的语法错误：无法在模块外部使用 import 语句

我该如何解决？

谢谢！

Answer 1

正如 @wOxxOm 所建议的，我必须创建 3 个单独的 vite 配置：

• 页内配置
• 内容脚本配置
• 其余代码配置

对于内页和内容脚本，我设置

build: {
  emptyOutDir: false,
  ...
  rollupOptions: {
    output: {
      entryFileNames: "[name].js",
      inlineDynamicImports: true,
    }
  }
}