Vite + Chrome Extension Manifest 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",
      },
    ]);

在vite.config中，inpage文件作为单独的输入传递。

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

但是当我运行这个扩展时，出现了一个错误。

Uncaught SyntaxError: 无法在模块外部使用 import 语句。

我该如何解决这个问题呢？

谢谢！

- Rony Fragin

---

假设错误出现在网页而不是服务工作者中，您需要通过某个选项来配置vite生成的输出类型（尽管我不知道是哪个选项）。 - undefined

这确实是从网页返回的，因为错误源于内容脚本而不是后台服务工作者。wdym @wOxxOm？我应该配置什么？我唯一考虑的是将导入内联，但当你像我这样有多个输入时，这是不可用的。 - undefined

可能是关于运行时块的问题，你不应该使用它，也就是说，每个文件应该是完全独立的，不共享任何内容。 - undefined

是的，我也有这样的怀疑，但我担心这会破坏HMR和我从vite获取的所有东西 :( - undefined

HMR无论如何都无法与页面中的内容脚本配合工作。 - undefined

Answer 1

如@wOxxOm所建议的，我不得不创建3个单独的vite配置文件：

- inpage配置 - content-script配置 - 其余代码配置

对于inpage和content-script，我设置了

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

- Rony Fragin