将Chrome扩展程序选项保存到chrome.storage吗?

玛丽·熊猫

我正在制作一个带有options.html页面的chrome扩展程序

在选项页面上,我有3个复选框。选中/取消选中其中一个复选框时,该复选框的值将使用chrome.storage.sync.set()保存到chrome.storage或从chrome.storage中删除但是,一旦使用chrome.storage.sync.get()保存数据,我似乎无法检索到该数据

这是我的代码:

options.html:

<div class="checkboxes">
    <input id="test1" name="test1" type="checkbox">       
    <input id="test2" name="test2" type="checkbox">
    <input id="test3" name="test3" type="checkbox">
</div>

options.js:

$(document).ready(function() {

  var storage = chrome.storage.sync;

  //Retrieve existing settings
  $(':checkbox').each(function() {
    $(this).prop('checked', function() {
      var name = this.name;
      storage.get(name, function(test){
        console.log(test[name]);
      });
    });
  });

  $(".checkboxes").on("change", ":checkbox", saveSettings);

  //Save or delete settings
  function saveSettings() {
    var name = this.name;   

    if($(this).is(':checked')) {
      storage.set({name:'checked'},function(){
        console.log("saved");
      });
    }
    else {
      storage.remove(name, function(){
        console.log("removed");
      });
    }
  }

});

以上输出:

console.log(test[name]); > undefined
console.log("saved");    > saved
console.log("removed");  > removed

为什么我会得到“未定义”?

我使用localStorage厌倦了同样的事情,它仅在option.js上工作良好但是,当我尝试在background.js上检索存储的数据时,它不起作用。我发现他们的localStorage详细信息无法相互访问。

我还应该提到我不是javascript / jquery方面的佼佼者,而且我仍在学习,所以请原谅我的错误。

罗伯·W

您有两个主要问题:

  1. chrome.storage.sync.get是异步的,而中的函数jQuery.fn.prop(propertyName, function(index, oldPropertyValue) )必须同步返回所需的值。
  2. storage.set({name:'checked'}, ...);将创建一个名为“ name”的属性,其值为“ checked”,而不是具有该name变量中指定的名称的属性,其值为“ checked”。

要解决第一个问题,请交换操作顺序:首先阅读首选项,然后设置属性:

//Retrieve existing settings
$(':checkbox').each(function(index, element) {
    var name = this.name;
    storage.get(name, function(items) {
        element.checked = items[name]; // true  OR  false / undefined (=false)
    });
});

要解决第二个问题,请首先创建一个对象,分配新属性,然后保存结果。注意:由于复选框只能具有两种状态,因此建议不要保存字符串“ checked”,而应使用布尔值(true / false):

function saveSettings() {
    var name = this.name;
    var items = {};
    items[name] = this.checked;
    storage.set(items, function() {
        console.log("saved");
    });
}

PS。如果确定要处理复选框,请使用element.checked代替$(element).is(':checked')前者更短,更快。使用jQuery在这里没有任何价值。另请参阅:什么时候使用Vanilla JavaScript vs. jQuery?

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Chrome扩展程序:chrome.storage不保存任何内容

chrome扩展程序可以保存您在扩展程序上设置的操作吗?

Google Chrome扩展程序可以访问Chrome保存的网站密码吗?

在Chrome扩展程序中连接OpenVPN吗?

Chrome扩展程序可以安装其他扩展程序吗?

将用户输入作为选项保存到代码中-Google Chrome扩展程序

Chrome扩展程序:等待storage.sync获取远程数据

chrome.storage 用于 Chrome 扩展

Chrome扩展程序-将添加“身份”权限会在自动更新时引起警告吗?

Chrome扩展程序选项

Chrome扩展程序如何将许多文件保存到用户指定的目录中?

在Chrome扩展程序中将值保存到文本框

Chrome扩展程序中是否存在任何内存限制chrome.storage.sync.set

开发Chrome扩展程序时如何清除“ chrome.storage.local”缓存?

用于Chrome扩展程序的HTML5 sessionStorage或chrome.storage?

Chrome扩展程序弹出窗口未保留chrome.storage.sync的数据集

使用Google Cloud Storage将音频文件从Google文本语音转换保存到Firebase存储吗?

Chrome扩展程序通知未显示contextMessage吗?

Google Chrome扩展程序可以提交POST / GET请求吗?

我可以通过代码启动Chrome扩展程序API吗?

可以在Chrome扩展程序中使用ES6吗?

调试Chrome扩展程序的popup.html吗?

可以通过Chrome扩展程序修改窗口对象吗?

您可以注册Chrome扩展程序的OpenSearch URL吗?

我可以禁用Chrome的扩展程序内容验证吗?

我可以从Chrome扩展程序访问网站的localStorage吗?

可以在Chrome扩展程序中要求npm模块吗?

您可以在 Chrome 扩展程序中使用 TinyMCE 命令吗?

使用Chrome扩展程序注入javascript这么容易吗?