177

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

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

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

4

3 回答 3

255

2016 年更新：

谷歌浏览器发布存储API：https ://developer.chrome.com/docs/extensions/reference/storage/

与其他 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"
    ],

有“remove”、“clear”、“getBytesInUse”和一个事件监听器来监听改变的存储“onChanged”

使用本机 localStorage（2011 年的旧回复）

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

现在，要让您的内容脚本读取您的扩展存储（您从选项页面设置它们的位置），您需要使用扩展消息传递。

您要做的第一件事是告诉您的内容脚本向您的扩展发送请求以获取一些数据，并且该数据可以是您的扩展 localStorage：

内容脚本.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 数组。

我希望这有助于解决您的问题。

要花哨和通用...

内容脚本.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.
});
于 2010-10-14T22:11:23.277 回答
49

有时使用chrome.storage API可能会更好。它比 localStorage 更好，因为您可以：

  • 存储来自您的内容脚本的信息，而无需在内容脚本和扩展程序之间传递消息；
  • 将您的数据存储为 JavaScript 对象，而不将它们序列化为 JSON（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”参数是指存储区域的名称，可以是“local”、“sync”或“managed”。

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

清单.json

...
"permissions": [
    "storage"
 ],
...
于 2014-01-11T18:38:27.040 回答
8

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

一个缺点是它是异步的。

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

于 2012-07-19T05:30:06.810 回答