能否跨标签页共享LocalStorage数据？如何用扩展实现跨域传值？

云上老周

2026-8-4

嘿，这两个问题我刚好有实操经验，给你详细拆解下：

1. 跨标签页能共享LocalStorage数据吗？

首先得明确同源策略的核心规则：同域名（必须是相同协议、域名、端口的组合）下的多个标签页/窗口，LocalStorage是默认共享的。举个例子，你在https://example.com的标签页A执行localStorage.setItem('username', 'Alice')，打开同一个域名的标签页B，直接用localStorage.getItem('username')就能拿到值。甚至标签页A修改数据后，标签页B还能通过storage事件监听实时变化：

window.addEventListener('storage', (e) => {
  console.log(`键${e.key}的值从${e.oldValue}变成了${e.newValue}`);
});

但如果是不同域名（比如example.com和test.com），出于浏览器的安全限制，同源策略会完全隔离它们的LocalStorage，互相根本拿不到对方的数据。

2. 跨独立域名（A和B）通过浏览器扩展传递LocalStorage数据怎么实现？

因为浏览器扩展拥有跨域的特殊权限，我们可以用它作为中间层来实现数据中转。下面是基于Manifest V3（当前主流的扩展规范）的具体实现步骤：

第一步：配置扩展权限
在manifest.json里声明对域名A、B的访问权限，以及必要的扩展基础权限：

{
  "manifest_version": 3,
  "name": "跨域数据同步工具",
  "version": "1.0",
  "permissions": ["storage", "tabs"],
  "host_permissions": ["https://domainA.com/*", "https://domainB.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://domainA.com/*"],
      "js": ["content-script-a.js"]
    },
    {
      "matches": ["https://domainB.com/*"],
      "js": ["content-script-b.js"]
    }
  ]
}

第二步：编写扩展按钮的触发逻辑（Popup）
当用户点击扩展按钮时，Popup脚本发起请求，触发完整的数据传递流程：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  const transferBtn = document.getElementById('transfer-btn');
  transferBtn.addEventListener('click', async () => {
    try {
      // 从后台获取域名A的LocalStorage数据
      const domainAData = await chrome.runtime.sendMessage({ action: 'fetchDomainAData' });
      // 把数据传给域名B的页面
      await chrome.runtime.sendMessage({ action: 'sendToDomainB', data: domainAData });
      alert('数据传递成功！');
    } catch (err) {
      alert(`出错了：${err.message}`);
    }
  });
});

对应的popup.html很简洁，只需要一个触发按钮：

<!DOCTYPE html>
<html>
  <body>
    <button id="transfer-btn">传递域名A数据到域名B</button>
    <script src="popup.js"></script>
  </body>
</html>

第三步：后台脚本做中转
后台服务工作者（Service Worker）负责协调内容脚本和Popup的通信，完全不受同源限制：

// background.js
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  switch(message.action) {
    case 'fetchDomainAData':
      // 找到域名A的活跃标签页
      const [domainATab] = await chrome.tabs.query({ url: 'https://domainA.com/*', active: true });
      if (!domainATab) {
        throw new Error('请先打开域名A的页面');
      }
      // 向域名A的内容脚本请求数据
      const data = await chrome.tabs.sendMessage(domainATab.id, { action: 'getLocalStorage' });
      sendResponse(data);
      break;
    case 'sendToDomainB':
      // 找到域名B的活跃标签页
      const [domainBTab] = await chrome.tabs.query({ url: 'https://domainB.com/*', active: true });
      if (!domainBTab) {
        throw new Error('请先打开域名B的页面');
      }
      // 把数据发给域名B的内容脚本写入LocalStorage
      await chrome.tabs.sendMessage(domainBTab.id, { action: 'setLocalStorage', data: message.data });
      sendResponse(true);
      break;
  }
  return true; // 标记为异步响应
});

第四步：内容脚本处理LocalStorage读写
分别给域名A和B注入内容脚本，负责和后台通信，处理本地存储的读写操作：

域名A的内容脚本（content-script-a.js）：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getLocalStorage') {
    // 读取当前页面全部LocalStorage数据（也可以指定特定键）
    const storageData = {};
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      storageData[key] = localStorage.getItem(key);
    }
    sendResponse(storageData);
  }
  return true;
});

域名B的内容脚本（content-script-b.js）：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'setLocalStorage') {
    // 将传入的数据写入当前页面的LocalStorage
    Object.entries(message.data).forEach(([key, value]) => {
      localStorage.setItem(key, value);
    });
    sendResponse(true);
  }
  return true;
});

额外小技巧：如果不需要两个域名的页面同时打开，你可以先把域名A的数据存在扩展自己的chrome.storage.local里，等域名B的页面加载后，再从扩展存储中取出数据写入LocalStorage，这种方式更灵活。

内容的提问来源于stack exchange，提问作者Nelson Jean Pierre