Question

我正在使用Chrome扩展程序，要求用户登录帐户才能查看其内容。我想要做的是防止用户每次登录后通过保存某种cookie或localStorage以及相关的登录/会话数据来登录。

在做了一些研究之后，似乎使用Google Chromes本地存储API似乎是最好的方法（如果有人能证实这一点会很棒）。

我的问题是设置和获取本地存储。我在这里设置了一个虚拟的本地存储方案，试图让Chrome存储扩展的任何类型的本地存储：

Popup.js：

function setCookie(){
    chrome.extension.sendMessage({name: 'setLoginCookie'}, function(otherResponse) {
        console.log(otherResponse)
    })
}

function getCookie(){
    chrome.extension.sendMessage({name: 'getloginCookie'}, function(response) {
        alert(response)
    })
}

event.js：

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {

    if (request.name == 'setLoginCookie') {
        var obj = {test:"test"}    
        chrome.storage.sync.set(obj, function() {
            alert('Data saved');
        });           
    }    

    if (request.name == 'getLoginCookie') {
           chrome.storage.sync.get('test', function(data) {
                sendResponse({ screenshotUrl: data.test });
        })       
    }
    return true;

});

当执行setCookie功能时，我收到“保存数据！”的警报。这会告诉我它已经有效，但是当我检查我的扩展程序上的本地存储时，Chrome开发工具没有任何内容，如果我调用getCookie函数，那么它就不会发送任何内容。

以下是我的manifest.json中的权限：

  "permissions": [
    "storage",
   "cookies",      
    "tabs",
    "<all_urls>",
    "pageCapture",
    "downloads"      
  ],

我在这里使用过错误的方法吗？使用chrome.storage.sync或许我出错了？

由于

Answer 1

chrome.storage.sync与本地存储不同，您不会在开发工具本地存储中看到使用此方法保存的数据。

您的邮件不匹配。您正在使用{name: 'getloginCookie'}发送消息，而if语句正在检查getLoginCookie。不同之处在于您传递给l函数的参数中的小写sendMessage。

Answer 2

当我检查我的扩展程序Chrome dev工具上的本地存储时，没有任何内容

Dev Tools不会在其中公开chrome.storage。

“本地存储”项目会公开localStorage。

要查看扩展程序chrome.storage，您可以使用Storage Area Explorer extension或只是从控制台调用chrome.storage.sync.get(null, (data) => { console.log(data) })。

注意：您不必将chrome.storage委托给您的活动页面。 chrome.storage可以从所有扩展上下文直接访问 - 后台，弹出窗口，选项，内容脚本。不要为了这个而在Messaging上进行分层。

Chrome扩展程序 - 保存弹出窗口的登录详细信息

2 个答案: