如何在Chrome扩展中通过DevTools修改YouTube点赞SVG图标颜色？

你的问题出在选择器优先级不足以及YouTube点赞组件的动态样式覆盖上。直接修改:root *下的--yt-spec-text-primary变量，会被YouTube组件内部更具体的CSS规则和点赞时的动态样式重置覆盖，所以只能短暂生效。

以下是针对性的CSS代码，直接放在Chrome扩展的content script里即可实现需求：

1. 未点赞状态的绿色轮廓 #

/* 未点赞时的点赞按钮绿色轮廓 */
ytd-toggle-button-renderer[data-toggle-button-style="LIKE"][is-icon-button] .yt-spec-icon-shape--icon-background {
  color: #1cae23 !important;
}

2. 点赞后的绿色填充（覆盖默认白色） #

/* 点赞状态下的图标填充色，强制覆盖动态样式 */
ytd-toggle-button-renderer[data-toggle-button-style="LIKE"][is-icon-button][aria-pressed="true"] .yt-spec-icon-shape--icon-fill,
ytd-toggle-button-renderer[data-toggle-button-style="LIKE"][is-icon-button][aria-pressed="true"] .yt-spec-icon-shape--icon {
  fill: #1cae23 !important;
  color: #1cae23 !important;
}

3. 修复动画结束后变回白色的问题 #

/* 自定义点赞动画的最终颜色，替换默认的白色过渡 */
@keyframes like-animation {
  to {
    fill: #1cae23 !important;
  }
}

ytd-toggle-button-renderer[data-toggle-button-style="LIKE"][is-icon-button][aria-pressed="true"] .yt-spec-icon-shape--icon-fill {
  animation: like-animation 0.2s forwards !important;
}

额外注意事项 #

• 确保Chrome扩展的content script配置中，run_at设置为document_end或document_idle，保证样式能作用到动态加载的YouTube元素；
• 如果页面切换后样式失效，可以用MutationObserver监听点赞按钮的生成，动态注入样式。

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