Chrome扩展JavaScript未加载：表格筛选功能失效排查求助

嘿，我之前也碰到过一模一样的情况——单独打开HTML页面功能正常，塞进Chrome扩展里就罢工，还没报错，确实挺挠头的。结合你的场景，大概率是这几个原因，咱们一步步排查解决：

1. 内容安全策略（CSP）拦截了内联事件/脚本 #

Chrome扩展（尤其是V3版本）默认的安全规则非常严格，完全禁止内联脚本或内联事件绑定。W3Schools的示例里大概率用了内联的onkeyup事件（比如<input onkeyup="myFunction()">），这种写法在扩展环境里会被直接拦截，页面能加载但筛选函数根本不会触发。

修复方法： #

把内联事件换成JS里的事件监听：

• 先修改popup.html，去掉input标签里的内联事件：

<input type="text" id="myInput" placeholder="Search for names..">

• 然后在popup.js里，用addEventListener绑定事件，同时确保代码在DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('myInput');
  input.addEventListener('keyup', myFunction);

  function myFunction() {
    // 原有的筛选逻辑放在这里
    const filter = input.value.toUpperCase();
    const table = document.getElementById('myTable');
    const tr = table.getElementsByTagName('tr');
    
    for (let i = 0; i < tr.length; i++) {
      const td = tr[i].getElementsByTagName('td')[0];
      if (td) {
        const txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }       
    }
  }
});

2. 脚本执行时机不对 #

如果你的popup.js在DOM还没完全加载时就执行了，会出现找不到表格/输入框元素的情况，导致筛选逻辑无法正常运行。虽然单独打开HTML时，脚本放在<body>末尾能自动等待DOM加载，但扩展环境偶尔会有差异，所以一定要用DOMContentLoaded事件包裹代码，确保DOM就绪后再执行逻辑（就像上面代码里那样）。

3. 检查manifest.json的配置 #

确保你的扩展清单正确声明了弹窗和相关文件：

• 若是V3扩展，manifest.json大致结构如下：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none'"
  }
}

尽量不要随意放宽CSP规则（除非特殊需求），用替换内联事件的方式解决才是合规的最佳实践。

按照上面的步骤调整后，筛选功能应该就能正常工作了。我当初就是没注意到CSP的内联限制，折腾了好一会儿才找到问题😅

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