【Chrome拡張機能】YouTubeとのアドブロック戦争 その２
さて、機能を作ると言っても公開しないので、あくまで個人的な楽しみです。
（グーグル先生に睨まれてはカナワン）
どのようにアドブロックするかというと、結局は自動クリック方式にします。
「自動で広告消すボタン押してくれる君」です。
こういうことやるには対象ページのHTMLをよく調べないといけないので面倒なんですが、根気よくすれば誰でも見つけられます。
ブラウザのコンソール画面を開いて、広告のHTML要素を調べる。
ものすごい木構造（親要素と子要素がある）になっているので、広告を消すボタンに辿りつくまで、
上の方の要素.childNodes[0].childNodes[2].childNodes[0]...
の様に階層を潜って調べることになります。
で、ボタンに辿りついたら、
ボタンの要素.click()
これでなんとちゃんとボタンを押したことになるわけです。
※修正、要素の特定にはquerySelector を使いましょう
ただこういうやり方すると、グーグルがページのデザインを更新した時に動かなくなります（結構頻繁に更新されます）。そして木構造を追っかけて行くのは本当に大変。
なのでもうちょいマシなやり方、再帰を使って実装。
クラス名やid名で要素を取得・特定するのは仕方ないので、まず解析の起点になる要素のクラスネームを保存。getElementsByClassNameします。←リストで帰ってくるので注意
特定する要素の名前を、あらかじめ変数にリストアップしておく、今回はボタンのクラスネームです（広告の種類によって別々の名前がついています）。
「解析の起点になる要素」を再帰関数に渡します。再帰関数内では、以下の様に処理されます。
・まず要素のタグをチェックして目的のタグでなければ終了。今回はDIVとSPANタグが目的のボタンでした。
↓
・要素のクラスネームをチェック → 変数に保存しておいた「ボタンの要素名リスト」と indexOfをかけて該当するか調べ、該当すればそれが目的の要素なので、要素を return する。
↓
・上の処理に該当しなければ、要素にchildNodes （childrenでも良し）がいるか調べる。いるとしたら複数存在する場合が多いので、ループで全て再帰関数に渡す
こんな感じです。イメージしにくいかも知れませんが、現実世界に例えると．．．
再帰関数君は事件の犯人を調べている。指名手配リスト的なものを持っていて、容疑者を一人一人部屋に呼んで調べている
１ まず再帰関数君が、見た目やら性別で事前チェックする → 明らかに犯人と違うと時間の無駄なので解放
２ 解放にならなかった場合は、次に再帰関数君があなたの名前を聞く → 指名手配されている名前なら処理終了
３ 違ったら、子供がいるか聞かれる → いなければ解放、いれば子供を一人ずつ部屋に呼ぶように言われる
４ あなたは解放され、あなたの子供Ａが部屋に来て、１に戻る
これだけです。
子供、と書きましたが、その子供にも子供がいる可能性がありますので、一人一人調べていくわけです。
こういうの一度作っておくと、他の機能でも使いまわせて便利かもね。
検索にヒットさせる要素リスト → 今回はDIVとSPANでしたが、設定可能にする
特定する要素名 → これはページリニューアルの際に崩れる可能性はある、要素名が変わるとアウト。
あ、ちなみに広告がページに現れる瞬間というのを検知する必要があるのですが、これは MutationObserver という機能で実現します。
上に書いた「解析の起点になる要素」をMutationObserverに渡しておくと、要素に何らかの変更があった場合に通知してくれますので、再帰関数の発火に使います。
完成した機能を実際に使ってみると面白いです。
普通の広告は目に見える前に消えるようで、ストレスがない。
スキップボタンありの動画広告は「5...4...3...」とカウントダウンは見ることになりますが、０になった瞬間に消えます。
以上。文字ばっかで疲れた。
（グーグルさん、怒んないで）
