Google Chrome扩展程序弹窗无法加载，请求协助排查

问题概述 #

开发的Kahoot Anti Cheat Chrome扩展弹窗无法加载，怀疑可能是Native Messaging启用或目录配置错误导致，相关信息如下：

manifest.json #

{
    "manifest_version": 3,
    "name": "Kahoot Anti Cheat",
    "description": "Kahoot Anti Cheat made to stop people not play, inaportiate names, and more",
    "version": "0.1",
    "permissions": [
      "tabs",
      "storage",
      "activeTab",
      "nativeMessaging"
    ],
    "action": {
      "default_popup": "scripts/popup/popup.html"
    },
    "icons": {
      "128": "images/128.png"
    },
    "content_scripts": [
      {
        "js": ["scripts/content.js"],
        "matches": [
          "https://play.kahoot.it/*"
        ]
      }
    ]
 }

content.js（用于获取名称对应的span元素，将元素发送至扩展） #

//This is a content script running indavidualy on play.kahot.it

//Messaging and reciving from and to host to display on wepage
while (true) {
    let itemId = document.querySelectorAll(':not([id])');
    var port = chrome.runtime.connect({name: "idSend"});
    port.postMessage({item: itemId});
    //port.onMessage.addListener(function(msg) {
      //if (msg.question === "Who's there?")
        //port.postMessage({answer: "Madame"});
      //else if (msg.question === "Madame who?")
        //port.postMessage({answer: "Madame... Bovary"});
    //};
}

popup.html（存在Chrome Storage API相关冗余代码） #

<!Doctype html>
<body style="width:580px; height:600px"></body>
<html>
    <body>
        <title>Settings</title>
        <div style="font-weight: bold;">  
            <p>Settings</p>
        </div>

        <div>
            <input type="text" id="box" value="Type here to save"/><br/>
            <input type="button" id="save" value="Save"/><br/>
            <input type="button" id="load" value="Load"/><br/>
            <input type="checkbox" id="switch1" value="switch3"/>Enable AntiCheat<br/>
            Saved item: <div id="savedList"></div>
        </div>

        Saved item: <div id="savedList2"></div>
    </body>
</html>
<script src="popup.js"></script>
<link rel="stylesheet" href="popup.css">

popup.js（保存/加载函数为冗余代码） #

function save() {
    var newItem = document.getElementById("box").value;
    localStorage.box = newItem;
}
function load() {
    var savedDiv = document.getElementById("savedList")
    savedDiv.innerHTML = localStorage.box;
    
}

document.getElementById("save").addEventListener("click", save);
document.getElementById("load").addEventListener("click", load);

//Send and recive to the content script (Host)
while (true) {
    chrome.runtime.onConnect.addListener(function(port) {
        console.assert(port.name === "idSend");
        port.onMessage.addListener(function(msg) {
            var savedDiv2 = document.getElementById("savedList2")
            savedDiv2.innerHTML = msg.item;
        });
      });
}

popup.css #

body {
    background-color: lightblue;
  }
#wrap {
    height: 600;
    width: 600;
}

问题截图 #

排查关键点 #

1. HTML结构错误：popup.html中存在重复的<body>标签，第一个<body>在<html>标签外，会导致浏览器解析异常，直接破坏弹窗页面结构，是弹窗无法加载的核心原因之一。
2. 无限循环阻塞：content.js和popup.js中都使用while(true)无限循环，会直接阻塞JS线程，导致页面无法正常渲染、脚本无法执行。content.js会持续创建端口发送消息，popup.js会重复添加监听，两者都会造成严重性能问题，导致弹窗无响应。
3. 资源路径验证：确认scripts/popup/popup.html、popup.js、popup.css以及images/128.png的实际目录结构是否与manifest配置一致，路径错误会导致资源无法加载。
4. Native Messaging权限影响：虽然manifest声明了nativeMessaging权限，但未正确配置原生消息主机一般只会触发权限警告，不会直接导致弹窗无法加载，可排除后再验证。
5. Chrome扩展调试：打开扩展管理页面的开发者模式，点击「检查视图」->「弹出窗口」，查看控制台报错信息，直接定位具体加载失败原因。

内容的提问来源于stack exchange，提问作者Husky-boi