新年一発目の拡張機能です。
この機能、前から作ろうと思ってたんですよね、年始のヒマに合わせて作ってしまいます。
Googleの画像検索した時に、Youtubeとかの動画のサムネが混ざったりして、うっかり動画サイトに飛んで後悔することってないですか？ え？ない？ あぁそう。
ということで、グーグル画像検索フィルターを作ってみました。これ中々良いですよ。他の検索機能に適応しても良いんですし。
グーグルの画像検索をした時に、ＵＲＬを良く見てみると「tbm=isch」という文字列が紛れ込んでいます、動画ならtbm=vidですので、カテゴリーごとに決まっています。
現在のＵＲＬを window.location.href で取得して、上の「tbm=isch」が入っていたら機能を作動させます。
次は画像にくっついている要素をリストとして取得。こういうのが大変なんですよね。
画像検索をすると 上の様な見た目になります。そこでブラウザのコンソールを開いて、一つ一つの要素がどのような構造で格納されているか調べ、ＵＲＬを取得する。
調べた結果、全ての画像を格納している大きいＤＩＶタグには「rg_s」というＩＤが振られているので、まずこれを取得して、その「子ノード」をリストとして持っておく。
var picbox = document.getElementById('rg_s');
var picbox_childNodes = picbox.childNodes;
↑ 別に分けて書かなくてもいいんですけどね。
まだこのリストの中には無駄な要素も入っていたので、ループかけて必要な要素だけを残し、次はＵＲＬが入っている要素を絞り込む。
ここでつまづいたのは、なんとそれぞれの画像に設定されているＵＲＬ（href）はページを読み込んだ時点では公開されておらず、マウスオーバーした時に公開されるという仕様。ＨＴＭＬ階層の深さも相まって、自分が間違った要素を指定しているのだとばかり思い、気づかなかったです。
じゃ、ＵＲＬ取得できないじゃん。ってことで別の情報を使うことに。
こういうページ情報は取得できるので、この文字列を使います。
なんというか、先ほどの要素の階層を下って行った所に格納されています。
こんな感じ ↓
要素のリスト[i].childNodes[1].childNodes[1].innerHTML
煩雑でしょう。これだからＨＴＭＬはキライです。
ま、とにかくこれで画像ひとつひとつのタイトルやＵＲＬが取得できました。
次は、画像検索の時に出てきて欲しくないサイトのリスト、つまりフィルターを作っておきます。パッと思いつくのはYou○ubeやTw○tter あたりでしょうか、いや失礼。
あとは総当りでＵＲＬを検証して、フィルターに登録した文字列と一致した要素を消します。こういうのはループ内ループで総当りします。
要素のマッチには、
if(要素リスト[i].indexOf(フィルターの言葉) !== -1)
こんな感じでindexOfを使いました。
フィルターに登録した言葉がヒットした場合は、その位置情報が返ってきます、ヒットしなかった場合は-1が返って来るのでそれで判別します。
で、要素.style.display = 'none'; で消えます。バイバイ。
まぁ完全に消してしまったら不便なこともあるでしょうから、ハイライトしておく、とかにした方が良いかと思いました。
以上。
画像検索だけに絞らず、動画検索にも良いですね。
重たいから開きたくない動画サイトってあると思うので。
