Javascript Chrome插件保存复选框失败选项页_Javascript_Jquery_Asynchronous_Google Chrome Extension

Javascript Chrome插件保存复选框失败选项页

javascript jquery asynchronous google-chrome-extension

Javascript Chrome插件保存复选框失败选项页,javascript,jquery,asynchronous,google-chrome-extension,Javascript,Jquery,Asynchronous,Google Chrome Extension,在新的chrome插件中，我无法使用chrome.storage.sync为我的选项页面保护复选框数据。我已经尝试了很多方法让它能够工作；这是我最新的一个。我完全迷路了。提前感谢： $(document).ready(function () { var storage = chrome.storage.sync; function load_options() { //Retrieve existing settings $("input[type=checkbox]

在新的chrome插件中，我无法使用chrome.storage.sync为我的选项页面保护复选框数据。我已经尝试了很多方法让它能够工作；这是我最新的一个。我完全迷路了。提前感谢：

$(document).ready(function () {

  var storage = chrome.storage.sync;

  function load_options() {
    //Retrieve existing settings
    $("input[type=checkbox]").each(function() {
      $(this).prop('checked', function() {
        var name = $(this).parent().next().html();
        storage.get(name, function(items){
          element.checked = items[name];
        });
      });
    });
  }

  function saveSettings() {
    var checkboxes = $("input[type=checkbox]");
    var items = {};
    checkboxes.each(function (){
      var name = $(this).parent().next().html();
      items[name] = this.checked;
    });
    storage.set(items, function() {
      console.log("saved");
     });
} 

  //Factory settings pages class, load dynamic html
  function SettingsPageFactory(menuitem) {
    this.settingsFactoryItems = {
      Posts: 'settings/posts.html',
      Sidebar: 'settings/sidebar.html',
      General: 'settings/general.html',
      Privacy: 'settings/privacy.html'
    };

    this.keys = [];
    for (var key in this.settingsFactoryItems) {
      this.keys.push(key);
    }


    this.createSettingsPage = function () {
      var key = menuitem.find("a").html();
      currentPage = key;
      if ($.inArray(this.keys, key)) {
        $("#page-content-wrapper").html("");
        var url = chrome.runtime.getURL(this.settingsFactoryItems[key]);
        return url;
      }
    }

  }

  $("#wrapper").on("click", "a#safeman.btn.btn-info", function () {
    saveSettings();
  });

  $(".menuitem").on("click", function () {

    var settingsPageFactory = new SettingsPageFactory($(this));

    var url = settingsPageFactory.createSettingsPage();
    $("#page-content-wrapper").load(url + " .container-fluid");
    load_options();

    return false;

  });

所需的行为只是一个选项页面，其中包含异步加载的不同页面。这些包含看起来像开关的复选框。当开关打开或关闭时，必须使用上述API保存。动态页面均包含在此主页中：

<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Faceblock - Settings Page</title>

  <!-- Bootstrap Core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Switch checkbox -->
  <link href="css/switchbox.css" rel="stylesheet" />


  <!-- Custom CSS -->
  <link href="css/simple-sidebar.css" rel="stylesheet">
  <link href="css/options.css" rel="stylesheet">


</head>

<body>

  <div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand">

          <a href="options.html" style="text-align:center;margin-left:-30px;">
                        Settings
                    </a>
        </li>
        <li class="menuitem">
          <span class="glyphicon glyphicon-download-alt"></span><a href="posts">Posts</a>
        </li>
        <li class="menuitem">
          <span class="glyphicon glyphicon-indent-right"></span>

          <a href="sidebar">Sidebar</a>
        </li>
        <li class="menuitem"><span class="glyphicon glyphicon-eye-close"></span>

          <a href="privacy">Privacy</a>
        </li>
        <li class="menuitem">
          <span class="glyphicon glyphicon-check"></span>

          <a href="general">General</a>
        </li>
        <li class="menuitem">
          <span class="glyphicon glyphicon-eur"></span>
          <a href="donate">Donate</a>
        </li>
        <li class="menuitem">
          <span class="glyphicon glyphicon-cog"></span>
          <a href="settings">Settings</a>
        </li>
      </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <div class="row content">
          <div class="col-lg-12">
            <a href="#menu-toggle" class="btn btn-black" id="menu-toggle">Toggle Menu</a>
            <h2>Faceblock Settings Page</h2>
            <p>Faceblock is a Chrome extension which filters all annoying adds on Facebook. It also gives you control over which content you would like to show or hide, and makes sure your privacy is kept secret to big companies.</p>
            <p>If you like our Chrome plugin, feel free to donate a small fee in order to keep future changes and features coming. <code>Choose a category from the right sidebar and start configuring Facebook according to your needs!</code></p>

          </div>
        </div>
      </div>
    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <div id="dependencies" />

  <script src="js/jquery.min.js"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="js/bootstrap.min.js"></script>

  <script src="js/background.js"></script>

  <script src="js/options.js"></script>
  </div>
  <!-- /#wrapper -->



</body>

</html>

这里有一个动态加载页面的示例：

<div class="container-fluid">
  <div class="row content">
    <div class="col-lg-12">
      <a href="#menu-toggle" class="btn btn-black" id="menu-toggle">Toggle Menu</a>

      <div class="container">
        <div class="col-lg-1 col-centered">


        </div>
        <h2>privacy</h2>
      </div>

      <p>Facebook stores unwanted data in the form of cookies and other ways to show you unwanted data you might like.<code>At this page you can tell Facebook to not store your private information and to not sell it to its third-party apps.</code></p>
      <div class="container">
        <div class="col-lg-1 col-centered">
          <label class="switch ">
  <input type="checkbox" checked>
  <div class="slider round"></div>

</label>
          <div class="lable">Disable cookies Facebook</div>
        </div>
      </div>


    </div>
  </div>
</div>

    {

      "name": "FaceBlock",
      "description": "This extention gets rid of unwanted content on Facebook like sponsored posts, adds or annoying suggestions. The content you wish to see is enlarged for a better and richer social experience.",
      "version": "0.0.1",
      "manifest_version": 2,
      "content_scripts": [
        {
          "matches": [
        "http://*.facebook.com/*", "https://*.facebook.com/*", "<all_urls>"],
          "css": ["css/popup.css"],
          "js": ["js/jquery.min.js", "js/content.js",
          "js/options.js",
          "js/background.js"],
          "run_at": "document_end",
          "all_frames": true
    }],
      "options_page": "options.html",
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Faceblock"
      },
      "permissions": [
    "activeTab",
    "tabs",
    "https://www.facebook.com/*",
    "https://ajax.googleapis.com/",
    "storage",
    "<all_urls>"
  ],
      "background": {
        "scripts": ["js/background.js", "js/options.js"],
        "persistent": true
      },
      "options_ui": {
        // Required.
        "page": "options.html",
        // Recommended.
        "chrome_style": true
          // Not recommended; only provided for backwards compatibility,
          // and will be unsupported in a future version of Chrome (TBD).
          //"open_in_tab": true
      },
      "web_accessible_resources": [

    "images/faceblock.jpg",
    "images/seigaiha.png",
    "js/popup.js",
    "icon.png",
    "js/options.js",
    "css/popup.css",
    "popup.html",
    "options.html",
    "background.html",
    "js/background.js"
  ]
    }

My manifest.json如下所示：

<div class="container-fluid">
  <div class="row content">
    <div class="col-lg-12">
      <a href="#menu-toggle" class="btn btn-black" id="menu-toggle">Toggle Menu</a>

      <div class="container">
        <div class="col-lg-1 col-centered">


        </div>
        <h2>privacy</h2>
      </div>

      <p>Facebook stores unwanted data in the form of cookies and other ways to show you unwanted data you might like.<code>At this page you can tell Facebook to not store your private information and to not sell it to its third-party apps.</code></p>
      <div class="container">
        <div class="col-lg-1 col-centered">
          <label class="switch ">
  <input type="checkbox" checked>
  <div class="slider round"></div>

</label>
          <div class="lable">Disable cookies Facebook</div>
        </div>
      </div>


    </div>
  </div>
</div>

    {

      "name": "FaceBlock",
      "description": "This extention gets rid of unwanted content on Facebook like sponsored posts, adds or annoying suggestions. The content you wish to see is enlarged for a better and richer social experience.",
      "version": "0.0.1",
      "manifest_version": 2,
      "content_scripts": [
        {
          "matches": [
        "http://*.facebook.com/*", "https://*.facebook.com/*", "<all_urls>"],
          "css": ["css/popup.css"],
          "js": ["js/jquery.min.js", "js/content.js",
          "js/options.js",
          "js/background.js"],
          "run_at": "document_end",
          "all_frames": true
    }],
      "options_page": "options.html",
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Faceblock"
      },
      "permissions": [
    "activeTab",
    "tabs",
    "https://www.facebook.com/*",
    "https://ajax.googleapis.com/",
    "storage",
    "<all_urls>"
  ],
      "background": {
        "scripts": ["js/background.js", "js/options.js"],
        "persistent": true
      },
      "options_ui": {
        // Required.
        "page": "options.html",
        // Recommended.
        "chrome_style": true
          // Not recommended; only provided for backwards compatibility,
          // and will be unsupported in a future version of Chrome (TBD).
          //"open_in_tab": true
      },
      "web_accessible_resources": [

    "images/faceblock.jpg",
    "images/seigaiha.png",
    "js/popup.js",
    "icon.png",
    "js/options.js",
    "css/popup.css",
    "popup.html",
    "options.html",
    "background.html",
    "js/background.js"
  ]
    }

{
“名称”：“面板”，
“描述”：“此扩展可消除Facebook上不需要的内容，如赞助帖子、添加内容或烦人的建议。您希望看到的内容将被放大，以获得更好、更丰富的社交体验。”，
“版本”：“0.0.1”，
“清单版本”：2，
“内容脚本”：[
{
“匹配项”：[
“http://*.facebook.com/*”、“https://*.facebook.com/*”、“”]，
“css”：[“css/popup.css”]，
“js”：[“js/jquery.min.js”，“js/content.js”，
“js/options.js”，
“js/background.js”]，
“运行时间”：“文件结束时间”，
“所有帧”：正确
}],
“选项页面”：“options.html”，
“浏览器操作”：{
“默认图标”：“icon.png”，
“默认弹出窗口”：“popup.html”，
“默认标题”：“面板”
},
“权限”：[
“活动标签”，
“标签”，
"https://www.facebook.com/*",
"https://ajax.googleapis.com/",
“存储”，
""
],
“背景”：{
“脚本”：[“js/background.js”，“js/options.js”]，
“持久”：正确
},
“选项界面”：{
//必需的。
“页面”：“options.html”，
//推荐的。
“chrome_风格”：真实
//不推荐；仅提供向后兼容性，
//并且在未来的Chrome版本（待定）中将不受支持。
//“在\u选项卡中打开\u”：真
},
“网络可访问资源”：[
“images/faceblock.jpg”，
“images/seigaiha.png”，
“js/popup.js”，
“icon.png”，
“js/options.js”，
“css/popup.css”，
“popup.html”，
“options.html”，
“background.html”，
“js/background.js”
]
}

正如下面指出的，我的加载选项（）可能会出错。

问题在于保存和检索持久化数据。解决方案如下：

保存设置

  function saveSettings() {
    var checkboxes = $("input[type=checkbox]");
    var items = {};
    checkboxes.each(function (){
      var name = $(this).parent().next().html();
      items[name] = this.checked;
      storage.set(items, function() {
        console.log("saved a checkbox");
      });
    });
}

我将一些代码转换为jQuery，并确保在items对象中按名称添加了一个复选框，然后将其持久化

第二个错误对我来说有点复杂。由于我在加载可以加载持久化内容的复选框之前异步加载了内容，因此首先通过回调加载内容对我来说很重要

$("#page-content-wrapper").load(url + " .container-fluid", load_options);

剩下的很简单，我将internet示例中的javascript更改为jQuery，并确保检索到每个复选框的名称，然后将其与存储的项目进行比较。下面的解决方案可能需要一些错误处理

function load_options() {
    //Retrieve existing settings
    console.log($("input[type=checkbox]").length);
    $("input[type=checkbox]").each(function() {

        var checkbox = $(this);
        var name = checkbox.parent().next().html();

        storage.get(name, function(items){
            console.log(items);
            checkbox.prop('checked', items[name]);
        });
      });

  }

当您加载并执行扩展时，中到底显示了什么？请回答主题中的问题：包括一个复制问题的完整内容。包括manifest.json、一些后台/内容/弹出脚本/HTML。寻求调试帮助的问题（“为什么此代码不工作？”）必须包括：►想要的行为，►特定的问题或错误，以及►在问题本身中复制它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建”，以及@Mayek，目前没有错误。只输出saved，问题是我的复选框没有处于保存状态，当我返回它们时，我将它们保留在保存状态。另一个问题是他没有比$（“input[type=checkbox]”）更进一步。每个（函数（）{在load_options函数中。另外savesettings函数也有错误，没有jQuery，我无法检索html:var$name=$（this）；$name.parent（）.next（）.html（）；我将我的changesettings改进为：

函数savesettings（）{var checkbox=$（“input[type=checkbox]”）；var items={}；checkbox.each（function（）{var name=$（this.parent（）.next（）.html（）；items[name]=this.checked；}）；storage.set（items，function（）{console.log（“saved”）；}

可能是因为异步加载后调用了它？