如何改变Youtube的颜色喜欢按钮？

Question

问题

我试图将Youtubes按钮的颜色从默认颜色更改为蓝色：

​

​

我很容易地用浏览器开发工具做到了这一点：

​

​

通过控制台

但是，现在我正在尝试以编程的方式来实现它，例如通过console。但是，我不知道要正确地输入什么来正确地识别 the Like-按钮。

我试过以下几种方法，但都没有用，根本没有效果：

document.querySelector('.style-scope .ytd-toggle-button-renderer')
    .querySelector(".style-scope .yt-icon")
    .getElementsByTagName("path")[0]
    .style.color = "blue"

什么是正确的方式来识别相似的按钮和改变它的颜色？

详细信息

“相似”按钮的编码方式如下：

<yt-icon-button id="button" class="style-scope ytd-toggle-button-renderer style-text" touch-feedback="">
    <button id="button" class="style-scope yt-icon-button" aria-label="Ich mag das Video (wie 11.598.005 andere auch)" aria-pressed="false">
        <yt-icon class="style-scope ytd-toggle-button-renderer">
            <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon">
                <g class="style-scope yt-icon">
                    <path ...>...</path>
                </g>
            </svg>
        </yt-icon>
    </button>
    <yt-interaction id="interaction" class="circular style-scope yt-icon-button">
        <div class="stroke style-scope yt-interaction">
        </div>
        <div class="fill style-scope yt-interaction">
        </div>
    </yt-interaction>
</yt-icon-button>

我想要更改的实际按钮是这一行

<yt-icon class="style-scope ytd-toggle-button-renderer">

我正在使用最新的Firefox (91.0.2)桌面版本。

Answer 1

Youtube可能会根据各种因素改变布局。在Firefox上，这似乎是可行的：

document.querySelectorAll('#menu-container #top-level-buttons-computed #button > yt-icon > svg > g > path')[0].style.color="blue";

Answer 2

试着像这样

document.querySelector('.style-scope > .yt-icon > path")[0]