小开

2016年更新:

Google Chrome 发布了存储 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"
],

有一些方法可以“删除”、“清除”、“ getBytesInUse”，还有一个事件侦听器可以侦听更改后的存储“ onChanged”

使用本机 localStorage (2011年的旧回复)

内容脚本运行在网页的上下文中，而不是扩展页面。因此，如果您通过 contentscript 访问 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.
});

小开

另一个选择是使用 chrome 存储 API。这允许存储可选的跨会话同步的用户数据。

缺点之一是它是异步的。

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

小开

有时使用 一个 href = “ https://developer.chrome.com/docs/extons/reference/Storage/”rel = “ nofollow noReferrer”> chrome.Storage API 可能会更好，它比 localStorage 更好，因为你可以:

存储来自您的内容脚本 < strong > 的信息，而不需要内容脚本和扩展之间的消息传递 ;
将数据存储为 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);
})
})();

这里的“ Changes”是一个对象，它包含给定键的新旧值。“ AreaName”参数指的是存储区域的名称，可以是“ local”、“ sync”或者“ management”。

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

宣言 Json

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

小开

[清单3]

您可以执行从网页返回本地存储项的脚本。这个脚本可以从弹出窗口或后台服务工作者执行。

将这一行添加到 Manif.json:

"permissions": ["scripting"]


let [tab] = await chrome.tabs.query({ active: true, currentWindow: true })


// Execute script in the current tab
const fromPageLocalStore = await chrome.scripting.executeScript({
target: { tabId: tabId },
func: () => {
return JSON.stringify(localStorage)
}
})


const localStorageItems = JSON.parse(fromPageLocalStore[0].result)

Chrome 扩展: 访问内容脚本中的 localStorage

2016年更新:

使用本机 localStorage (2011年的旧回复)