JavaScript开发Chrome扩展：如何实现跨站点可访问的数据存储？

在Chrome扩展开发中，localStorage受同源策略限制无法跨站点共享数据，你可以通过以下几种方案解决：

1. 使用Chrome官方的chrome.storage API #

这是最推荐的方案，chrome.storage是扩展专属的存储API，不受同源策略约束，所有扩展上下文（内容脚本、后台服务工作者、弹出页、选项页）都能直接访问。

它包含两种存储类型：

• chrome.storage.local：本地存储，数据仅保存在当前设备
• chrome.storage.sync：同步存储，数据会同步到用户的Google账号，在多个设备间共享

代码示例： #

存储数据

// 后台脚本/内容脚本都可调用
chrome.storage.local.set({ key: '跨站点共享的数据' }, () => {
  console.log('数据存储成功');
});

读取数据

chrome.storage.local.get(['key'], (result) => {
  console.log('读取到的数据：', result.key);
});

注意：使用前需要在manifest.json中声明storage权限：

{
  "permissions": ["storage"]
}

2. 通过后台脚本作为数据中转 #

如果你的内容脚本需要和页面脚本交互，或者需要更复杂的逻辑控制，可以让后台脚本统一管理存储，内容脚本通过消息通信的方式读写数据。

代码示例： #

后台脚本监听消息

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'saveData') {
    chrome.storage.local.set({ [request.key]: request.value }, () => {
      sendResponse({ status: 'success' });
    });
    return true; // 保持消息通道开放，以便异步返回结果
  } else if (request.action === 'getData') {
    chrome.storage.local.get([request.key], (result) => {
      sendResponse({ data: result[request.key] });
    });
    return true;
  }
});

内容脚本发送消息请求数据

// 存储数据
chrome.runtime.sendMessage({ action: 'saveData', key: 'test', value: '跨站数据' }, (response) => {
  console.log(response.status);
});

// 读取数据
chrome.runtime.sendMessage({ action: 'getData', key: 'test' }, (response) => {
  console.log('获取到的数据：', response.data);
});

3. 使用扩展的IndexedDB（可选） #

虽然内容脚本中的IndexedDB受同源限制，但你可以在后台脚本中创建IndexedDB实例，然后通过消息通信让内容脚本间接操作。不过这种方式复杂度较高，仅在需要存储大量结构化数据时考虑，一般场景下chrome.storage足够满足需求。

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