Chrome扩展开发：模块导出变量修改后跨模块不生效问题

核心问题：Chrome扩展的上下文隔离 #

你遇到的问题本质是Chrome扩展的执行上下文隔离机制——不同的扩展组件（比如内容脚本、Popup页面、背景服务工作者）运行在完全独立的JavaScript环境中，每个环境会单独加载模块x，导致a和b拿到的是模块x的不同实例。哪怕你在a里修改了实例的属性，b里的实例是另一个完全独立的对象，自然看不到变化。

另外你代码里还存在一个小问题：模块x用的是CommonJS的module.exports导出，但a/b用的是ES模块的import语法。在Manifest V3的Chrome扩展中，默认使用ES模块规范，这种混合写法可能被浏览器转译处理，进一步导致模块实例不共享。

实现全局共享数据的可行方案 #

1. 使用Chrome官方存储API（推荐） #

Chrome提供了chrome.storage API，专门用于跨扩展组件共享数据，所有上下文（背景页、Popup、内容脚本）都能读写，且自动同步：

修改模块x为基于存储API的工具函数：

// x.js
export const data = {
  async get(key) {
    const result = await chrome.storage.local.get(key);
    return result[key];
  },
  async set(key, value) {
    await chrome.storage.local.set({ [key]: value });
  },
  async getAll() {
    return await chrome.storage.local.get();
  }
};

// 初始化默认数据（可放在背景页中执行一次）
chrome.storage.local.get(['name', 'age', 'preferences']).then(result => {
  if (!result.name) {
    chrome.storage.local.set({
      name: "Jack",
      age: 24,
      preferences: "gaming"
    });
  }
});

然后在a/b模块中使用：

// a.js 或 b.js
import { data } from './x.js';

// 修改数据
await data.set('name', 'John');
// 获取最新数据
const name = await data.get('name');

2. 用背景页作为单例数据源 #

背景服务工作者（Manifest V3）或背景页（Manifest V2）是扩展的单例执行环境，所有其他组件可以通过消息传递和它交互，让背景页作为唯一的数据存储中心：

// background.js
let sharedData = {
  name: "Jack",
  age: 24,
  preferences: "gaming"
};

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch(message.type) {
    case 'GET_DATA':
      sendResponse(sharedData);
      break;
    case 'SET_DATA':
      sharedData[message.key] = message.value;
      sendResponse({ success: true });
      break;
  }
  return true; // 保持消息通道开放，支持异步响应
});

在a/b模块中调用：

// a.js
// 修改数据
chrome.runtime.sendMessage({
  type: 'SET_DATA',
  key: 'name',
  value: 'John'
}, (response) => {
  console.log('修改成功', response);
});

// 获取数据
chrome.runtime.sendMessage({ type: 'GET_DATA' }, (data) => {
  console.log('最新数据', data);
});

3. 确保同一上下文内的模块单例（仅适用于同一环境） #

如果a和b本来就在同一个执行上下文（比如同一个Popup页面的两个模块），那要确保模块x是ES模块规范：

修改x.js为ES模块：

// x.js
let data = {
  name: "Jack",
  age: 24,
  preferences: "gaming"
};

function setData(key, newValue) {
  data[key] = newValue;
}

export default {
  data,
  funcs: { setData }
};

这样同一上下文内的a和b导入的就是同一个对象实例，修改会同步。但这只解决同一环境内的共享，跨上下文还是得用前两种方案。

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