Chrome扩展内容脚本仅刷新加载，如何实现单视频单次运行？

刚接触Chrome扩展开发遇到这种SPA页面的脚本触发问题太正常了，我来给你拆解解决方案，先从你的核心场景YouTube说起，再扩展到通用网站的情况：

YouTube 专属简便方案 #

YouTube是典型的单页应用（SPA），点击推荐视频时并不会刷新整个页面，只是通过前端路由更新URL和页面内容——这也是你用普通content script配置只会触发一次，开all_frames: true又会重复执行的原因。下面是最简便的实现方式：

步骤1：配置Manifest正确的Content Script规则 #

不用开all_frames: true，保持基础配置即可：

{
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/watch*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
}

步骤2：在Content Script中监听URL变化+去重 #

核心思路是：记录已处理过的视频ID，监听YouTube的路由跳转（无论是前进后退还是点击推荐），每次URL变化时检查是否是新视频，仅在新视频时执行逻辑。代码示例：

// 用内存Set记录已处理的视频ID，tab关闭后自动清空，避免持久化干扰
const processedVideos = new Set();

function handleNewVideo() {
  const videoId = new URLSearchParams(window.location.search).get('v');
  // 跳过无视频ID或已处理过的视频
  if (!videoId || processedVideos.has(videoId)) return;

  // 这里写你的业务逻辑，每个视频只会执行一次
  console.log(`开始处理视频：${videoId}`);

  processedVideos.add(videoId);
}

// 页面首次加载时执行一次
handleNewVideo();

// 监听浏览器前进/后退的popstate事件
window.addEventListener('popstate', () => {
  // 延迟100ms确保页面内容已更新
  setTimeout(handleNewVideo, 100);
});

// 拦截SPA常用的pushState/replaceState方法（YouTube跳转推荐视频会用这个）
const originalPushState = history.pushState;
history.pushState = (...args) => {
  originalPushState.apply(history, args);
  setTimeout(handleNewVideo, 100);
};

const originalReplaceState = history.replaceState;
history.replaceState = (...args) => {
  originalReplaceState.apply(history, args);
  setTimeout(handleNewVideo, 100);
};

其他网站的问题成因与通用解决方案 #

问题成因 #

现在90%以上的现代网站都是SPA架构，它们通过JavaScript动态更新页面内容和URL，不会触发浏览器的完整页面刷新。而Chrome的Content Script默认仅在**页面首次加载（document完成加载）**时注入一次，后续的路由跳转不会重新注入脚本——这就是问题的核心。如果网站包含大量iframe，all_frames: true会让脚本在每个iframe中都运行，自然会出现重复执行的情况。

通用解决办法 #

方案1：Content Script内监听路由变化+内容去重

和YouTube的思路一致，只是需要根据目标网站的路由机制调整监听方式：

• 对于用hash路由的网站（URL带#），可以监听hashchange事件；
• 对于用history模式的网站，同样拦截pushState/replaceState+监听popstate；
• 还可以用MutationObserver监听页面核心元素（比如标题<title>、主内容容器）的变化，以此判断页面是否切换。

关键是要找到每个页面的唯一标识（比如URL的path+query、页面唯一ID），用Set记录已处理的标识，避免重复执行。

方案2：借助Background脚本的WebNavigation API（更可靠）

如果需要更精准的控制，可以用Background脚本监听页面的路由变化，按需注入或通知Content Script执行逻辑，示例如下：

Background脚本代码：

// 记录已注入过脚本的tab，避免重复注入
const injectedTabs = new Set();

// 监听SPA路由变化事件
chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
  const url = new URL(details.url);
  // 替换成你的目标网站规则，比如匹配所有带/watch的页面
  if (url.host.includes('your-target-site.com') && url.pathname.includes('/watch')) {
    const tabId = details.tabId;
    if (!injectedTabs.has(tabId)) {
      // 首次注入Content Script
      chrome.scripting.executeScript({
        target: { tabId },
        files: ['content.js']
      });
      injectedTabs.add(tabId);
    } else {
      // 已注入过，给Content Script发消息通知URL变化
      chrome.tabs.sendMessage(tabId, { action: 'pageChanged', url: details.url });
    }
  }
}, { url: [{ hostContains: 'your-target-site.com' }] });

// 当tab关闭时，从记录中移除
chrome.tabs.onRemoved.addListener(tabId => injectedTabs.delete(tabId));

Content Script代码：

const processedPages = new Set();

function handleNewPage(url) {
  const pageKey = new URL(url).pathname + new URL(url).search;
  if (processedPages.has(pageKey)) return;

  // 业务逻辑写这里
  console.log(`处理页面：${url}`);

  processedPages.add(pageKey);
}

// 首次加载执行
handleNewPage(window.location.href);

// 监听Background发来的消息
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'pageChanged') {
    setTimeout(() => handleNewPage(msg.url), 100);
  }
});

这种方案的优势是能精准控制脚本注入时机，不受页面JS环境的影响，适配绝大多数SPA网站。

方案3：MutationObserver监听页面内容变化

如果网站的路由变化没有明显的URL特征，可以监听页面核心内容区的变化，比如主容器的子元素更新时，执行脚本并去重。示例：

const processedContents = new Set();
const mainContainer = document.querySelector('#main-content');

const observer = new MutationObserver((mutations) => {
  // 简单判断内容是否更新，比如取主容器的文本摘要作为标识
  const contentKey = mainContainer.textContent.slice(0, 100);
  if (!processedContents.has(contentKey)) {
    // 业务逻辑
    console.log('页面内容更新，执行脚本');
    processedContents.add(contentKey);
  }
});

observer.observe(mainContainer, { childList: true, subtree: true });

注意事项 #

• 不要滥用all_frames: true，除非你明确需要在iframe中运行脚本；
• 用内存中的Set记录已处理项，比localStorage更合适（localStorage会持久化，可能导致用户下次打开页面时不执行脚本）；
• 加少量延迟（比如100ms）是为了确保页面DOM已更新完成，避免脚本找不到目标元素。

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