【JavaScript】YouTubeのリストページにある動画タイトルとURLがほしい

Youtubeに関する作業メモです

※2025年7月末時点

利用シーン

AI「Youtube Data API を使いましょう」

私「いやそこまで本格的じゃなくて良い」という時

やり方

リストページを開き、一番下までスクロールしたら
ブラウザの開発者ツールを開いて、下記をConsoleに打ち込んで実行

(async () => {
    const anchorTags = [...document.querySelectorAll('a[href^="/watch"]')];

    const videoData = {};
    anchorTags.forEach(a => {
        const href = a.getAttribute('href');
        const title = a.getAttribute('title') || a.textContent.trim();
        
        const videoIdMatch = href.match(/v=([\w\-]{11})/);
        if (videoIdMatch) {
            const videoId = videoIdMatch[1];
            videoData[videoId] = title;
        } else {
            const shortMatch = href.match(/^\/watch\?([\w=&]+)/);
            if (shortMatch && href.length < 100) {
                const urlParams = new URLSearchParams(shortMatch[1]);
                const v = urlParams.get("v");
                if (v && v.length === 11) {
                    videoData[v] = title;
                }
            }
        }
    });

    let output = "";
    for (const [videoId, title] of Object.entries(videoData)) {
        const embedUrl = `https://www.youtube.com/embed/${videoId}`;
        output += `${title}\n${embedUrl}\n\n`;
    }

    console.log(output);
})();

コンソールに、タイトルとURLが出ます。

埋め込みURLではない？

/embed/の部分を /watch/ にする

URLだけ欲しい？

${title}\nを削れば良いです。