風柳メモ

ソフトウェア・プログラミング関連の覚書が中心

Google画像検索AutoPagerにリファラ消し機能搭載(version 0.0.3)

GIS_AutoPagerで、リファラ(Referer、Referrer)の関係で画像のプレビューが出来ないことが多いので、リファラを消す機能を搭載しました(version 0.0.3)。
これで、かなりプレビューできる画像が増えるはず*1
他に、Autoモード時の先読み機能追加と、画像単体/元ページのURL取得時のバグフィックスなど。

Google Chrome用・Google画像検索AutoPager
 https://chrome.google.com/extensions/detail/imblafkbefabedmgomoemjbmennpcdkb

ブラウザに(表示出来なかった時の)キャッシュが残っていると表示されないままとなるので、試す前にキャッシュをクリアすることをお薦めします。
Google Chromeの場合、「Google Chromeの設定」(右上のスパナマーク)→オプション(O)→"高度な設定"タブ→[閲覧履歴データの消去...]ボタンで、"□キャッシュ"にのみチェックし、[閲覧履歴データを消去する]で出来ます。

Firefox(Greasemonkey)/Opera版も修正しているので、スクリプトだけ更新して下さい。
いちからインストールする方はこちら。

インストール:GIS_AutoPager.user.js

リファラの偽装は困難なので、自サイトからのリファラが無いと表示されないような画像は無理ですが…。

覚書

参考にしたのは『Chromeで読み込みに失敗した画像についてリファラを消して再読み込みを試みる方法 - os0x.blog』。
要は、IFRAMEのsrcに、dataスキームでHTMLを挿入すれば("data:text/html,HTML本体")、そのHTML内の要素からのリクエストにリファラが付かなくなるということなので、表示したい画像のURLを指定したIMG要素をHTML本体に埋めこんでやればよい。
問題は、IFRAME内のIMG要素が読み込まれたタイミングをどのように知るか、ということで、

方法1
  1. 親 document で DOMNodeInserted イベント監視。
  2. IFRAME内IMG要素の onload/onerror のタイミングで、親ドキュメント(parent.document)下にIMG要素を移動。

この方法はFirefoxおよびOperaでは可能だったのだが、Google Chromeの場合は parent.document が undefined となっていて実現不可。

方法2

やむを得ず、Google Chromeの方では id:os0x さんの記事と同様に postMessage()を使う方法を取った。

  1. 親 window *2で message イベント監視。
  2. IFRAME内IMG要素の onload/onerror のタイミングで(onloadであれば、ブラウザのキャッシュに画像データが入る)、親ウィンドウにparent.postMessage()で通知*3
  3. その後、Image()で作製したIMG要素に、IFRAME内IMG要素と同じsrcを指定してやれば、画像データがキャッシュから読み込まれる。

という仕組み。


キャッシュを利用するような不確実な方法をとらず、os0x さんのようにIFRAMEをそのまま表示すればいいじゃない、と思われそうだが、GIS_AutoPager の場合は画面の大きさに合わせて画像サイズを調整する機能があるため、ちょっと面倒なんでこのようにした。


また最初にIMG要素で読んでonerrorでだけIFRAMEを使えば、という突っ込みもありそうだが、それだとIFRAME内のIMG要素が(エラーがでた)キャッシュを読んでしまうことがあるみたいなので、最初からIFRAMEを使って読み込んでいる。
速度とリソース的にちょっとあれだが…。もっとも、速度は特にChrome使っていればそれ程気にならないレベル。

*1:fc2.comとか

*2:これはChrome拡張のコンテキストのwindow

*3:これが可能ということは、Chrome拡張で作製したIFRAMEのcontentWindowはChrome拡張のコンテキスト内にあるということか。ちなみに、contentWindow.document も undefined になっていて参照できない