Chrome扩展background.js导入deepl-node报错的jsconfig配置问题

一、修正manifest.json的模块配置 #

• 如果你用的是Manifest V3扩展，必须在配置文件里明确声明使用ES模块：

  {
    "manifest_version": 3,
    "background": {
      "service_worker": "background.js",
      "type": "module"
    },
    // 其他扩展配置字段...
  }
  

  注意：Manifest V2不支持ES模块，要是你还在用V2，要么改用CommonJS的require()语法，要么直接升级到V3版本。

二、调整DeepL API的使用方式 #

• DeepL Node API是为Node.js环境设计的，直接在Chrome浏览器环境里用import会有兼容性问题。两种解决思路：
  1. 改用DeepL REST API：用浏览器原生的fetch调用，不用依赖Node SDK，示例代码：

     async function translateText(text) {
       const response = await fetch('https://api-free.deepl.com/v2/translate', {
         method: 'POST',
         headers: {
           'Authorization': 'DeepL-Auth-Key 你的API密钥',
           'Content-Type': 'application/x-www-form-urlencoded'
         },
         body: new URLSearchParams({
           text: text,
           target_lang: 'ZH' // 目标语言，可根据需求修改
         })
       });
       const data = await response.json();
       return data.translations[0].text;
     }
     

  2. 坚持用Node SDK则必须打包：通过打包工具把Node模块转成浏览器兼容的代码，且确保输出为ES模块格式。

三、Webpack打包配置优化 #

• 针对Chrome扩展的Webpack配置需要调整，确保输出符合浏览器模块要求：

  const path = require('path');
  
  module.exports = {
    entry: './background.js',
    output: {
      filename: 'background.bundle.js',
      path: path.resolve(__dirname, 'dist'),
      libraryTarget: 'module'
    },
    experiments: {
      outputModule: true
    },
    // 处理Node.js内置模块的兼容问题
    resolve: {
      fallback: {
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "url": require.resolve("url/")
      }
    }
  };
  

  打包完成后，在manifest.json里把脚本路径改成打包后的文件，并保持type: "module"配置。

四、项目配置文件的辅助调整 #

• 在package.json中添加"type": "module"，明确项目使用ES模块规范：

  {
    "type": "module",
    // 其他项目配置字段...
  }
  

• 同步jsconfig.json的模块解析配置：

  {
    "compilerOptions": {
      "module": "ESNext",
      "target": "ESNext",
      "moduleResolution": "NodeNext"
    },
    "include": ["src/**/*"]
  }
  

五、排查常见坑点 #

• 不要混用ES模块和CommonJS语法：用了import就别用require()，反之亦然，避免语法冲突。
• 检查所有扩展脚本：如果content script或popup脚本也用了import，同样要在manifest里声明type: "module"，或者一起打包。
• 升级Chrome版本：Manifest V3的ES模块支持需要Chrome 92及以上版本，确保浏览器是最新版。

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