我有一个选项页面,用户可以在其中定义某些选项,并将其保存在localStorage中: options.html
现在,我还有一个内容脚本,需要获取options.html
页面中定义的选项,但是当我尝试从内容脚本访问localStorage时,它不会从选项页面返回值。
如何使我的内容脚本从localStorage,选项页面甚至后台页面获取值?
我有一个选项页面,用户可以在其中定义某些选项,并将其保存在localStorage中: options.html
现在,我还有一个内容脚本,需要获取options.html
页面中定义的选项,但是当我尝试从内容脚本访问localStorage时,它不会从选项页面返回值。
如何使我的内容脚本从localStorage,选项页面甚至后台页面获取值?
Answers:
Google Chrome浏览器发布了存储API:http : //developer.chrome.com/extensions/storage.html
与其他Chrome API一样,它非常易于使用,并且您可以在Chrome中的任何页面上下文中使用它。
// Save it using the Chrome extension storage API.
chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
console.log('Settings saved');
});
// Read it using the storage API
chrome.storage.sync.get(['foo', 'bar'], function(items) {
message('Settings retrieved', items);
});
要使用它,请确保在清单中定义它:
"permissions": [
"storage"
],
有一些方法可以“删除”,“清除”,“ getBytesInUse”和事件侦听器,以侦听更改的存储“ onChanged”
内容脚本在网页而不是扩展页面的上下文中运行。因此,如果您要从内容脚本访问localStorage,它将是该网页的存储空间,而不是扩展页面的存储空间。
现在,要让您的内容脚本读取扩展存储(在选项页面中进行设置),您需要使用扩展消息传递。
您要做的第一件事是告诉您的内容脚本向扩展发送请求以获取一些数据,并且该数据可以作为扩展localStorage:
contentscript.js
chrome.runtime.sendMessage({method: "getStatus"}, function(response) {
console.log(response.status);
});
background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getStatus")
sendResponse({status: localStorage['status']});
else
sendResponse({}); // snub them.
});
您可以围绕该API进行操作,以将通用的localStorage数据获取到内容脚本中,或者获取整个localStorage阵列。
我希望这有助于解决您的问题。
花哨和通用...
contentscript.js
chrome.runtime.sendMessage({method: "getLocalStorage", key: "status"}, function(response) {
console.log(response.data);
});
background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getLocalStorage")
sendResponse({data: localStorage[request.key]});
else
sendResponse({}); // snub them.
});
sendResponse({data: localStorage});
吗?
localStorage
直接从选项页面拨打电话,也可以从选项页面使用chrome.extension.getBackgroundPage
。
有时,最好使用chrome.storage API。比localStorage更好,因为您可以:
这是一个演示chrome.storage用法的简单代码。内容脚本获取访问页面的URL和时间戳并存储它,popup.js从存储区域获取它。
content_script.js
(function () {
var visited = window.location.href;
var time = +new Date();
chrome.storage.sync.set({'visitedPages':{pageUrl:visited,time:time}}, function () {
console.log("Just visited",visited)
});
})();
popup.js
(function () {
chrome.storage.onChanged.addListener(function (changes,areaName) {
console.log("New item in storage",changes.visitedPages.newValue);
})
})();
这里的“更改”是一个对象,其中包含给定键的旧值和新值。“ AreaName”参数是指存储区域的名称,可以是“本地”,“同步”或“托管”。
请记住在manifest.json中声明存储权限。
manifest.json
...
"permissions": [
"storage"
],
...
onChanged
事件已经提供了changes
对象中的数据。此外,请特别注意namespace
该onChanged
事件。如果您使用来存储内容chrome.storage.local.set
,则会onChanged
触发该事件,但是使用chrome.storage.sync.get
进行读取就没有意义了。
changes.visitedPages
如果visitedPages
未更改,则将为undefined 。将生产线包起来if (changes.visitedPages) { ... }
以解决此问题。