Chrome扩展Manifest v2：onActivated/onUpdated触发executeScript失效问题

问题根源 #

1. 主脚本中chrome.tabs.executeScript未指定目标tabId，可能导致脚本注入到错误标签页；
2. onUpdated事件未判断页面加载状态，在loading阶段触发时DOM未完全渲染，脚本执行无效；
3. Instagram是单页应用（SPA），切换帖子时仅URL更新、页面不刷新，原foreground.js的按钮存在判断会阻止后续逻辑，且旧按钮无法自动适配新帖子的DOM结构。

解决方案 #

1. 修正Background主脚本

• 注入脚本时明确指定目标tabId，确保脚本注入到触发事件的标签页；
• onUpdated事件仅在页面加载完成（changeInfo.status === 'complete'）时执行脚本；
• 用正则表达式精准匹配Instagram帖子URL。

修改后的主脚本代码：

// 标签页激活事件处理
chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.get(activeInfo.tabId, (currentTab) => {
    const isInstagramPost = /^https:\/\/.*\.instagram\.com\/p\//.test(currentTab.url);
    if (isInstagramPost) {
      chrome.tabs.executeScript(activeInfo.tabId, { file: "./foreground.js" });
    } else {
      console.log("当前不是Instagram帖子页面");
    }
  });
});

// 标签页更新事件处理
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    const isInstagramPost = /^https:\/\/.*\.instagram\.com\/p\//.test(tab.url);
    if (isInstagramPost) {
      chrome.tabs.executeScript(tabId, { file: "./foreground.js" });
    } else {
      console.log("当前不是Instagram帖子页面");
    }
  }
});

2. 修正Foreground脚本

• 先移除旧按钮，避免重复或位置错误；
• 调整DOM选择器，匹配更稳定的Instagram帖子操作容器；
• 增加容错处理，避免因DOM未就绪导致的脚本失效。

修改后的foreground.js代码：

// 移除已存在的按钮，确保每次执行都能在新位置添加
const existingButton = document.getElementById("Tasarruflu Downloader");
if (existingButton) {
  existingButton.remove();
}

// 定位Instagram帖子的操作栏容器（类名可能随Instagram更新变化，需定期校验）
const targetContainer = document.querySelector("._ae47");
if (targetContainer) {
  const button = document.createElement("button");
  button.setAttribute("id", "Tasarruflu Downloader");
  button.innerText = "一键下载";
  button.style.cssText = "padding: 8px 12px; background: #1877f2; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 8px;";
  targetContainer.appendChild(button);
  
  button.addEventListener("click", () => {
    console.log("按钮被点击");
    // 在此添加下载逻辑
  });
} else {
  console.log("未找到目标容器，页面可能未加载完成");
  // 可选：延迟重试适配DOM加载
  setTimeout(() => window.location.reload(), 1000);
}

额外提示 #

• Instagram的DOM类名可能会不定期更新，需根据实际页面结构调整选择器；
• 对于单页应用场景，也可在foreground.js中监听popstate事件或使用MutationObserver，实现更实时的按钮更新；
• Manifest v2已被Chrome逐步淘汰，建议后续迁移到Manifest v3。

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