Chrome扩展程序表单保存错误

时间:2016-04-16 13:36:41

标签: javascript html google-chrome-extension

我正在尝试保存已在弹出窗口中选择的无线电选项,但是当打开弹出窗口时,控制台中出现错误:

  

未捕获错误:调用表单get(string,undefined)不会   match definition get(可选字符串或数组或对象键,函数   回调) 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/*"
]
}

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。我不能让jQuery在“popup.js”中工作,所以如果可能的话,请提供一个不使用它的解决方案。

修改

@IvánNokonoko,我在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.

1 个答案:

答案 0 :(得分:1)

使用getValue的参数作为第二个参数调用chrome.storage.sync.get,但是然后调用不带参数的getValue:

var selectedVar = getValue()&lt; ---没有参数!

导致您的代码执行:

chrome.storage.sync.get( “选择”,未定义)

这是错误。考虑到chrome.storage异步工作,您必须提供回调函数来检索数据。例如:

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.");
    });
}

尝试使用此popup.js:

{{1}}

您还必须从HTML文件中的div中删除/更改ID(它们与输入ID冲突)