Chrome扩展无法获取Angular存入本地存储的AWS Cognito AccessToken？

核心错误点 #

1. 存储区域完全隔离：你的Angular前端将令牌存在网页的localStorage（与网站域名绑定），但扩展代码尝试从Chrome扩展专属的sync存储读取，这两个存储系统完全独立，互相无法访问。
2. 属性名拼写错误：扩展代码里的obj.Accesstoken是小写t，但你要获取的key是"AccessToken"（大写T），大小写不匹配导致读取到undefined。

正确实现方案 #

要获取网页localStorage中的令牌，必须通过内容脚本（Content Script） 桥接网页与扩展，以下是完整步骤：

1. 配置扩展清单（Manifest V3示例） #

修改manifest.json，添加内容脚本权限与匹配规则：

{
  "manifest_version": 3,
  "name": "令牌验证扩展",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://你的Angular网站域名/*"], // 替换为实际网站域名
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

2. 编写内容脚本（content.js） #

用于读取网页的localStorage并响应扩展弹出页的请求：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getAccessToken') {
    const token = localStorage.getItem('AccessToken');
    sendResponse({ accessToken: token });
  }
});

3. 修改扩展弹出页代码（popup.js） #

通过消息机制向内容脚本请求令牌：

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('fetchDataButton').addEventListener('click', function () {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, { action: 'getAccessToken' }, (response) => {
        if (response?.accessToken) {
          console.log("获取到AccessToken: " + response.accessToken);
          // 在这里添加AWS Cognito令牌验证逻辑
        } else {
          console.log("未找到AccessToken，请确认当前页面是目标网站且已登录");
        }
      });
    });
  });
});

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