Chrome扩展：如何在content script与background script间共享配置？

先解释你遇到的错误：Cannot use import statement outside a module 是因为Chrome扩展的content script默认不被识别为ES模块，直接用import语法自然会失效。下面给你几种实用的共享配置方案：

方案一：把所有文件声明为ES模块（最直接推荐） #

通过修改manifest，让content script和background都以ES模块方式运行，这样就能直接import配置文件：

1. 修改manifest.json：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "type": "module"
    }
  ]
}

注意：这里填的是TS编译后的.js文件，同时要确保你的tsconfig.json里配置了输出ES模块格式（比如"module": "ESNext"）。

2. 在content.ts和background.ts里直接导入配置：

// content.ts
import { config } from './conf.ts';
// 直接使用config即可

// background.ts
import { config } from './conf.ts';
// 直接使用config即可

这种方式代码结构最清晰，适合静态配置的场景。

方案二：通过消息传递让content读取background加载的配置 #

完全可以这么做，适合配置需要后台处理、或者是动态生成的场景：

1. 在background.ts里加载配置并监听消息：

// background.ts
import { config } from './conf.ts';

// 监听content script的配置请求
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'GET_CONFIG') {
    sendResponse(config);
  }
});

2. 在content.ts里发消息拿配置：

// content.ts
chrome.runtime.sendMessage({ type: 'GET_CONFIG' }, (response) => {
  if (response) {
    // 拿到配置后使用
    console.log('获取到的配置:', response);
  }
});

如果是Manifest V3，注意background是service worker，要确保监听逻辑在worker启动时就注册好。

方案三：用chrome.storage存配置（适合持久化/跨组件共享） #

如果配置需要保存下来跨会话使用，或者要和popup、options页面等其他扩展组件共享，用chrome.storage更合适：

1. 在background.ts里初始化配置到存储：

// background.ts
import { config } from './conf.ts';

// 仅第一次初始化或配置更新时执行
chrome.storage.local.set({ appConfig: config });

2. 在content.ts里读取存储的配置：

// content.ts
chrome.storage.local.get('appConfig', (result) => {
  const config = result.appConfig;
  // 使用配置
});

别忘了在manifest.json里加storage权限：

{
  "permissions": ["storage"]
}

方案选择参考 #

• 静态配置、想保持代码结构清晰：选方案一；
• 配置需要后台处理后再传给content：选方案二；
• 需要持久化、和popup/options等组件共享：选方案三。

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