【发布时间】：2017-04-24 17:12:15
【问题描述】：
在我的options.html 文件中，我在chrome.storage.local 中设置了一个值，但是当我尝试从我的弹出窗口中设置时，我无法get() 的值。 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"]
}
]
}
【问题讨论】：
-
从
background和content_scripts" field inmanifest.json中删除load_id_to_popup.js，再试一次。 -
@HibaraAi 感谢您的想法 - 但这什么也没做 :( 还有其他想法吗？
-
首先你应该知道你的问题不是
chrome.storage.get是如何使用的，而是Cannot read property 'dataset' of null，也就是说document.getElementById('input_id')是null，你应该先检查元素是否被检索到。 -
@HibaraAi 但是这个
chrome.storage.local.get("ts_id_js", function (obj) {...}应该得到它，不是吗？我已经使用 options.js 预先设置了 id。我想我没有掌握一些基本的东西。 -
请不要将 jQuery 和所有这些脚本加载到
<all_urls>中，除非您必须这样做。这是很多代码，每一页都需要负担（我们这些打开了数百个标签的人怎么办？）。您可能真的需要将所有内容加载到每个页面中。然而，即使你的 UI 交互是从页面内部开始的（使用 manifest.json 内容脚本的一个原因），尝试构建扩展，以便在用户开始与你的 UI，然后注入其余部分。
标签： javascript jquery html google-chrome google-chrome-extension