Chrome扩展程序:在内容脚本中访问localStorage

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

因此,我有一个选项页面,用户可以在该页面中定义某些选项,并将其保存在localStorage中:options.html

现在,我还有一个内容脚本,需要获取在options.html页,但当我尝试从内容脚本访问localStorage时,它不会从Options页面返回值。

如何使内容脚本从localStorage、Options页面或甚至后台页面获取值?

提问于
用户回答回答于

它比localStorage更好,因为可以:

  • 从内容脚本中存储信息不需要消息传递内容脚本与扩展之间
  • 将数据存储为JavaScript对象而不将它们序列化为JSON.

这里有一个简单的代码,演示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”参数是指存储区域的名称,可以是‘本地’、‘同步’或‘托管’。

请记住,在jav.json中声明存储权限。

manifest.json

...
"permissions": [
    "storage"
 ],
...
用户回答回答于

GoogleChrome发布了存储API

它非常容易使用,就像其他ChromeAPI一样,可以在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”

Using native localStorage (2011的旧回复)

内容脚本在网页上下文中运行,而不是在扩展页面中运行。因此,如果您从内容脚本访问localStorage,则将是来自该网页的存储,而不是扩展页存储。

现在,要让内容脚本读取扩展存储(在其中从选项页面设置它们),需要使用扩展。

第一件事是告诉内容脚本向扩展发送请求以获取一些数据,这些数据可以是扩展localStorage:

contentscript.js

chrome.runtime.sendMessage({method: "getStatus"}, function(response) {
  console.log(response.status);
});

背景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);
});

背景js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocalStorage")
      sendResponse({data: localStorage[request.key]});
    else
      sendResponse({}); // snub them.
});

扫码关注云+社区