YouTubeのミニサイドメニューに追加もしくは変更

Question

実現したいこと

• YouTubeのミニサイドメニューに後で見るを追加もしくはマイページを後で見るに変更

前提

Violentmonkeyを使ってます
他のボタンと同じようにアイコンとテキストを表示させたい

試したこと

JavaScriptで以下のコードを試したりもしましたが後で見るが縦書きになるなどうまくいきませんでした

(function() {
	'use strict';

	function addWatchLaterLink() {
		const offlineEntry = document.querySelector(
			'ytd-mini-guide-entry-renderer[aria-label="マイページ"]');
		if (offlineEntry && !document.querySelector('a[href="/playlist?list=WL"]')) {
			const link = document.createElement('a');
			link.href = '/playlist?list=WL';
			link.textContent = '後で見る';
			link.style.cssText =
				'padding: 10px; font-size: 10px; color: #fff; text-decoration: none; display: flex; align-items: center;';

			// アイコンの追加（SVGデータURLを使用）
			const icon = document.createElement('img');
			icon.src = 'data:image/svg+xml;base64,' + btoa(`
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#FFF" d="M14.97 16.95 10 13.87V7h2v5.76l4.03 2.49-1.06 1.7zM12 3c-4.96 0-9 4.04-9 9s4.04 9 9 9 9-4.04 9-9-4.04-9-9-9m0-1c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2z"/>
    </svg>`
			);
			icon.alt = '後で見るアイコン';
			icon.style.cssText = 'width: 24px; height: 24px; margin-right: 8px;';


			// アイコンをリンクの前に追加
			link.insertBefore(icon, link.firstChild);

			// リンクを挿入
			offlineEntry.parentNode.insertBefore(link, offlineEntry.nextSibling);
		}
	};

	// DOMの変更を監視するMutationObserverを作成
	const observer = new MutationObserver(function(mutations) {
		for (const mutation of mutations) {
			if (mutation.type === 'childList') {
        console.log('DOMが変更されました');
				addWatchLaterLink();
			}
		}
	});

    // ドキュメントボディの変更を監視開始
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

Answer 1

どうぞ

// ==UserScript==
// @name        New script youtube.com
// @namespace   Violentmonkey Scripts
// @match       https://www.youtube.com/*
// @grant       none
// @version     1.0
// @author      -
// @description 2024/9/5 4:55:49
// ==/UserScript==

function waitTargetElement(){
  return new Promise(resolve => {
    setInterval(() => {
      let target = document.querySelector("#items.ytd-mini-guide-renderer")
      target.querySelectorAll("ytd-mini-guide-entry-renderer").length >= 4 && resolve(target)
    }, 500)
  })
}

async function main(){
  let target = await waitTargetElement()
  target.insertAdjacentHTML("beforeend", `
    <ytd-mini-guide-entry-renderer class="style-scope ytd-mini-guide-renderer" system-icons="" role="tab" tabindex="0" aria-selected="false" aria-label="後で見る">
    <a id="endpoint" tabindex="-1" class="yt-simple-endpoint style-scope ytd-mini-guide-entry-renderer" title="後で見る" href="/playlist?list=WL">
        <icon id="icon" class="guide-icon style-scope ytd-mini-guide-entry-renderer">
          <span class="yt-icon-shape yt-spec-icon-shape">
              <div style="width: 100%; height: 100%; display: block; fill: currentcolor;">
                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true" style="pointer-events: none; display: inherit; width: 100%; height: 100%;"><path d="M14.97 16.95 10 13.87V7h2v5.76l4.03 2.49-1.06 1.7zM12 3c-4.96 0-9 4.04-9 9s4.04 9 9 9 9-4.04 9-9-4.04-9-9-9m0-1c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2z"></path></svg>
              </div>
          </span>
        </icon>
        <span class="title style-scope ytd-mini-guide-entry-renderer">後で見る</span>
    </a>
    </ytd-mini-guide-entry-renderer>
  `)
}

main()

実行結果：

Comments

[consommemiso]

回答ありがとうございます。試してみましたが表示されませんでした。
次の返事遅くなります