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

时间:2010-10-14 19:55:48

标签: google-chrome-extension local-storage content-script

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

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

如何让我的内容脚本从localStorage,选项页面甚至后台页面获取值?

3 个答案:

答案 0 :(得分:213)

2016年更新:

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( 2011年的旧回复

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

现在,要让您的内容脚本读取您的扩展程序存储(从选项页面设置它们),您需要使用扩展程序message passing

您要做的第一件事就是告诉您的内容脚本向您的扩展程序发送请求以获取一些数据,并且该数据可以是您的扩展名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.
});

答案 1 :(得分:42)

有时使用 chrome.storage API可能会更好。它比localStorage更好,因为你可以:

  • 无需您的内容脚本即可存储信息 内容脚本和扩展之间的消息传递;
  • 将您的数据存储为JavaScript对象,而不将其序列化为JSON(localStorage only stores strings)。

这是一个简单的代码,展示了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);
    })
})();

&#34;变更&#34;这是一个包含给定键的旧值和新值的对象。 &#34; AREANAME&#34;参数是指存储区域的名称,“本地&#39;”,“同步”和“或者&#39;管理&#39;。

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

<强>的manifest.json

...
"permissions": [
    "storage"
 ],
...

答案 2 :(得分:7)

另一种选择是使用chromestorage API。这允许通过会话之间的可选同步来存储用户数据。

一个缺点是它是异步的。

https://developer.chrome.com/extensions/storage.html