Chrome extension form saving error

Question

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.

Iván Nokonoko · Accepted Answer · 2016-04-16T14:46:56.860

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)

This stopped the error, but it's still not working, I have edited the question. — Melkor, Apr 16 '16 at 14:25
@Marchill At this point, the answer lies in http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Xan, Apr 16 '16 at 15:07

Chrome extension form saving error

1 Answers1