YouTube に Listen On Repeat へのリンクを追加する Tampermonkey スクリプト

いちいち動画IDをコピペしていたのだけれど、そういえばインストールするだけして忘れていた Tampermonkey で楽できるのではと思い立ったので試しに作ってみた。

8/4追記

YouTube 自体にループ再生機能追加されてた。終了。

できたもの

script

// ==UserScript==
// いろいろ省略
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// ==/UserScript==

window.addEventListener('load', function(){
    'use strict';
    const videoKey = (new URLSearchParams(location.search)).get('v');
    const url = 'https://listenonrepeat.com/?v=' + videoKey
    const icon = '<svg viewBox="0 0 24 24" style="display: inline-block; color: rgb(37, 37, 37); fill: rgb(204, 204, 204); height: 22px; width: 22px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><g id="ic_repeat"><path d="M12.8110867,2.51789455 L13.3313633,1.14289591 C13.3313633,0.570087802 12.9436767,0.335891856 12.4695722,0.622203342 L8.48364464,3.03099659 C8.00962857,3.31740063 8.00962857,3.78607023 8.48364464,4.07247428 L12.4695722,6.48126753 C12.9436767,6.76767159 13.3313633,6.53338308 13.3313633,5.96057496 L12.8110867,4.65527969 C16.8643265,5.06294726 20.0442764,8.64670064 20.0442764,12.993581 C20.0442764,17.6128878 16.4532885,21.3709459 12.0393401,21.3709459 C7.62539163,21.3709459 4.03440371,17.6128878 4.03440371,12.993581 C4.03440371,10.4516756 5.1190947,8.07602158 7.01020563,6.47562091 C7.44707172,6.10590604 7.51482621,5.43571685 7.16163603,4.97852564 C6.8083574,4.52133442 6.16787405,4.45042767 5.73109641,4.82004997 C3.3598662,6.82654456 2,9.80573916 2,12.993581 C2,18.7868296 6.50363911,23.5 12.0393401,23.5 C17.5750411,23.5 22.0786802,18.7868296 22.0786802,12.993581 C22.0786802,7.47211077 17.9875827,2.93167159 12.8110867,2.51789455"></path><rect id="Rectangle" fill="none" x="0" y="0" width="24" height="24"></rect></g></svg>'

    const uiContainerSelector = '#info-contents > ytd-video-primary-info-renderer > #container > h1'

    function addUI() {
        const target = $(uiContainerSelector);
        if (target) {
            target.append('<a href="' + url + '">' + icon + '</a>');
        } else {
            setTimeout(addUI(), 100)
        }
    }

    addUI();
});

ページ読み込みを待って実行するために

Window の load イベントでトリガーすることでページ読み込みが終わったタイミングで実行できます。
はずなのですが、そのタイミングだと DOM を掴めないことがあります。起きたり起きなかったり、ログをはかせるデバッグコードを追加すると再現しなかったり、非同期あるあるな感じです。load イベントの仕様なのか YouTube の仕組みなのか。
動的に追加されているなら MutationObserver を使うのだけれども、どうもそうではなさそう……
いくつか YouTube にボタンを追加するスクリプトを見た感じでは setTimeout で適当に遅延実行したり setInterval で初期化を繰り返したりといった感じなので、それで動けばいいということなんでしょうがちょっと気持ち悪いですね。