如何开发Chrome扩展将YouTube视频固定为360p画质以节省流量

嘿，这个需求我之前帮朋友折腾过好几次，核心就是靠Chrome扩展的内容脚本介入YouTube的播放逻辑，强制把画质锁在360p。下面给你一步步拆解具体实现：

首先得创建一个符合Chrome扩展规范的配置文件，告诉Chrome这个扩展要作用在哪些页面，加载什么脚本。直接用Manifest V3就行，这是现在Chrome推荐的版本：

{
  "manifest_version": 3,
  "name": "YouTube 360p 强制锁",
  "version": "1.0",
  "description": "自动把YouTube视频画质固定为360p，省流量神器",
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "js": ["fix-quality.js"],
      "run_at": "document_idle"
    }
  ],
  "permissions": []
}

简单解释下：

• matches：指定这个脚本只在YouTube所有域名下生效
• run_at: document_idle：等页面基本加载完再注入脚本，避免和YouTube的加载逻辑冲突
• 因为只是操作页面元素和调用YouTube的内部API，不需要额外权限，所以permissions留空就行

这部分是实现功能的关键，我们要做三件事：

1. 定义一个函数，把画质强制设置为360p
2. 监听页面初始加载和视频切换（YouTube是单页应用，切换视频不会刷新页面）
3. 防止YouTube自动切换画质（比如网络波动时它可能自动降/升画质）

直接上代码，每部分都加了注释：

// 核心函数：设置画质为360p
function setQualityTo360p() {
  // 获取YouTube的播放器实例（这里用了YouTube页面的内部DOM结构，比较稳定）
  const playerContainer = document.querySelector('ytd-player');
  if (!playerContainer) return;
  
  const player = playerContainer.getPlayer();
  if (!player) return;

  // 注意：YouTube内部用标识对应画质，360p对应的是'medium'
  // 先确认当前视频支持360p
  const availableQualities = player.getAvailableQualityLevels();
  if (availableQualities.includes('medium')) {
    // 强制设置当前播放画质
    player.setPlaybackQuality('medium');
    // 设置默认画质范围，防止下次加载视频重置
    player.setPlaybackQualityRange('medium');
  }
}

// 页面首次加载时执行一次
document.addEventListener('DOMContentLoaded', setQualityTo360p);

// 监听YouTube的单页导航事件（切换视频时会触发这个自定义事件）
document.addEventListener('yt-navigate-finish', setQualityTo360p);

// 用MutationObserver监听页面元素变化，防止有些场景下导航事件没触发
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length > 0) {
      const videoElement = document.querySelector('video');
      // 给视频元素加个标记，避免重复执行
      if (videoElement && !videoElement._qualityFixed) {
        videoElement._qualityFixed = true;
        setQualityTo360p();
        // 监听视频播放事件，每次播放都强制锁画质，防止YouTube自动切换
        videoElement.addEventListener('play', setQualityTo360p);
      }
    }
  });
});

// 监听整个页面的元素变化
observer.observe(document.body, { childList: true, subtree: true });

1. 在电脑上新建一个文件夹，把上面的manifest.json和fix-quality.js放进去
2. 打开Chrome浏览器，输入chrome://extensions/进入扩展管理页面
3. 开启右上角的「开发者模式」
4. 点击「加载已解压的扩展程序」，选择你刚才创建的文件夹
5. 打开任意YouTube视频，看看画质是不是自动切到360p了！

如果哪天YouTube改了内部API，上面的方法失效了，可以用模拟点击设置菜单的方式，这个更稳定，不受API变化影响：

function setQualityByClick() {
  // 点击画质设置按钮
  const settingsBtn = document.querySelector('button.ytp-settings-button');
  if (!settingsBtn) return;
  settingsBtn.click();

  // 找到画质菜单的容器
  const qualityMenu = document.querySelector('.ytp-quality-menu');
  if (!qualityMenu) {
    // 没找到就再点一次设置按钮关闭菜单，避免影响用户操作
    settingsBtn.click();
    return;
  }

  // 找到360p的选项（适配多语言，比如英文是"360p"，中文也是"360p"）
  const qualityOption = Array.from(qualityMenu.querySelectorAll('.ytp-menuitem-label'))
    .find(el => el.textContent.trim().includes('360p'));
  
  if (qualityOption) {
    qualityOption.click();
    // 关闭设置菜单
    settingsBtn.click();
  } else {
    // 没有360p选项的话，也关闭菜单
    settingsBtn.click();
  }
}

// 同样绑定之前的那些事件就行
document.addEventListener('DOMContentLoaded', setQualityByClick);
document.addEventListener('yt-navigate-finish', setQualityByClick);
// 可以再加个定时器，每隔几秒检查一次，防止漏触发
setInterval(setQualityByClick, 3000);

这个方法的缺点是可能会有短暂的菜单弹出动画，但胜在稳定，不会因为YouTube的API更新而失效。

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