这是我的第一个 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 扩展非常复杂，我还将添加扩展的所有相关内容，希望它能有所帮助。
list
{
"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 中包含的不同脚本当你试图找出你的错误时，会引起一些困惑。上面的评论是正确的，您应该能够删除 assets/js/options.js和 assets/js/popup.js来自 background和 content_scripts list 中的部分。这些可以直接从options.html调用和 popup.html反而。如果您还没有任何背景和内容脚本，您可能必须完全删除这些条目才能加载您的扩展程序。
一旦你的 list 被削减，它应该会清除你在加载扩展或检查后台页面时看到的错误，并使故障排除变得更简单。在这种情况下，看起来您的 JS 工作正常，但您有一个小错字(<script href="../assets/js/options.js"></script> 而不是 <script src="../assets/js/options.js"></script>)导致它无法加载到您的选项页面上。
https://stackoverflow.com/a/28999241/2581399 中有对所有 Chrome 扩展脚本和页面的精彩概述。这可能更容易跟踪什么在何处触发。
关于javascript - Chrome 扩展 : "Error handling response: TypeError: Cannot set property ' value' of null"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57332536/