多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Return YouTube Dislike 技术全解:恢复 YouTube 点踩计数的扩展原理与开放 API 实战指南

Return YouTube Dislike 技术全解:恢复 YouTube 点踩计数的扩展原理与开放 API 实战指南 Return YouTube Dislike 技术全解恢复 YouTube 点踩计数的扩展原理与开放 API 实战指南【免费下载链接】return-youtube-dislikeChrome extension to return youtube dislikes项目地址: https://gitcode.com/gh_mirrors/re/return-youtube-dislikeReturn YouTube DislikeRYD是一个开源的浏览器扩展它的使命是在 YouTube 官方移除「不喜歡/点踩」计数后将这一关键内容质量信号重新带回观众眼前。本文以仓库 READMEru.md 为主线结合扩展源码Extensions/combined/src/、官方问答文档Docs/FAQru.md与安全说明从历史背景、工作原理、源码级实现链路到开放 API 的完整调用方式帮助你彻底理解一个第三方扩展如何在没有官方 API 支持的情况下恢复点踩数据并掌握直接调用其公共 API 构建自己的应用的实战方法。一、项目定位它到底是什么按照 READMEru.md 的官方描述Return YouTube Dislike 是一个开源的扩展它把「不喜歡」计数器带回了 YouTube。其分发形态有三种Chrome 与 Firefox 的 Web Extension正式扩展版本其他浏览器的用户脚本Userscript仓库中提供了可直接安装的 Extensions/UserScript/Return Youtube Dislike.user.js项目本身以 GPLv3 协议开源。从扩展的工程结构看Extensions/combined/是主要的源码目录manifest-chrome.json、manifest-firefox.json、manifest-safari.json分别对应三大浏览器平台的清单文件src/下则是按职责拆分的核心模块bar.js、buttons.js、config.js、events.js、state.js、utils.js等并配有完整的单元测试如utils.spec.js、state.spec.js。这意味着一套逻辑同时支撑三个平台是典型的跨浏览器扩展架构。二、历史背景为什么需要这个扩展了解 RYD 的设计动机是理解其技术方案的前提。时间线如下2021 年 11 月 10 日Google 官方宣布 YouTube 将移除「不喜歡」公开计数器2021 年 12 月 13 日YouTube API 中的dislike字段被正式删除第三方从此无法通过官方接口获知视频的点踩数据。这一变更的后果是观众在观看前失去了判断内容质量的最直观信号。RYD 正是为了填补这一空白而生——它既不依赖官方 API 的dislike字段也不与 YouTube 对抗而是建立了一套独立的数据采集、估算与分发体系。三、工作原理数据从哪来、怎么算、怎么显示3.1 数据来源与估算策略READMEru.md 明确说明随着 YouTube API 中点踩统计的删除我们的服务器转而使用抓取的点踩统计与从扩展用户数据中外推的估算值的组合。这句话背后是两层含义归档历史数据在官方 API 仍提供数据期间RYD 持续抓取并归档了大量视频的点踩计数存入自有数据库用户数据外推对于没有被归档或归档已过期的视频利用扩展用户已安装 RYD 的观众的实际点赞/点踩行为作为样本结合点赞数与观看数的比例关系估算出接近真实的点踩数。Docs/FAQru.md 对这个流程描述得更具体扩展读取当前观看视频的 ID → 通过 RYD API 查询该视频的数据点踩数、点赞数、观看数等→ 如果该视频是第一次被查询服务器会调用 YouTube API 获取数据并写入数据库进行缓存缓存周期约 2–3 天与归档 → 最后把数据返回给扩展渲染到页面上。3.2 源码级请求链路从页面加载到数字上屏以Extensions/combined/src/state.js中的setState()为入口可以还原扩展的完整工作流let response await fetch(getApiEndpoint(/votes?videoId${videoId}likeCount${likeCount || }), { method: GET, headers: { Accept: application/json }, });关键节点如下API 地址由 config.js 定义PROD_API_URL https://returnyoutubedislikeapi.com开发环境与生产环境共用同一地址视频 ID 提取utils.js中的getVideoId()解析 URL——常规视频取?v参数Shorts 取路径段/clip剪辑则从页面meta itempropvideoId中读取请求参数除了videoId还会附带上likeCount从页面上原生点赞按钮解析出的点赞数供服务端用于比例估算响应处理processResponse()拿到 JSON 后调用setDislikes()把点踩数写入按钮文本并调用createRateBar()渲染点赞/点踩比例条。3.3 状态机点赞、点踩、取消的本地逻辑state.js定义了三种交互状态LIKED_STATE、DISLIKED_STATE、NEUTRAL_STATE。events.js中的likeClicked()与dislikeClicked()实现了完整的状态迁移逻辑例如从「中性」点击「不喜歡」本地dislikes并通过sendVote(-1)上报从「已踩」再点一次sendVote(0)取消dislikes--从「已赞」切到「不喜歡」likes--、dislikes同时上报-1。其中sendVote()通过chrome.runtime.sendMessage把{ message: send_vote, vote, videoId }交给后台脚本ryd.background.js转发给服务端。值得注意的是用户可以在设置中关闭投票上报disableVoteSubmission此时扩展只读数据、不贡献样本。四、扩展核心实现细节适配不断变化的 YouTube 前端YouTube 前端迭代频繁桌面/移动端、新旧 UI、Shorts、分段按钮等RYD 用一套选择器配置 兜底克隆机制来保持健壮性。4.1 按钮定位选择器驱动的自适应buttons.js 中的getButtons()会根据当前环境分流Shorts通过isShorts()location.pathname.startsWith(/shorts)识别遍历多个候选按钮容器并选取视口内的那个因为 Shorts 流中有多个隐藏按钮移动端isMobile()判断location.hostname m.youtube.com使用ytm-系列移动端选择器桌面端根据菜单容器#menu-container是否可见选择新设计#top-level-buttons-computed或旧设计选择器。getDislikeTextContainer()则体现了优雅降级如果页面结构里找不到点踩数字容器就调用createDislikeTextContainer()——克隆点赞按钮的文本节点模板插入到点踩按钮内部从而在 YouTube 压根没有点踩数字 DOM 的情况下把数字造出来。4.2 比例条渲染与主题bar.js 中的createRateBar()计算点赞占比并渲染 2px 高的比例条与 tooltipconst widthPercent likes dislikes 0 ? (likes / (likes dislikes)) * 100 : 50;同时支持coloredBar按主题上色与 tooltip 百分比显示tooltipPercentageMode支持dash_like、dash_dislike、both、only_like、only_dislike五种模式。utils.js的getColorFromTheme()定义了三种配色主题主题点赞色点踩色classic默认limeredaccessibledodgerbluegoldneonaquamagenta4.3 数字格式化utils.js中的numberFormat()基于Intl.NumberFormat实现numberDisplayFormat支持三种格式compactShort默认12.5K风格compactLong12.5 тыс.完整书写风格standard12,345标准千分位。语言环境取自页面html lang其次navigator.language最后从link relsearch的 URL 中兜底解析?locale参数。4.4 可配置项一览通过storage.sync持久化、由 popup.html 提供设置界面的配置项默认值见 config.js配置键默认值说明disableVoteSubmissionfalse关闭投票数据上报disableLoggingtrue关闭控制台日志coloredThumbsfalse点赞/点踩按钮上色coloredBarfalse比例条上色colorThemeclassic配色主题numberDisplayFormatcompactShort数字显示格式numberDisplayReformatLikesfalse是否用同一格式重排点赞数showTooltipPercentagefalsetooltip 显示百分比hidePremiumTeaserfalse隐藏高级功能预告五、开放 API 文档在扩展之外直接使用数据RYD 不仅服务于自家扩展还开放了一个免费公共 API允许第三方应用读取视频的点踩数据但有明确的约束。5.1 使用限制归属Attribution任何使用该 API 的项目都必须明确标注并附上 returnyoutubedislike.com 的链接速率限制Rate Limiting每个客户端每分钟 100 次、每天 10,000 次。超出限制后 API 返回429状态码表示你的应用应当暂停请求back off。5.2 基础信息基础 URLhttps://returnyoutubedislikeapi.com端点清单Swaggerhttps://returnyoutubedislikeapi.com/swagger/index.html可交互式查看全部可用端点与参数定义。扩展自身的请求正是复用这套 API——config.js 中的PROD_API_URL与上面一致getApiEndpoint()负责拼接端点路径因此你阅读扩展源码就等于在阅读 API 的官方客户端实现。5.3 获取投票数/votes端点请求获取指定 YouTube 视频 ID 的点踩数据GET /votes?videoIdkxOuG8jMIgI用curl调用示例curl https://returnyoutubedislikeapi.com/votes?videoIdkxOuG8jMIgI响应示例READMEru.md 给出的典型响应JSON{ id: kxOuG8jMIgI, dateCreated: 2021-12-20T12:25:54.418014Z, likes: 27326, dislikes: 498153, rating: 1.212014408444885, viewCount: 3149885, deleted: false }对照英文版 README.md 的最新响应其中新增了rawDislikes、rawLikes字段响应字段的完整语义如下字段类型含义idstringYouTube 视频 IDdateCreatedstring (ISO 8601)该条记录写入数据库的时间likesnumber估算出的点赞数dislikesnumber估算出的点踩数核心数据rawDislikesnumber从扩展用户样本中采集到的原始点踩数仅最新 API 返回rawLikesnumber从扩展用户样本中采集到的原始点赞数仅最新 API 返回ratingnumber点赞/点踩比例评分viewCountnumber视频观看数deletedboolean该视频数据是否已被标记删除rating字段与扩展内部的星级渲染逻辑对应state.js中注释提到createStarRating(response.rating, isMobile())当前版本暂时禁用说明服务端在返回数据前已经完成了比例计算。错误处理404 Not Found请求的 YouTube 视频 ID 在数据库中不存在从未被归档或采集过400 Bad RequestvideoId格式不正确不是合法的 YouTube 视频 ID。在你的应用中应当对这两种错误码与429分别处理400通常意味着参数错误需要修正请求404表示该视频暂无数据可做降级展示429则要求实现退避重试如指数退避。六、关于隐私与安全针对用户对扩展收集了我的观看行为吗的顾虑Docs/FAQru.md 明确指向安全问答文档 Docs/SECURITY-FAQ.md 获取详细说明。同时从源码层面可以看到项目在隐私上的克制投票上报可通过disableVoteSubmission一键关闭默认disableLogging: true不输出调试日志扩展清单 manifest-chrome.json 中权限最小化——仅申请storage权限host_permissions只覆盖youtube.com与returnyoutubedislikeapi.com。七、总结你可以从中获得什么作为开发者阅读 Return YouTube Dislike 这个项目有三层收获API 消费者视角/votes端点请求简单、响应结构清晰、限制明确适合做内容质量评估、视频推荐过滤等场景的数据源——只需遵守归属与限速要求扩展工程视角Extensions/combined/src/展示了如何用选择器配置 MutationObserver 状态机对抗一个高频变化的外部站点YouTube其menu-fixer.js、bar.js的 DOM 兜底策略值得借鉴数据科学视角用归档 用户样本外推 观看/点赞比估算组合方案替代被移除的官方数据是一个真实且可复现的冷启动数据估算案例。如果你希望进一步深入推荐按以下路径阅读仓库源码先读 Docs/FAQru.md 了解业务规则再读 Extensions/combined/src/state.js核心数据流与 Extensions/combined/src/events.js交互状态机最后配合utils.spec.js等测试文件验证你对各工具函数的理解。【免费下载链接】return-youtube-dislikeChrome extension to return youtube dislikes项目地址: https://gitcode.com/gh_mirrors/re/return-youtube-dislike创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表