Chrome扩展开发中popup.html内引入的脚本无法执行如何解决

• 1. 事件绑定错误：不存在document.onload标准事件，你绑定的回调永远不会被触发，这是displayLabels函数完全不执行、控制台无输出的核心原因。页面加载相关的标准事件为window.onload（等待所有资源加载完成触发）、document的DOMContentLoaded事件（DOM解析完成即可触发）。
• 2. 脚本加载时机错误：你将popup.js放在head标签中引入，脚本执行时body内的mainDiv还未被浏览器解析，就算函数触发，getElementById("mainDiv")也会返回null，后续渲染逻辑会报错。
• 3. 异步API调用逻辑错误：chrome.storage.local.get是异步接口，你当前的代码在调用接口后会立刻执行打印、循环渲染逻辑，此时异步回调还未返回结果，labels永远是空数组，就算前两个问题修复也无法渲染出内容。

第一步：修改popup.html #

将script标签移动到body闭合标签前，确保DOM解析完成后再加载执行脚本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="mainDiv">
    </div>
    <script type="text/javascript" src="popup.js"></script>
</body>
</html>

第二步：修改popup.js #

修正事件绑定，同时将渲染逻辑放到storage异步回调内部：

function displayLabels(){   
    var mainDiv = document.getElementById("mainDiv")
    // 清空原有内容避免重复渲染
    mainDiv.innerHTML = ''

    chrome.storage.local.get("labels",value=>{
        const labels = value.labels || []
        console.log(labels)
        for(var i=0;i<labels.length;i++){
            var textBox = document.createElement("h5")
            textBox.innerText = `Label${i}: ${labels[i]}`
            mainDiv.appendChild(textBox)
        }
    });
}

// 脚本放在body底部，DOM已经加载完成，直接调用即可
displayLabels()

// 如果你要保留事件绑定写法，使用正确的事件：
// document.addEventListener('DOMContentLoaded', displayLabels)

内容的提问来源于stack exchange，提问作者RishiC