如何在Google Chrome扩展中使用html5的localStorage？
我正在尝试开发一个扩展，将与令人敬畏的新标签页的工作。我完全遵循了作者的建议，但我添加到我的背景页面中的任何脚本似乎都没有执行。这是我的背景页面：
<script>
var info = {
poke: 1,
width: 1,
height: 1,
path: "widget.html"
}
chrome.extension.onRequestExternal.addListener(function(request, sender, sendResponse) {
if (request === "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-poke") {
chrome.extension.sendRequest(
sender.id,
{
head: "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-pokeback",
body: info,
}
);
}
});
function initSelectedTab() {
localStorage.setItem("selectedTab", "Something");
}
initSelectedTab();
</script>下面是manifest.json：
{
"update_url": "http://clients2.google.com/service/update2/crx",
"background_page": "background.html",
"name": "Test Widget",
"description": "Test widget for mgmiemnjjchgkmgbeljfocdjjnpjnmcg.",
"icons": {
"128": "icon.png"
},
"version": "0.0.1"
}以下是widget.html的相关部分：
<script>
var selectedTab = localStorage.getItem("selectedTab");
document.write(selectedTab);
</script>每次，浏览器都只显示null。本地存储根本没有设置，这让我认为后台页面完全断开了连接。我是不是有什么东西连错了？
回答 2
Stack Overflow用户
发布于 2012-06-22 05:04:54
显然，我几个月前因为沮丧而放弃了这个项目。今天我终于决定重温它，这是我发现的：
- localStorage对象被缓存(如图所示)，这解释了为什么扩展有时会工作，而在我对代码做了破坏性更改很长时间后突然不工作。这也解释了为什么在我修复它很久之后，扩展仍然不能正常工作。为了将来参考，从Chrome的扩展管理器重新加载扩展将清除扩展的localStorage缓存。
- Chrome扩展的后台页面(至少在ANTP扩展的情况下)必须是HTML文件。如果它是一个JS文件，它就不能工作。
- 我以前在JavaScript方面真的很差。
以下是更新后的代码，您可以将其用作您自己的Chrome或ANTP扩展的shell。我还包括了使用poke v2所需的ANTP更改。
background.html：
<html>
<body>
<script>
(function () {
"use strict";
var info = {
poke: 2,
width: 1,
height: 1,
path: "widget.html",
v2: {
resize: false,
min_width: 1,
max_width: 1,
min_height: 1,
max_height: 1
}
};
chrome.extension.onRequestExternal.addListener(function (request, sender, sendResponse) {
if (request === "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-poke") {
chrome.extension.sendRequest(
sender.id,
{
head: "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-pokeback",
body: info
}
);
}
});
localStorage.setItem("foo", "bar");
}());
</script>
</body>
</html>manifest.json是完全一样的。以下是widget.html的相关部分：
<script>
(function () {
"use strict";
var foo = localStorage.getItem("foo");
document.write(foo);
}());
</script>Stack Overflow用户
发布于 2012-03-07 10:13:02
如果我理解正确的话，后台页面正试图在localStorage中存储一些内容，然后将widget.html传递给任何请求内容的脚本/应用程序/扩展，然后它将读取存储在localStorage中的信息。
如果这就是你想要做的，那么问题可能出在这里--后台页面和内容脚本/其他应用程序/扩展无法直接访问对方的localStorage (这就是widget.html在请求脚本/页面的沙箱中运行时所做的事情)。您需要使用消息传递在后台页面和发送poke消息的脚本之间传递信息。
如果只想检查后台页面是否响应，可以在该页面中执行console.log( 'something‘)，然后在后台页面的开发人员工具窗口的控制台上检查是否打印了’something‘。
https://stackoverflow.com/questions/9593769
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号