Chrome扩展Manifest V3迁移：import语句报错及批量导入问题求助

错误原因 #

1. Manifest V3 中，Service Worker 默认不被当作 ES 模块处理，直接使用 import 语句会触发语法错误。
2. 额外注意：Service Worker 运行在无 DOM 的环境中，代码里的 alert() 无法正常执行，需要替换为 Chrome 扩展支持的 API（如控制台日志、通知 API）。

解决步骤 #

1. 将 Background Service Worker 声明为 ES 模块 #

修改 manifest.json 的 background 配置，添加 "type": "module"，让浏览器将其当作 ES 模块解析：

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

2. 批量导入 test.js 中的所有函数 #

根据你的需求，有两种批量导入方式：

方式一：修改 test.js 为默认导出所有函数

更新 test.js，将所有函数打包成一个对象作为默认导出：

function test_123() {
  // 替换 alert 为兼容的方式
  console.log('test ok');
}

// 假设还有其他函数
function test_456() {
  console.log('another test');
}

// 导出所有函数
export default {
  test_123,
  test_456
};

然后在 background.js 中导入并使用：

import testModule from './test.js';

// 调用函数
testModule.test_123();
testModule.test_456();

方式二：使用命名空间导入（无需修改 test.js）

如果不想改动 test.js 的导出结构，直接用 import * as 语法将所有导出函数导入到一个命名空间对象中：

import * as testModule from './test.js';

// 调用函数
testModule.test_123();

3. 替换 Service Worker 中不支持的 API #

将 test.js 里的 alert() 替换为兼容方式，比如：

export function test_123() {
  // 使用控制台日志
  console.log('test ok');
  
  // 或者使用 Chrome 通知API（需在 manifest.json 中声明 "notifications" 权限）
  chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icon.png',
    title: '测试',
    message: 'test ok'
  });
}

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