Chrome扩展JS代码在特定网站多次注入的原因及修复方法

问题诱因 #

你配置了两套注入逻辑同时生效，导致foreground.js被多次注入：

• 第一套是manifest.json中content_scripts规则，匹配到https://www.example.com/agent/tickets/*路径时会自动注入一次foreground.js
• 第二套是background.js中chrome.tabs.onUpdated监听逻辑，你注释了tab.status !== "complete"的判断，该事件会在标签页加载的全阶段（状态变更、URL变更、页面内动态内容更新、iframe加载等）多次触发，只要URL包含tickets就会执行手动注入，导致重复注入N次

修复方案 #

根据你的使用场景二选一即可：

方案1：仅使用manifest自动注入（推荐，无额外逻辑成本） #

直接删除background.js中chrome.tabs.onUpdated的全量监听代码，content_scripts的原生规则已经可以满足「匹配对应URL时仅注入一次」的需求，不需要额外手动控制注入。

方案2：仅使用background手动注入（适合需要自定义注入时机的场景） #

1. 删除manifest.json中content_scripts字段里的foreground.js注入配置，避免自动注入
2. 放开background.js中被注释的tab.status !== "complete"判断，减少无效触发
3. 增加注入标记校验，避免单页应用路由切换、标签页状态多次更新导致的重复注入：
   • 在foreground.js第一行添加标记：window.extInjected = true;
   • 修改background.js的注入逻辑，注入前先判断标记是否存在：

   chrome.tabs.onUpdated.addListener(function(id, info, tab){
       if (tab.status !== "complete"){
           return;
       }
       if(tab.url.indexOf("tickets") != -1){
           // 先判断是否已经注入过
           chrome.tabs.executeScript(tab.id, {
               code: 'typeof window.extInjected === "undefined"'
           }, (res) => {
               if (res?.[0]) {
                   console.log("injected");
                   chrome.tabs.executeScript(tab.id, {"file": "foreground.js"});
               }
           })
       }
   });
   

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