如何修改YouTube点赞按钮颜色？浏览器控制台代码实现相关问题

解决方案 #

你之前的代码失效主要是两个核心问题：

• 选择器语法错误：.style-scope .ytd-toggle-button-renderer 中间的空格代表后代选择逻辑，即寻找class为style-scope的元素的后代中class为ytd-toggle-button-renderer的元素，但实际上这两个类是挂载在同一个元素上的，需要去掉空格合并写为.style-scope.ytd-toggle-button-renderer才会命中目标元素
• 元素选择路径冗余，依赖多层DOM结构，一旦YouTube调整页面结构就会失效，推荐用更稳定的定位逻辑

控制台可用的正确代码 #

直接复制以下代码到控制台运行即可生效：

// 精准定位第一个操作按钮（点赞按钮）的图标，避免和点踩按钮混淆
const likeIcon = document.querySelector('ytd-toggle-button-renderer:first-of-type yt-icon');
// 直接修改颜色，SVG路径默认继承父元素的currentColor，不需要单独修改path属性
likeIcon.style.color = 'blue';

// 特殊情况如果上述代码不生效，直接修改SVG填充属性即可
// likeIcon.querySelector('path').style.fill = 'blue';

补充说明 #

YouTube是单页应用，切换视频后页面会重新渲染DOM，修改的样式会重置。如果需要长期保持效果，可以搭配油猴脚本使用，在脚本中添加DOM变更监听，每次页面加载新内容时自动重新设置颜色即可。

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