最近在追剧时，每次看完一集都要手动点下一集，感觉特别麻烦。于是研究了下如何用Chrome插件实现自动连续播放，现在把开发过程整理成笔记分享给大家。

一、为什么需要这个功能

1. 手动操作痛点：大多数视频网站虽然提供自动连播功能，但有些需要会员，有些会中途插播广告
2. 场景需求：适合追剧、网课学习等需要连续观看的场景
3. 技术可行性：现代浏览器提供了完善的扩展API和DOM操作能力

二、技术方案选择

对比几种常见方案：

• 书签脚本：注入简单但功能有限
• 用户脚本：依赖Tampermonkey等插件
• Chrome扩展：最灵活可控的方案

最终选择Chrome扩展因为：

1. 可以长期运行
2. 能访问更丰富的浏览器API
3. 发布到商店方便分享

三、核心实现步骤

1. 基础扩展结构

创建manifest.json：

{
  "manifest_version": 3,
  "name": "AutoPlayNext",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

2. 监听视频结束

在content.js中：

// 查找页面中的video元素
const video = document.querySelector('video');

if (video) {
  video.addEventListener('ended', () => {
    // 视频播放结束时的处理
    clickNextEpisode();
  });
}

3. 定位下一集按钮

不同网站的按钮选择器可能不同，这里以常见模式为例：

function clickNextEpisode() {
  // 常见选择器模式
  const selectors = [
    '.next-episode',  // 通用类名
    '.play-next',     // 备用类名
    '[aria-label="下一集"]' // ARIA标签
  ];

  for (const selector of selectors) {
    const nextBtn = document.querySelector(selector);
    if (nextBtn) {
      nextBtn.click();
      console.log('自动点击下一集成功');
      return;
    }
  }
  console.warn('未找到下一集按钮');
}

四、性能与安全考虑

1. 内存管理：
2. 使用事件委托而非为每个视频单独绑定事件

3. 页面卸载时清理监听器

4. 跨域限制：

5. Manifest v3对跨域请求更严格

6. 必要时声明host权限

7. 隐私保护：

8. 不收集任何用户数据
9. 仅操作DOM不访问敏感信息

五、常见问题解决

1. 动态加载内容：
2. 使用MutationObserver监听DOM变化
3. 示例代码：

const observer = new MutationObserver(() => {
  // 重新尝试绑定事件
  setupVideoListener(); 
});

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

1. 全屏冲突：
2. 检测全屏状态延迟点击

3. 添加适当的延时

4. 网站反爬：

5. 随机化操作间隔
6. 避免高频操作触发风控

六、扩展思路

基础功能实现后，还可以考虑：

1. 添加配置界面让用户自定义：
2. 跳过片头片尾

3. 播放速度设置

4. 支持更多视频平台

5. 添加播放统计功能

完整项目代码已放在GitHub上，欢迎大家fork和改进。这个插件虽然简单，但涵盖了Chrome扩展开发的几个核心要点，适合作为入门练手项目。

实际使用中发现，不同视频网站的结构差异很大，后续计划加入智能识别算法来适配更多平台。你有兴趣一起来完善吗？