Question

在我的扩展程序的选项页面中，我会显示登录用户的用户名以及退出选项。如果他们退出，我会显示一个链接，要求他们登录。除了能够通过选项页面登录，他们也可以通过popup.html这样做。登录状态存储在localStorage中，我可以从选项页面js访问该状态。

我希望能够以某种方式收听此状态的更改，并相应地更新UI。如果通过选项页面进行更改，那么我当然可以更改它。但是，问题是如果用户通过弹出窗口登录，同时已经在选项页面上。在那种情况下，我仍然希望改变选项页面UI，现在反映更新的登录状态。我想到了两种不同的方法：

（1）每当我更改登录状态时，让后台脚本使用chrome.runtime.sendMessage（）向选项脚本发送消息。

（2）在登录状态发生变化时触发的localStorage上添加一个监听器。

我尝试了两种方法，但都失败了。如何根据localStorage变量的值自动刷新选项页面的UI，该变量可以从扩展中的不同脚本进行更改？

答案可能在（1）或（2）中，但是我对chrome扩展的经验是有限的，所以我可能已经编程错误并且太早放弃了。任何帮助将不胜感激。

Answer 1

所以我找到了一个答案，允许我在后台和选项页面脚本之间向我发送消息。我之前尝试过使用chrome.runtime.sendMessage等等，但是我实现它的方式肯定是犯了错误。

options.js脚本：

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    switch(request.type) {
        case "loggedin-status-change":
            alert(request.data.myProperty);
        break;
    }
    return true;
});

和background.js脚本：

chrome.extension.sendMessage({
    type: "loggedin-status-change",
    data: {
         myProperty: "1"
    }
});

Chrome扩展程序自动刷新选项页面UI

1 个答案: