Question

我正在开发一个与网络应用程序一起使用的chrome扩展程序。

作为其中一项功能的一部分，如果用户在Web应用程序中进行身份验证，我们希望对扩展中的用户进行身份验证。

我最初的想法是在扩展程序中创建一个内容脚本，该脚本仅在用户在Web应用程序上时运行：

  "matches": [
    "*://login.mywebapp.com/*"
  ],
  "js": ["/localStorageTransfer.js"],
  "run_at": "document_end"

该内容脚本实质上将localStorage['_u']的内容复制到Chrome中的同步存储。

当用户已经登录时，该方法可以正常工作。但是，我现在要解决的主要问题是当用户不登录时。

我的网络应用程序是一个SPA，所以最初我以为我可以在窗口对象上监听storage事件以检测storage更改，但由于某种原因事件没有触发，这是我用来检测的代码：

// localStorageTransfer.js
window.addEventListener('storage', (e) => {
  console.dir(e); // this never fires after logging a user in.
});

我尝试的替代方法是使用Proxies来“观察”localStorage这种方法似乎不起作用，并且公平地说我甚至不确定下面的代码是否真的有效：

// localStorageTransfer.js
let proxiedStorage = new Proxy(localStorage, {
  set: (target, prop, value) => {
    console.log({type: 'set', target, prop, value});
    return Reflect.set({target, prop, value});
  }
});

总之，我想要完成的是，如果该用户在Web应用程序中进行身份验证（或已经过身份验证），则在Chrome扩展程序中对用户进行身份验证。

如何在chrome扩展中“观察”对“localStorage”的更改？

0 个答案: