我创建了一个基于https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite项目的扩展. 在 list I中,将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时,我得到一个错误

未捕获语法错误:无法在模块外部使用导入语句

我怎么才能解决它呢?

谢谢!

推荐答案

正如@wOxxOm建议的那样,我必须创建3个独立的VTE配置:

  • INPAGE配置
  • 内容-脚本配置
  • 代码配置的其余部分

对于InPage和Content-Scrip,我设置了

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

Typescript相关问答推荐

带有微前端的动态React路由问题

Redux—Toolkit查询仅在不为空的情况下添加参数

contextPaneTitleText类型的参数不能分配给remoteconfig类型的关键参数'""'''

路由链接不会导航到指定router-outlet 的延迟加载模块

为什么在回调函数的参数中不使用类型保护?

如何使默认导出与CommonJS兼容

使用订阅时更新AG网格中的行

Fp-ts使用任务的最佳方法包装选项

对于始终仅在不是对象属性时才抛出的函数,返回Never

将具有Readonly数组属性的对象接口转换为数组

vue-tsc失败,错误引用项目可能无法禁用vue项目上的emit

缩小对象具有某一类型的任意字段的范围

将布尔值附加到每个对象特性

使用来自API调用的JSON数据的Angular

如何在具有嵌套数组的接口中允许新属性

如何从抽象类的静态方法创建子类的实例?

Angular另一个组件的nativeelement未定义

将对象数组传递给 Typescript 中的导入函数

typeof 运算符和泛型的奇怪行为

有没有办法将类型与关键更改相匹配?