admin管理员组文章数量:1417473
Within my options.html file, I am setting a value in chrome.storage.local, but I can't get() the value when I try to, from within my popup.html. It's like it can't get it, because it is on a "different" site (the popup site). This is what I get:
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
It's not a typo, right? Please tell me it is, that would be lovely easy to fix.
(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 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 here seems to be the problem, this can't GET the desired value.
//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="/?page=server&id=">TS3index</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"]
}
]
}
Within my options.html file, I am setting a value in chrome.storage.local, but I can't get() the value when I try to, from within my popup.html. It's like it can't get it, because it is on a "different" site (the popup site). This is what I get:
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
It's not a typo, right? Please tell me it is, that would be lovely easy to fix.
(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. 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 here seems to be the problem, this can't GET the desired value.
//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./?page=server&id=">TS3index.</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
Remove
load_id_to_popup.jsfrombackgroundandcontent_scripts" field inmanifest.json`, have a try again. – Haibara Ai Commented Dec 9, 2016 at 9:15 - @HaibaraAi Thanks for the idea - but that did nothing :( Any other idea? – Frizzant Commented Dec 9, 2016 at 9:26
-
1
First you should know your issue is not how
chrome.storage.getused butCannot read property 'dataset' of null, that meansdocument.getElementById('input_id')isnull, you should check if the element is retrieved first. – Haibara Ai Commented Dec 9, 2016 at 9:29 -
@HaibaraAi but this
chrome.storage.local.get("ts_id_js", function (obj) {...}should be getting it, no? I already set the id beforehand with the options.js. I think I am not grasping something fundamental. – Frizzant Commented Dec 9, 2016 at 9:37 -
Please do not load jQuery and all of those scripts into
<all_urls>unless you have to. That is a lot of code with which to burden every single page (what of those of us who have hundreds of tabs open?). It is possible you really need to load all of it into every page. However, even if your UI interaction is starting from within the page (one reason to use a manifest.json content script), try to architect the extension so only the minimum is loaded until the user begins interaction with your UI, then inject the rest.</all_urls> – Makyen ♦ Commented Dec 9, 2016 at 13:48
1 Answer
Reset to default 1As Haibara Ai said in ments, the actual error is that document.getElementById('input_id') returns null meaning the element does not exist. This happens because you are indiscriminately loading all of your popup scripts as both background and content_scripts in addition to loading them in your popup.html. Thus, you get the error which you reported when the script runs as either a background script (once) or a content script (every page) due to no matching element existing.
In your manifest.json, you need to change the scripts defined in the scripts key within background and the js key within content_scripts. Without more plete information about your extension it is not possible to determine exactly which scripts should be listed in background and which should be loaded in content_scripts. However, unless you know that you should load a script into both background and content_scripts, most will go in only one or the other.
You will want something like the following for the background and content_scripts entries in your manifest.json. From the background and content_scripts entries, I have removed the entry for options.js, which is clearly for your options.html. I have also removed load_id_to_popup.js, which is clearly for your popup.html. In addition, I have remove popup.js. While you did not include that in your question, it is very likely to be just for your popup.html
In the background and content_scripts I have also mented out load_id.js and initialize_id.js because they look to be for your options.html. You did not include them in the question, so I'm assuming they are not used really used elsewhere.
You have not included onclick_button.js in the question, so it is not clear where, if anywhere, it should be referenced in your *manifest.json. However, if it supposed to be in the manifest.json, then it probably should only be in one or the other of background and content_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
]
}
]
}
In addition, your manifest_version should be 2, not 3.
版权声明：本文标题：javascript - Error in response to storage.get: TypeError: Cannot read property 'dataset' of null - Stack Overflo 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745266805a2650651.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论