未捕获的类型错误：无法设置 null [Chrome 扩展程序] 的属性“onclick”答案

【问题标题】：Uncaught TypeError: Cannot set property 'onclick' of null [Chrome Extension]未捕获的类型错误：无法设置 null [Chrome 扩展程序] 的属性“onclick”
【发布时间】：2020-07-23 02:00:51
【问题描述】：

window.onload = function() {
    document.getElementById('item_save').onclick = function() {
    var item_name = document.getElementById('item_name').value;
    var item_size = document.getElementById('item_size').value;
    var item_type = document.getElementById('item_type').value;

    chrome.storage.sync.set({'itemName' : item_name}, function() {
        alert(itemName)
    });
}
}

上面的Javascript（content.js）^

        <div class="item_name_hold">
            <input type="text" class="item_name" name="item_name" placeholder="Item Name..." id="item_name">
        </div>

        <div class="item_size_hold">
            <input type="text" class="item_size" name="item_size" placeholder="Item Size..." id="item_size">
        </div>

        <div class="item_type_hold">
            <input type="text" class="item_type" name="item_type" placeholder="Item Type..." id="item_type">
        </div>

        <input type="button" class="item_save" name="submit" value="Save" id="item_save">

上面的HTML^

我还在 manifest.json 文件中包含了 content.js 文件，并且我在 popup.html 文件的顶部有一个脚本标记来包含 content.js。

“Uncaught TypeError: Cannot set property 'onclick' of null”和“Uncaught TypeError: Cannot read property 'sync' of undefined”是我的两个错误。

【问题讨论】：

标签： javascript html google-chrome-extension

【解决方案1】：

chrome.storage 仅在 Web 扩展 JS 范围内可用。 “同步”错误看起来像是作为内容脚本执行的（在网页的并行范围内执行）。

既然您提到了 popup.html，我建议将代码与官方弹出示例进行比较，并确保在 manifest.json 中正确指定弹出 html：https://github.com/mdn/webextensions-examples/tree/master/beastify

【讨论】：

谢谢，我想我现在明白了。我删除了一些东西，现在我没有收到错误，我会尝试整理 chrome.storage 的东西，只是尝试将变量本地保存到扩展。