12

这是我的问题：

我在新选项卡中更新了 popup.js 中的 localStorage。我在 background.js 中访问相同的 localStorage（相同的键）。

现在，除了 chrome://extensions 选项卡（当我加载扩展时）之外，每个选项卡都返回 null。

我认为 localStorage 在所有选项卡中都是持久的。

代码：

popup.js：

$(document).ready(function (){

    alert(localStorage.getItem('filters'));
    var oldFilters = localStorage.getItem('filters');
    //All the filters show up on the popup.html page.
    document.getElementById('td1').innerHTML = oldFilters;

    var dat = oldFilters + "," + newArray[j]
    localStorage.setItem('filters',String(dat));
}

背景.js：

$(window).ready(function() {
  // Handler for .ready() called.

 var filters = localStorage.getItem('filters');

   alert("background + "+ filters);
    //This shows all the filters in the chrome:extensions page but always pops up "background + null" in every new tab load. 

//changeImage(filters);

});
4

1 回答 1

16

背景和浏览器操作（在您的情况下）页面生活在孤立的世界中，彼此无法访问它们的本地存储详细信息，如果您希望这种访问发生，请使用chrome.storage来满足您的存储需求。

它的优点很少

  • 您的扩展程序的内容脚本可以直接访问用户数据，而无需后台页面。
  • 即使使用拆分隐身行为，用户的扩展设置也可以保留。
  • 用户数据可以存储为对象（localStorage API 将数据存储在字符串中）。

使用的方法

示范

清单.json

确保所有权限都可用于访问存储 API。

{
"name":"Local Storage Demo",
"description":"This is a small use case for using local storage",
"version":"1",
"manifest_version":2,
"background":{
    "scripts":["background.js"]
},
"browser_action":{
    "default_popup":"popup.html",
    "default_icon":"logo.png"
},
"permissions":["storage"]
}

popup.html

一个简单的弹出 html 页面，它引用 popup.js 来超越 CSP。

<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>

背景.js

此脚本将内容设置为 chrome 存储

//Set some content from background page
chrome.storage.local.set({"identifier":"Some awesome Content"},function (){
    console.log("Storage Succesful");
});
//get all contents of chrome storage
chrome.storage.local.get(null,function (obj){
        console.log(JSON.stringify(obj));
});

popup.js

此脚本从 chrome 存储中检索和设置内容

document.addEventListener("DOMContentLoaded",function (){
    //Fetch all contents
    chrome.storage.local.get(null,function (obj){
        console.log(JSON.stringify(obj));
    });
    //Set some content from browser action
    chrome.storage.local.set({"anotherIdentifier":"Another awesome Content"},function (){
        console.log("Storage Succesful");
    });
});

如果您查看这些 js 页面的输出，则可以实现存储通信（Background -> popup 和 popup -> background）。

于 2012-12-23T06:54:32.540 回答