Chrome扩展获取LocalStorage数据并展示时出错，求问题排查

核心问题根源 #

Chrome扩展的弹窗拥有独立的JavaScript执行上下文，无法直接访问目标网站的LocalStorage——这是浏览器安全隔离机制导致的，直接在popup.js里调用localStorage只会读取弹窗自身的存储，而非目标网站的。

常见错误排查方向 #

• 直接在弹窗中调用localStorage：返回的是弹窗自身的存储数据，必然找不到目标网站的内容，会出现空值或键不存在的报错。
• 权限配置缺失：未在manifest.json中声明scripting权限和目标网站的主机权限，导致无法注入脚本到目标页面。
• 脚本注入逻辑错误：没有正确获取当前激活标签页，或未处理脚本执行后的回调数据。

正确实现步骤 #

1. 配置manifest.json权限 #

确保文件中包含必要权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["scripting"],
  "host_permissions": ["https://目标网站域名/*"],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 修改popup.js，通过注入脚本获取数据 #

// popup.js
document.addEventListener('DOMContentLoaded', async () => {
  // 获取当前激活的标签页
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab.url.startsWith('http')) {
    document.getElementById('你的展示divID').textContent = '仅支持HTTP/HTTPS页面';
    return;
  }

  try {
    // 注入脚本到目标页面，读取LocalStorage
    const results = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        // 此代码在目标页面上下文执行，可按需获取指定键或全部数据
        return JSON.stringify(localStorage);
        // 若只需单个键：return localStorage.getItem('目标键名');
      }
    });

    // 将结果插入指定div
    const storageData = results[0].result;
    document.getElementById('你的展示divID').textContent = storageData;
  } catch (err) {
    document.getElementById('你的展示divID').textContent = `获取失败: ${err.message}`;
  }
});

3. 验证popup.html的DOM结构 #

确保展示数据的div存在正确ID：

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>扩展弹窗</title>
  <script src="popup.js"></script>
</head>
<body>
  <div id="storage-display"></div> <!-- ID需与popup.js中的调用一致 -->
</body>
</html>

额外注意事项 #

• 仅当目标页面处于当前激活标签页时，才能成功注入脚本获取数据。
• 若目标网站有严格的内容安全策略（CSP），需确保扩展的权限配置兼容，但Manifest V3下通常无需额外调整。
• 若只需存储扩展自身的数据，应使用chrome.storage.local而非目标网站的LocalStorage。

内容的提问来源于stack exchange，提问作者Филипп Бехер