admin管理员组文章数量:1379636
I am trying to save the radio option that has been selected in the popup, but when open the popup, there is an error in the console:
Uncaught Error: Invocation of form get(string, undefined) doesn't match definition get(optional string or array or object keys, function callback) extensions::schemaUtils::113
manifest.json (relevant):
{
"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": [
"/*"
],
"js": ["jquery-2.2.2.min.js", "content.js"],
"run_at":"document_start"
}
],
"permissions": [
"tabs",
"storage",
"declarativeContent",
"/*",
"/*"
]
}
popup.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.");
})
}
PS. I can't get jQuery to work in "popup.js", so please give a solution not using it if possible.
EDIT:
@Iván Nokonoko, I have changed the code below in popup.js, but it isn't saving, and the variable "selectedvar", is still undefined when it loads.
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.
I am trying to save the radio option that has been selected in the popup, but when open the popup, there is an error in the console:
Uncaught Error: Invocation of form get(string, undefined) doesn't match definition get(optional string or array or object keys, function callback) extensions::schemaUtils::113
manifest.json (relevant):
{
"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./raw/*"
]
}
popup.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.");
})
}
PS. I can't get jQuery to work in "popup.js", so please give a solution not using it if possible.
EDIT:
@Iván Nokonoko, I have changed the code below in popup.js, but it isn't saving, and the variable "selectedvar", is still undefined when it loads.
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.
1 Answer
Reset to default 4You call chrome.storage.sync.get with the getValue's argument as second argument, but then you call getValue with no argument:
var selectedVar = getValue() <--- no arguments!
which causes your code to do:
chrome.storage.sync.get("selected",undefined)
that's the error. Take into account that chrome.storage works asynchronously, you have to provide a callback function to retrieve the data. For example:
chrome.storage.sync.get("selected", function (data) {
if (data["selected"]) selectedVar = data["selected"] //better with dot notation
// then do stuff with selectedVar...
// ...
});
try with this 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.");
});
}
You also have to remove/change the id's from the div's in the HTML file (they conflict with the input id's)
本文标签： javascriptChrome extension form saving errorStack Overflow
版权声明：本文标题：javascript - Chrome extension form saving error - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744498629a2609186.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论