Menu
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.com/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.
918
Open Chrome and enter “ chrome://flags/ ” in the address bar, then hit “Enter.” This should take you to the advanced configuration section. To remove the “Extensions” menu button from the Chrome toolbar, toggle the dropdown list on the right and select “Disabled.”
Navigate to Home > Tools > UiPath Extensions. Select Chrome > Install. Open Chrome and navigate to chrome://extensions . Enable the UiPath Web Automation extension if needed.
When extensions are installed into Chrome they are extracted into the C:\Users\[login_name]\AppData\Local\Google\Chrome\User Data\Default\Extensions folder. Each extension will be stored in its own folder named after the ID of the extension.
You 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)
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
