如何使用 chrome 扩展从 chrome 本地存储中获取项目？

Question

我使用 Angular 构建了一个前端，并使用 AWS Cogntio 设置了身份验证，前端当前将访问令牌存储到本地存储。

我想获取该令牌并评估其解锁 Chrome 扩展的有效性，但很难找到正确的语法来执行此操作。

角度：

    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (session) => {
        localStorage.setItem(
          'AccessToken',
          session.getAccessToken().getJwtToken(),
        );
      },
      onFailure: (error) => {
        console.log(error);
      },
    });

扩展名：

document.addEventListener('DOMContentLoaded', function () {
    // Add a click event listener to the "Fetch Data" button
    document.getElementById('fetchDataButton').addEventListener('click', function () {
        // Fetch data from Chrome storage
        chrome.storage.sync.get("AccessToken", function (obj) {
            console.log("Passed successfully: Access Token " + obj.Accesstoken)
        });
    });
});

不幸的是，console.log 打印未定义，只打印 obj 给你[object Object]。

我在这里做错了什么？

Answer 1

chrome.storage

是特定于扩展程序的存储，而不是特定于您的页面。

也就是说，

chrome.storage.sync

存储在云端，并通过 Chrome Sync 与您安装的所有浏览器同步，只要它们登录到基于 Chromium 的浏览器同步提供商（Google、Microsoft 等）上的同一帐户即可。

chrome.storage.local

仅将数据存储在您的计算机上。

所有这些数据都位于与页面的

localStorage

不同的位置。

要访问页面的本地存储，您需要在

内容脚本

中使用常用的localStorage API。该脚本在网页的上下文中运行，并且可以访问其所有资源（但不能访问 JavaScript）。

内容脚本和扩展在不同的隔离区中运行，因此要在它们之间进行通信，您需要使用消息子系统。