个人中心
gpt4 book ai didi

javascript - Chrome 扩展程序表单保存错误

转载 作者：行者123 更新时间：2023-11-28 01:13:36 25 4
gpt4 key购买 nike

我试图保存已在弹出窗口中选择的单选选项，但是当打开弹出窗口时，控制台出现错误:

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(相关):

{
"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>

弹出.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.

最佳答案

您调用 chrome.storage.sync.get 时将 getValue 的参数作为第二个参数，但随后您又调用了不带参数的 getValue:

var selectedVar = getValue() <--- 没有参数!

这会导致您的代码执行以下操作:

chrome.storage.sync.get("selected",undefined)

那是错误。考虑到 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 冲突)

关于javascript - Chrome 扩展程序表单保存错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36664868/

25 4 0
文章推荐： javascript - 切换页面问题
文章推荐： javascript - 通过 ID 阻止 jQuery 中的表单提交
文章推荐： css - 如何使数字和字母底部均匀
文章推荐： javascript - ng-repeat - 如何避免复制 div 的输入内容
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com