Chrome 扩展程序：“错误处理响应：TypeError：无法将属性‘value’设置为 null”
这是我的第一个 Chrome 扩展程序，而且 js 也不是我的强项。我觉得这很简单，只是因为我缺乏这方面的经验而错过了。
我尝试从存储中读取，并将读取的内容（或默认值）放入文本字段。 似乎 它没有找到元素 ID：“orgurl”，这就是它无法填充字段的原因，但我可能错了。
我在这段代码中收到标题中的错误（请参阅标记为“BUG”的行）：
function restore_options() {
// Use default value of https://o.yourdomain.com
chrome.storage.sync.get({
oURL: 'https://o.yourdomain.com'
}, function(items) {
document.getElementById('orgurl').value = items.oURL; // BUG: NOT filling it into the text box
});
}
（注意：该代码几乎逐字逐句取自 Chrome 开发者页面： https://developers.chrome.com/extensions/options ）
如果我在出现错误的行之前添加
console.log(items.oURL)
，它确实会显示正确的信息，只是无法将信息添加到文本字段。
我在同一个 js 文件（options.js）中调用它这个：
document.addEventListener('DOMContentLoaded', restore_options);
由于 Chrome 扩展程序相互交织，我还将添加扩展程序的所有相关内容，希望它能有所帮助。
清单
{
"manifest_version": 2,
"name": "O Viewer",
"version": "1.0.0",
"icons": {
"16": "assets/images/icon16.png",
"32": "assets/images/icon32.png",
"48": "assets/images/icon48.png",
"128": "assets/images/icon128.png"
},
"background": {
"scripts": ["assets/js/options.js", "assets/js/popup.js"],
"persistent": false
},
"browser_action": {
"default_popup": "pages/popup.html",
"default_icon": {
"16": "assets/images/icon16.png",
"32": "assets/images/icon32.png",
"48": "assets/images/icon48.png",
"128": "assets/images/icon128.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["assets/js/options.js", "assets/js/popup.js"],
"match_about_blank": false
}
],
"content_security_policy": "script-src 'self' https://o.yourdomain.com; object-src 'self'",
"options_ui": {
"chrome_style": true,
"page": "pages/options.html",
"open_in_tab": false
},
"permissions": [
"<all_urls>",
"https://ajax.googleapis.com/",
"storage"
]
}
Options.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>O Viewer: Settings</title>
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<link href="../assets/css/styles.css" rel="stylesheet" type="text/css">
<script href="../assets/js/options.js"></script>
</head>
<body>
<div class="options-header">
<h1 class="logo">
<a href="https://blah.com" id="logo-title">Options</a>
</h1>
</div>
<div class="options-content">
<label id="orgurllabel">
URL to your O Server:
<span id="orgurlex">(ex. https://o.yourdomain.com)</span>
<input id="orgurl" type="text">
</label>
<div id="save_status"></div>
<button id="save_options">Save</button>
</div>
</body>
</html>
有人有什么想法吗？
看起来，
manifest.json
中包含的不同脚本在您尝试查找错误时造成了一些混乱。上面的评论是正确的，您应该能够从清单中的
background
和
content_scripts
部分中删除
assets/js/options.js
和
assets/js/popup.js
。它们可以直接从
options.html
和
popup.html
调用。如果您目前还没有任何背景和内容脚本，您可能必须完全删除这些条目才能加载扩展程序。
一旦您精简了清单，它应该会清除您在加载扩展程序或检查背景页面时看到的错误，并使故障排除更简单。在这种情况下，您的 JS 似乎运行良好，但是您有一个小拼写错误（
<script href="../assets/js/options.js"></script>
而不是
<script src="../assets/js/options.js"></script>
）导致它无法加载到您的选项页面上。
在 https://stackoverflow.com/a/28999241/2581399 上有一个关于所有 Chrome 扩展程序脚本和页面的概述，可能让您更容易跟踪在哪里触发了什么。