Mel*_*kor 5 html javascript google-chrome-extension
我试图保存在弹出窗口中选择的单选选项，但是打开弹出窗口时，控制台出现错误：
未捕获的错误：调用表单 get(string, undefined) 与定义不匹配 get(optional string or array or object keys, function callback) extensions::schemaUtils::113
manifest.json（相关）：
{
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"page_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "Scratch theme loader",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"https://scratch.mit.edu/*"
],
"js": ["jquery-2.2.2.min.js", "content.js"],
"run_at":"document_start"
}
],
"permissions": [
"tabs",
"storage",
"declarativeContent",
"https://scratch.mit.edu/*",
"https://pastebin.com/raw/*"
]
}
弹出窗口.html：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="main">
<li id="top_bar">
<img src = "images/S_Themes.png">
</li>
<li>
<p>Choose which theme you would like to use:</p>
<form id="options" action="">
<input type="radio" name="op" id="op1"> <div id="op1">Example 1</div>
<br><input type="radio" name="op" id="op2"> <div id="op2">Example 2</div>
<br><input type="radio" name="op" id="op3"> <div id="op3">Example 3</div>
<br><input type="radio" name="op" id="op4"> <div id="op2">Example 4</div>
<br><input type="radio" name="op" id="op5"> <div id="op3">Example 5</div>
</form>
<button type="button" id="save">Save</button>
</li>
<li>
<a href="#"><div class="options"><br>Add themes</div></a>
<a href="#"><div class="options">Options</div></a>
</li>
</ul>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js：
function getValue(callback) { chrome.storage.sync.get("selected", callback); }
var selectedvar = getValue()
console.log("Data was loaded.");
if ((typeof selectedvar) == "number"){
var element = document.getElementById("op" + selectedvar.toString());
console.log("op" + selectedvar.toString());
element.checked = true;
}
document.getElementById('save').onclick = save;
function save() {
var radios = document.getElementsByName("op");
var value;
for(var k=0;k<radios.length;k++)
if(radios[k].checked){
value = k + 1;
}
chrome.storage.sync.set({"selected": value}, function () {
console.log("Data was saved.");
})
}
附注。我无法让 jQuery 在“popup.js”中工作，所以如果可能，请给出一个不使用它的解决方案。
编辑：
@Iván Nokonoko，我在 popup.js 中更改了下面的代码，但它没有保存，并且变量“selectedvar”在加载时仍未定义。
function call() {console.log("Data was loaded.");}
function getValue(callback) { chrome.storage.sync.get("selected", callback); }
var selectedvar = getValue(call);
console.log(selectedvar); //prints undefined, despite being previously saved.
您可以使用 getValue 的参数作为第二个参数调用 chrome.storage.sync.get，但随后您可以不带参数调用 getValue：
var selectedVar = getValue() <--- 无参数！
这会导致您的代码执行以下操作：
chrome.storage.sync.get("已选择",未定义)
这就是错误。考虑到 chrome.storage 是异步工作的，您必须提供回调函数来检索数据。例如：
chrome.storage.sync.get("selected", function (data) {
if (data["selected"]) selectedVar = data["selected"] //better with dot notation
// then do stuff with selectedVar...
// ...
});
尝试使用这个 popup.js：
function myCallbackFunction(dataStored) {
if (dataStored["selected"]) { //better with dot notation: dataStored.selected
selectedvar = dataStored["selected"];
console.log("Data was loaded.");
}
if (selectedvar) {
var element = document.getElementById("op"+selectedvar); //JS automatically transforms number to String
console.log("op"+selectedvar);
element.checked = true;
}
}
function getValue(callback) { chrome.storage.sync.get("selected", callback); }
getValue(myCallbackFunction);
document.getElementById('save').onclick = save;
function save() {
var radios = document.getElementsByName("op");
var value;
for(var k=0;k<radios.length;k++)
if(radios[k].checked){
value = k + 1;
break; // once you get the checked value, you can exit the loop.
}
chrome.storage.sync.set({"selected": value}, function () {
console.log("Data was saved.");
});
}
您还必须从 HTML 文件中的 div 中删除/更改 id（它们与输入 id 冲突）