Chrome扩展代码报错：Uncaught SyntaxError与Uncaught TypeError求助

1. 解决"Identifier 'select1' has already been declared"错误 #

• 原因：const声明的变量无法在同一作用域重复定义，若扩展脚本被多次注入页面（比如content script匹配规则过宽），就会触发这个错误。
• 修复方案：
  • 用自执行匿名函数隔离作用域，避免全局变量污染；
  • 检查扩展manifest中的content script配置，确保脚本只注入目标页面一次，比如精准匹配URL而非宽泛的"<all_urls>"。

2. 解决"Cannot read property 'addEventListener' of null"及页面需刷新才运行的问题 #

• 原因：脚本执行时，页面DOM还未完全加载，getElementById找不到目标元素返回null；刷新页面时元素已加载，所以代码能正常运行。
• 修复方案：
  • 监听DOMContentLoaded事件，确保DOM加载完成后再执行代码；
  • 对每个DOM元素增加存在性判断，避免因元素未加载导致的报错。

修正后的完整代码 #

(function() {
  // 等待DOM加载完成后执行代码
  document.addEventListener('DOMContentLoaded', function() {
    const select1 = document.getElementById('categorisation_1');
    const select2 = document.getElementById('categorisation_2');
    const select3 = document.getElementById('categorisation_3');
    const select4 = document.getElementById('categorisation_4');

    // 先判断select1是否存在，再绑定事件
    if (select1) {
      select1.addEventListener('change', () => {
        [select2, select3, select4].forEach(select => {
          if (select) select.removeAttribute('disabled');
        });
      });

      setTimeout(() => {
        select1.value = '7: Object';
        select1.dispatchEvent(new Event("change"));
      }, 1000);
    }

    if (select2) {
      setTimeout(() => {
        select2.value = '6: Object';
        select2.dispatchEvent(new Event("change"));
      }, 2000);
    }

    if (select3) {
      setTimeout(() => {
        select3.value = '25: Object';
        select3.dispatchEvent(new Event("change"));
      }, 3000);
    }

    if (select4) {
      setTimeout(() => {
        select4.value = '1: Object';
        select4.dispatchEvent(new Event("change"));
      }, 4000);
    }

    // 处理其他元素，均增加存在性判断
    const champContactClient = document.getElementById('champContactClient');
    if (champContactClient) champContactClient.value = '1: Object';

    const champGravite = document.getElementById('champGravite');
    if (champGravite) champGravite.value = '2: Object';

    const uploadBtn = document.getElementsByClassName("btn btn-file-upload")[0];
    if (uploadBtn) uploadBtn.click();

    const champCommentaire = document.getElementById('champCommentaire');
    if (champCommentaire) champCommentaire.value += "ok";
  });
})();

额外扩展配置建议 #

在扩展的manifest.json中，明确设置content script的run_at为"document_idle"，确保脚本在DOM稳定后注入：

"content_scripts": [
  {
    "matches": ["你的目标页面URL"],
    "js": ["你的脚本文件名.js"],
    "run_at": "document_idle"
  }
]

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