如何从Chrome扩展后台脚本直接访问目标域名的localStorage？

Chrome扩展没有提供像chrome.cookies.get那样直接从后台脚本读取目标域名localStorage的API，原因是localStorage属于特定页面的上下文环境，后台脚本运行在扩展自身的沙箱中，受浏览器同源策略和扩展安全机制限制，无法直接跨上下文访问其他域名的localStorage——哪怕已获取目标域名的权限也不行。

可行实现方式（简化版内容脚本方案） #

虽然需要依赖内容脚本，但可以通过动态注入脚本的方式简化流程，无需提前配置静态内容脚本：

1. 配置manifest权限

确保manifest.json中包含必要权限：

{
  "manifest_version": 3,
  "permissions": ["scripting", "tabs"],
  "host_permissions": ["https://example.com/*"] // 替换为你的目标域名
}

2. 后台脚本代码

通过chrome.scripting.executeScript直接在目标页面注入并执行读取逻辑，获取结果：

async function getTargetLocalStorage(targetUrl, storageKey) {
  // 查询目标域名的已打开标签页
  const [targetTab] = await chrome.tabs.query({ url: `${targetUrl}/*` });
  if (!targetTab) {
    throw new Error(`未找到打开的${targetUrl}标签页`);
  }

  // 注入脚本并读取localStorage
  const executionResult = await chrome.scripting.executeScript({
    target: { tabId: targetTab.id },
    // 该函数将在目标页面上下文执行，可直接访问window.localStorage
    func: (key) => window.localStorage.getItem(key),
    args: [storageKey]
  });

  return executionResult[0].result;
}

// 使用示例
getTargetLocalStorage("https://example.com", "access_token")
  .then(value => console.log("获取到的localStorage值：", value))
  .catch(err => console.error("获取失败：", err));

补充说明 #

• 如果目标页面未打开，可先通过chrome.tabs.create打开标签页再执行上述逻辑，但会影响用户体验，建议优先在页面已打开时操作。
• 静态注入内容脚本+消息通信的方式也可实现，但动态注入更灵活，适合按需获取的场景。

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