YouTubeなしではもう生きられません、火頭です。
それでも広告などはうっとうしいので、ちょいちょい手を入れさせてもらっております。
今日はアノテーション消します。
アノテーションとは、動画の画面上に出てくるメッセージ機能ですが、
まぁ基本邪魔なので消えて頂きましょう。こういうの↓
これを消すには設定ボタンをクリック
すると設定一覧が出ます。
アノテーションがオンになっているので、クリックしてオフにします。
そして設定ボタンを再度クリックしてメニューを閉じます。
これだけでクリック３回ですよ。動画が変わるたびに復活するし、また３クリック。
私、これは我慢できません！！
この手のクリック操作モノは 要素.click() でプログラムにクリックを代用してもらえればコトが済みます。
あとは要素を絞る作業。
クロームのブラウザでは Shift + ctrl + j でコンソール画面が開けます。
怖い見た目ですが、矢印の箇所をクリックして、ページ上をクリックすれば、その要素の情報を引き出せます。
YouTubeの設定ボタンを押してみると、ご丁寧にハイライトしてくれます。
<button class="ytp-button ytp-settings-button" aria-haspopup="true" aria-owns="ytp-id-17" style="" title="設定"> 以下略
こういう風にHTML情報が引き出せます。設定ボタンにはこういう情報が付いていることがわかりました。
最初からアノテーションボタンの要素を調べて、それをクリックしてオフにすれば済む話ですが、面白いことに、設定ボタンが押されていない状態では直接アノテーションボタンにアクセス出来ないんですよね（メニューが表示されていないので）。
そこで手動クリックよろしく、まず設定ボタンを .click()してメニューボタンを開きます。
button class="ytp-button ytp-settings-button" これがボタンの名前（クラスネーム）なので getElementします。ClassNameの場合はリストで返ってきます。
var showMenu = document.getElementsByClassName('ytp-button ytp-settings-button');
showMenu[0].click();
こんな感じ、設定ボタンを自動クリックしてくれます。
画面上でアノテーションボタンが露出しましたのでgetElementしていきます。
またコンソール画面でアノテーションの要素名を調べます。
ご存知の通り、YouTubeの設定メニューには複数の機能があります。
「アノテーションボタン」という独自の名前のものはなく、メニューボタン１、２、３…のような扱いをされていました。
そこでそれらのボタンの元になっている ytp-panel-menu という要素をgetElementして、アノテーションボタンが割り当てられている箇所を引き出します。
var _annotation = document.getElementsByClassName('ytp-panel-menu');
var annotation = _annotation[0].childNodes[1];
これでアノテーションボタンの要素が取得できました。
現在、機能がオンかオフかを調べます。
var isTrue = annotation.getAttribute("aria-checked");
aria-checkedというattributeが割り当てられており、true / false で表現されていて、これで機能のオンオフがわかりました。
これがオンの状態ならクリックしてオフにする。
if(isTrue == 'true'){
annotation.click();
}
trueが文字列でビビりました 笑
なぜエラーが出たのかしばらく気づかなかった。
とにかく、これでアノテーションはオフになりました。
設定メニューが開きっぱなしなので、閉じて終了。
showMenu[0].click();
以上、３０分くらいで済みました。
過去の３クリックをトータルしたら何クリックよ？
快適です。
これだけの拡張機能では寂しいので非公開。
もちろん同じやり方で他のメニューボタンもいじれるし（自動再生オフとか）
以前作った画質の自動設定と組み合わせてもいいんですけどね。
そういう拡張機能はもっと高いレベルでまとめられて公開されているのでわざわざ作らない。
ただ有名な拡張機能は広告ポップアップしたり、容量あったりで気持ち悪いんですよね。
なんかよからぬ通信や悪さするんじゃないかと思って 失礼。
