响应storage.get时出错:TypeError:无法读取null的属性“dataset”

时间:2016-12-09 09:08:54

标签: javascript jquery html google-chrome google-chrome-extension

在我的 options.html 文件中,我在chrome.storage.local中设置了一个值,但是在我尝试时,我无法get()值< EM> popup.html 。它就像它无法获得它,因为它位于“不同”的站点(弹出站点)。这就是我得到的:

Error in response to storage.get:
TypeError: Cannot read property 'dataset' of null
    at Object.callback (chrome-extension://fcbadpjebgjnohhcihmkopdbnbjjmnod/load_id_to_popup.js:8:37)
    at chrome-extension://fcbadpjebgjnohhcihmkopdbnbjjmnod/load_id_to_popup.js:2:22

这不是拼写错误,对吗?请告诉我它,这很容易修复。

First post (solved)

options.html

<!DOCTYPE html>
<html>
  <head>
   <title>Teamsepak 3 Server Viewer Options</title>
  <style>
    body: { padding: 10px; }
  </style>

    <title></title>
  </head>
  <body>
    <p>ENTER YOUR ID FROM tsindex.com BELOW</p>
      <form>
          <input id="ts_id_js_html" type="text" value="128856"></input>
          <br>
          <br>
          <button id="execButton">Save/Load</button>
      </form> 
    <div id="initialize">
      <div id="initialize_id"></div>
      <div id="initialize_if"></div>
      <div id="initialize_else"></div>
    </div>

<script src="initialize_id.js"></script>
<script src="options.js"></script>
<script src="load_id.js"></script>
  </body>
</html>

options.js

//Javascript Document
document.getElementById("execButton").addEventListener("click", store); //adds button functionality to button (id=execButton)

    function store(){
    var input_id = document.getElementById("ts_id_js_html").value;

    chrome.storage.local.set({"ts_id_js": input_id}, function (obj) {
    chrome.storage.local.get("ts_id_js", function (obj) {
        console.log("ts_id_js INSIDE func. test (is this your ID?):" + obj.ts_id_js);
   });

});
}

load_id_to_popup.js 这里好像是问题所在,这不能达到理想值。

//Javascript Document
chrome.storage.local.get("ts_id_js", function (obj) {

if (obj.ts_id_js == undefined || null){
    document.getElementById('input_id').dataset.serverid = 128856;
    console.log("Default ID (128856) loaded to popup.html.");
} else {
    document.getElementById('input_id').dataset.serverid = obj.ts_id_js;
    console.log("Stored ID loaded to popup.html.");
}

});

popup.html

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-2.2.0.min.js"></script> 
  </head>
  <body>
    <div class="ts3index-viewer" id="input_id" data-serverid="128856" data-style="clientc=030B80"><a href="http://ts3index.com/?page=server&id=">TS3index.com</a></div>
    <script src="load_id_to_popup.js"></script>
    <script src="popup.js"></script>
  </body>
</html>

的manifest.json

{
  "manifest_version": 3,

  "name": "Teamspeak - xxxxx Community",
  "description": "This extension will show Users that are Online on our Teamspeaks Server.",
  "version": "1.4.1",
  "options_page": "options.html",

  "browser_action": {
   "default_icon": "ts3.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab",
   "storage"
  ],

  "background": {
    "scripts":["popup.js", "load_id.js", "onclick_button.js", "load_id_to_popup.js", "initialize_id.js", "jquery-2.2.0.min.js", "options.js"]
  },

  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["popup.js", "load_id.js", "onclick_button.js", "load_id_to_popup.js", "initialize_id.js", "options.js", "jquery-2.2.0.min.js"]
    }
  ]
}

1 个答案:

答案 0 :(得分:0)

正如Haibara Ai在评论中所说,实际错误是document.getElementById('input_id')返回null意味着该元素不存在。发生这种情况的原因是,除了将 popup.html 加载到{em> popup.html 之外,您不加区别地将所有弹出脚本加载为backgroundcontent_scripts。因此,由于没有匹配的元素,您会收到脚本作为后台脚本(一次)或内容脚本(每个页面)运行时报告的错误。

manifest.json 中,您需要更改scriptsbackground键和jscontent_scripts键中定义的脚本}。如果没有关于您的扩展程序的更完整信息,则无法准确确定应在background中列出哪些脚本以及应在content_scripts中加载哪些脚本。但是,除非您知道应该将脚本同时加载到backgroundcontent_scripts,否则大部分内容只会进入其中一个。

对于 manifest.json 中的backgroundcontent_scripts条目,您需要类似以下内容的内容。在backgroundcontent_scripts条目中,我删除了 options.js 的条目,这显然适用于 options.html 。我还删除了 load_id_to_popup.js ,这显然适用于 popup.html 。另外,我删除了 popup.js 。虽然您未在问题中包含该内容,但很可能仅适用于 popup.html

backgroundcontent_scripts中,我还注释掉了 load_id.js initialize_id.js ,因为它们看起来适合您的< EM> options.html 。你没有在问题中包含它们,所以我假设它们并没有在其他地方使用过。

你没有在问题中包含 onclick_button.js ,因此不清楚在* manifest.json中应该在哪里引用它。但是,如果它应该在 manifest.json 中,那么它可能只应该位于backgroundcontent_scripts中的一个或另一个中。

{
  "manifest_version": 2,

  "name": "Teamspeak - xxxxx Community",
  "description": "This extension will show Users that are Online on our Teamspeaks Server.",
  "version": "1.4.1",
  "options_page": "options.html",

  "browser_action": {
   "default_icon": "ts3.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab",
   "storage"
  ],

  "background": {
    "scripts":[
      "jquery-2.2.0.min.js", //jQuery needs to be loaded prior to where you use it
      //"load_id.js",        //Appears to be for options.html; probably don't want it here
      "onclick_button.js"  //Unknown; Likely use in only one of background/content_scripts
      //"initialize_id.js",  //Appears to be for options.html; probably don't want it here
    ]
  },

  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        //Try to avoid loading jQuery into <all_urls> unless you really **need** it.
        "jquery-2.2.0.min.js",//jQuery needs to be loaded prior to where you use it
        //"load_id.js",      //Appears to be for options.html; probably don't want it here
        "onclick_button.js"//Unknown;Likely use in only one of background/content_scripts
        //"initialize_id.js",//Appears to be for options.html; probably don't want it here
      ]
    }
  ]
}

此外,您的manifest_version应为2,而非3。