Javascript Chrome exention选项页未保存值
我正在尝试一个我认为相当基本的chrome扩展。我有一个选项页面，用户可以在其中选择颜色，然后，从内容脚本中，在每个其他页面的左上角都会有一个选择颜色的框。出于某种原因，内容脚本页面将使用默认值，但选项页面不起作用。你能告诉我为什么吗？ 值得一提的是，对于选项页面，日志中没有打印任何内容 Manifest.json:Javascript Chrome exention选项页未保存值,javascript,html,google-chrome-extension,content-script,Javascript,Html,Google Chrome Extension,Content Script,我正在尝试一个我认为相当基本的chrome扩展。我有一个选项页面，用户可以在其中选择颜色，然后，从内容脚本中，在每个其他页面的左上角都会有一个选择颜色的框。出于某种原因，内容脚本页面将使用默认值，但选项页面不起作用。你能告诉我为什么吗？ 值得一提的是，对于选项页面，日志中没有打印任何内容 Manifest.json: { "name": "Iframe", "description": "", "version": "1", "manifest_version":
{
"name": "Iframe",
"description": "",
"version": "1",
"manifest_version": 2,
"options_page": "options.html",
"background": { "scripts": ["background.js"] },
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"anotherscript.js"
],
"all_frames": true
}
],
"permissions": [
"<all_urls>"
]
}
<html>
<head>
<title>Options for Color Chooser</title>
</head>
<body id="body">
<h1>Favorite Color</h1>
<select id="color">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br />
<button id="save">Save</button>
<br />
<button id="default">Restore default</button>
<script type="text/javascript" src="options.js"></script>
</body>
</html>
var defaultColor = "blue";
document.getElementById('body').addEventListener(function loadOptions() {
var favColor = localStorage["favColor"];
// valid colors are red, blue, green and yellow
if (favColor == undefined || (favColor != "red" && favColor != "blue" && favColor != "green" && favColor != "yellow")) {
favColor = defaultColor;
}
var select = document.getElementById("color");
for (var i = 0; i < select.children.length; i++) {
var child = select.children[i];
if (child.value == favColor) {
child.selected = "true";
break;
}
}
});
document.getElementById('save').addEventListener(function saveOptions() {
var select = document.getElementById("color");
var color = select.children[select.selectedIndex].value;
localStorage["favColor"] = color;
consol.log("saved");
});
document.getElementById('default').addEventListener(function eraseOptions() {
localStorage.removeItem("favColor");
location.reload();
consol.log("reloaded");
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getLocalStorage")
sendResponse({data: localStorage[request.key]});
else
sendResponse({}); // snub them.
});
color = "blue";
chrome.runtime.sendMessage({method: "getLocalStorage", key: "favColor"}, function(response) {
color = response.data;
consol.log(response.data);
});
a = document.createElement("div");
a.style.width = "50%";
a.style.height = "50%";
a.style.position = "absolute"
a.style.top = "0px"
a.style.left = "0px"
a.style.backgroundColor = color;
a.style.zIndex = 9999999;
a.style.opacity = 0.1;
document.body.appendChild(a);
{
"name": "Iframe",
"description": "",
"version": "1",
"manifest_version": 2,
"options_page": "options.html",
"background": { "scripts": ["background.js"] },
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"anotherscript.js"
],
"all_frames": true
}
],
"permissions": [
"<all_urls>"
]
}
<html>
<head>
<title>Options for Color Chooser</title>
</head>
<body id="body">
<h1>Favorite Color</h1>
<select id="color">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br />
<button id="save">Save</button>
<br />
<button id="default">Restore default</button>
<script type="text/javascript" src="options.js"></script>
</body>
</html>
var defaultColor = "blue";
document.getElementById('body').addEventListener(function loadOptions() {
var favColor = localStorage["favColor"];
// valid colors are red, blue, green and yellow
if (favColor == undefined || (favColor != "red" && favColor != "blue" && favColor != "green" && favColor != "yellow")) {
favColor = defaultColor;
}
var select = document.getElementById("color");
for (var i = 0; i < select.children.length; i++) {
var child = select.children[i];
if (child.value == favColor) {
child.selected = "true";
break;
}
}
});
document.getElementById('save').addEventListener(function saveOptions() {
var select = document.getElementById("color");
var color = select.children[select.selectedIndex].value;
localStorage["favColor"] = color;
consol.log("saved");
});
document.getElementById('default').addEventListener(function eraseOptions() {
localStorage.removeItem("favColor");
location.reload();
consol.log("reloaded");
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getLocalStorage")
sendResponse({data: localStorage[request.key]});
else
sendResponse({}); // snub them.
});
color = "blue";
chrome.runtime.sendMessage({method: "getLocalStorage", key: "favColor"}, function(response) {
color = response.data;
consol.log(response.data);
});
a = document.createElement("div");
a.style.width = "50%";
a.style.height = "50%";
a.style.position = "absolute"
a.style.top = "0px"
a.style.left = "0px"
a.style.backgroundColor = color;
a.style.zIndex = 9999999;
a.style.opacity = 0.1;
document.body.appendChild(a);
您的
consol.logdocument.getElementById('default').addEventListener(function () { ... });