TypeScript开发Chrome扩展出现Duplicate function implementation报错如何解决

问题根源 #

你遇到的报错和冲突来自三个核心原因：

1. 运行在同一页面的content script默认共享全局作用域，同名函数会互相覆盖
2. Chrome默认将content script作为普通脚本加载，原生不支持ES模块的export语法，未经过转译的export关键字会直接触发语法错误
3. 如果你的TS配置中开启了outFile参数，会强制将所有TS文件合并为单个JS文件，不仅会导致export语法残留，还会直接造成同名函数冲突

可行解决方案 #

方案1：使用ES模块加载content script（适配Manifest V3，Chrome 89+） #

这是最符合现代JS/TS开发规范的方案：

1. 首先修改tsconfig.json，删除outFile配置，调整模块编译规则：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Node",
    "outDir": "./dist",
    "strict": true
    // 确保不存在outFile配置项
  },
  "include": ["src/**/*"]
}

2. 修改manifest.json的content scripts配置，新增"type": "module"声明：

{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["FileA.js"],
      "type": "module"
    },
    {
      "matches": ["<all_urls>"],
      "js": ["FileB.js"],
      "type": "module"
    }
  ]
}

3. 每个content script文件顶部添加export {}，即可将文件标记为独立模块，实现作用域隔离，同名函数不会冲突，也不会再报export语法错误。

方案2：IIFE作用域隔离（兼容所有版本Chrome、Manifest V2/V3） #

无需调整配置，直接用立即执行函数包裹每个content script的全部代码，将函数限制在局部作用域内，不会暴露到全局产生冲突：

// FileA 示例
(function() {
  function methodxyz(param: Element): void {
    // 你的业务逻辑
  }
  // 所有业务代码都写在这个函数内部
})();

// FileB 示例
(function() {
  function methodxyz(param: Element): void {
    // 你的业务逻辑
  }
  // 所有业务代码都写在这个函数内部
})();

排查项 #

优先确认你的TS配置中没有outFile参数，该参数会强制合并所有TS文件为单个JS，是导致你冲突和报错的常见诱因，删除该参数后TS会将每个TS文件单独编译为对应的JS文件，符合多content script的开发需求。

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