Chrome Extension MV3下向YouTube注入JS的最优方案咨询

核心思路 #

YouTube是单页应用（SPA），常规的静态注入或页面刷新监听无法覆盖前进后退、SPA跳转等场景。最优方案是静态注入基础脚本+监听SPA路由变化+DOM元素加载监听，同时适配不同网络速度。

步骤1：配置Manifest.json的Content Script #

先将脚本注入所有YouTube页面，后续在脚本内判断是否为/watch页面，确保首次加载、页面刷新时能触发：

// manifest.json
{
  "permissions": ["scripting", "activeTab", "storage"],
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "js": ["video.js"],
      "run_at": "document_start" // 提前注入，保证能监听路由变化
    }
  ]
}

步骤2：编写video.js的核心逻辑 #

结合YouTube自定义导航事件、浏览器前进后退事件，再用MutationObserver监听目标元素加载，适配不同网络速度：

// video.js
function initYouTubeScript() {
  // 过滤非/watch页面
  const isWatchPage = window.location.pathname.startsWith('/watch');
  if (!isWatchPage) return;

  // 监听目标元素加载（适配不同网络速度）
  function waitForElement(selector, callback) {
    const element = document.querySelector(selector);
    if (element) {
      callback(element);
      return;
    }
    // 用MutationObserver监听DOM变化，找到元素后立即执行并断开监听
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(() => {
        const target = document.querySelector(selector);
        if (target) {
          callback(target);
          observer.disconnect();
        }
      });
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  // 你的核心业务逻辑（示例：操作点赞按钮）
  function handlePageReady() {
    // 替换为你需要监听的元素选择器，比如YouTube点赞按钮的选择器
    waitForElement('#top-level-buttons-computed ytd-toggle-button-renderer:first-child', (likeButton) => {
      console.log('点赞按钮已加载，执行自定义逻辑');
      // 这里编写你的业务代码
    });
  }

  // 首次加载执行
  handlePageReady();

  // 监听YouTube SPA导航完成事件（YouTube自定义事件）
  document.addEventListener('yt-navigate-finish', () => {
    if (window.location.pathname.startsWith('/watch')) {
      handlePageReady();
    }
  });

  // 监听浏览器前进/后退事件
  window.addEventListener('popstate', () => {
    if (window.location.pathname.startsWith('/watch')) {
      handlePageReady();
    }
  });
}

// 页面加载完成后初始化
if (document.readyState === 'complete') {
  initYouTubeScript();
} else {
  window.addEventListener('load', initYouTubeScript);
}

方案优势 #

• 覆盖所有场景：首次加载、页面刷新、SPA跳转（点击推荐视频）、前进/后退按钮切换页面都能触发
• 适配网络速度：MutationObserver会等待目标元素加载完成再执行逻辑，不会出现“元素未加载”错误
• 避免重复执行：每次导航只会执行一次逻辑，MutationObserver找到元素后立即断开监听

你之前方案的问题分析 #

1. 静态Content Script未触发前进后退：YouTube是SPA，页面未刷新，Content Script仅首次注入一次，不会重新执行
2. chrome.tabs.onUpdated监听不可靠：SPA跳转时页面未刷新，changeInfo.status不会触发，无法覆盖所有场景
3. pageshow事件无效：YouTube的SPA跳转不会触发该事件，因为页面未被缓存后重新显示
4. setInterval多次触发：重复执行逻辑引发错误，且无法适配不同用户的加载速度

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