.addEventListener('load' では早すぎる
youtubeのロゴのurlを登録チャンネルのurlに置換するのは
code:js
document.querySelector("#logo").addEventListener("click", function() {
}, false);
これで難なくできました。
ですが、同じように探索ボタンでやろうとして
code:js
document.getElementsByTagName("ytd-mini-guide-entry-renderer")1.addEventListener("mousedown", function() { }, false);
こういうコードを書くと置換されず、元のurlの場所に飛ばされてしまいます。
最初は指定するタグを間違えているのかと思いましたが、そうではなく、とてつもなくめんどくさい理由でした。
code:js
const high = document.getElementsByTagName("ytd-mini-guide-entry-renderer");
console.log(high);
これだと正常にHTMLCollectionの値が帰ってきますが、
code:js
const high = document.getElementsByTagName("ytd-mini-guide-entry-renderer").length;
console.log(high);
とすると、値が0で帰ってきます。(正しくは5)
この回答いわく、ページのロードが終わる前にjsが実行されているからwindow.addEventListener('DOMContentLoaded'で囲めばいいよ～と。
なるほど？と思ってやって見ましたがうまく行かない。
DOMではだめかと思い、document.addEveantListener('load'でも試しましたがダメ。
code:js
window.addEventListener('load',function(){
const high = document.getElementsByTagName("ytd-mini-guide-entry- renderer").length;
console.log(high);
});
ダメとはいいつつ再読み込みを繰り返しているとまれにlengthが5になることがありました。これはもやし、loadで全部読みこみが終わったあとに実行していると思いきやそうでもないのでは？と思い、単純にsetTimeoutで遅延を2000ms追加してやると確実にlengthの値が5に。やったぜ。
https://gyazo.com/80405116d8a5cfc89a2f153fa9d65c90
consoleの一番最後にでなければいけないはずなのに、早々に登場してしまってます。
js歴2日どころが、コピペだけでここまで来たので全く見当違いなことを書いている可能性が大変に高いんですが、youtubeの仕様でなにかに邪魔されている気もします。
とりあえずのところは動くんですが、すごく気持ち悪いので誰か賢い人助けて！！
そもそも、chrome拡張機能でjs追加してyoutubeいじり倒そうって考えでjsの解説してる人いないからねしょうがないね(´·ω·`) 追加
これだけやってもうまくいかない場面が出てきました。
リンクを中クリック(or Ctrl + 左クリック)するとできる新しいタブを作った場合。 このとき、開いたタブにアクティブするのではなく、今見ているタブがアクティブのまま新しいタブを開く。
問題は、youtubeでは新しいタブを開いたときと別に、タブがアクティブになったときにもなにかを読み込んでいるらしいということ。
そのため、さっき問題になったばかりのページのロードが終わる前にjsが実行する事件が起こってしまってます。
ゴリ押し解決策
先程はaddeventlistener('load'をしてからsetTimeoutで遅延を追加するということをやりましたが、それに加えて、タブがアクティブになったかを確認するイベント、addeventlistener('focus'をしてからsetTimeoutをするコードを追加してみました。
code:js
window.addEventListener('load',function(){
setTimeout (function(){
document.getElementsByTagName("ytd-mini-guide-entry-renderer")1.addEventListener("mousedown", function() {
}, false);
},2000);
}, false);
window.addEventListener('focus',function(){
setTimeout (function(){
document.getElementsByTagName("ytd-mini-guide-entry-renderer")1.addEventListener("mousedown", function() {
}, false);
},2000);
}, false);
jsってこんなコードになるものなんですかね…(；´∀｀)
ちょっと楽しくなってきたのでしっかり勉強して美しい処理を考えたいものです。