在我的 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
这不是拼写错误,对吗?请告诉我它,这很容易修复。
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"]
}
]
}
答案 0 :(得分:0)
正如Haibara Ai在评论中所说,实际错误是document.getElementById('input_id')
返回null
意味着该元素不存在。发生这种情况的原因是,除了将 popup.html 加载到{em> popup.html 之外,您不加区别地将所有弹出脚本加载为background
和content_scripts
。因此,由于没有匹配的元素,您会收到脚本作为后台脚本(一次)或内容脚本(每个页面)运行时报告的错误。
在 manifest.json 中,您需要更改scripts
中background
键和js
中content_scripts
键中定义的脚本}。如果没有关于您的扩展程序的更完整信息,则无法准确确定应在background
中列出哪些脚本以及应在content_scripts
中加载哪些脚本。但是,除非您知道应该将脚本同时加载到background
和content_scripts
,否则大部分内容只会进入其中一个。
对于 manifest.json 中的background
和content_scripts
条目,您需要类似以下内容的内容。在background
和content_scripts
条目中,我删除了 options.js 的条目,这显然适用于 options.html 。我还删除了 load_id_to_popup.js ,这显然适用于 popup.html 。另外,我删除了 popup.js 。虽然您未在问题中包含该内容,但很可能仅适用于 popup.html
在background
和content_scripts
中,我还注释掉了 load_id.js 和 initialize_id.js ,因为它们看起来适合您的< EM> options.html 。你没有在问题中包含它们,所以我假设它们并没有在其他地方使用过。
你没有在问题中包含 onclick_button.js ,因此不清楚在* manifest.json中应该在哪里引用它。但是,如果它应该在 manifest.json 中,那么它可能只应该位于background
和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
]
}
]
}
此外,您的manifest_version
应为2,而非3。