iOS9のSafariでコンテンツブロック機能が登場し、サイト上の広告を非表示にするアドブロックの存在が世に広まりました。 これを機にCrystalを始めとする数々のアドブロッカーアプリが登場しています。
PCブラウザでもAdblock Plusを始め、ブラウザの拡張機能で広告を非表示にして表示速度を上げるツールが出ています。
しかしユーザーにとっては広告は消したいものかもしれませんが、私の仕事柄、逆に広告を強調してくれるツールの方が調査の時どこに広告があるのかパッとわかって嬉しいです。
そこで私は考えました。
広告を特定して隠せるなら、逆に目立たせる事もできるのでは?
ということで広告の場所がわかるツールが作れたらかなり運用が楽になるだろうと思い、Chrome拡張機能でアドブロッカーに対抗してアドチェッカーを作ってみました!
今回は弊社のアドサーバF1Eで配信された広告がわかる拡張機能を作りました。 (今後弊社アドサーバF1シリーズ全てを確認できるよう対応予定なので「F1 Checker」と名付けました。)
Chrome拡張機能の開発ってどうやるの?
今回私も初めてChromeの拡張機能に挑戦してみましたが、とても簡単です。 なぜなら、Chromeの拡張機能はHTML、CSS、JSを入れた単なる圧縮フォルダだからです。 自分のローカルにあるフォルダをChrome拡張機能のページにアップロードすればすぐに使えます。
Chrome拡張機能開発で必ず必要な manifest.json という設定ファイルがあります。 このファイルには、
- アイコンはどのファイルを参照するか
- アイコンをクリックした時に参照するhtmlはどれか
- どのサイトにアクセスした時に発動させるか
- バックグラウンドで動かすjs
- ページ読み込み完了後に動かすjs
などの設定をJSON形式で書きます。
manifest.jsonを見てみよう
まず今回私が作ったF1 Checkerのフォルダ構成は以下です。
F1Checker ├── css │ └── f1Check.css ├── images │ └── icon │ └── icon_16.png │ └── icon_48.png │ └── icon_128.png ├── js │ ├── background.js │ ├── configcheck.js │ └── f1Check.js ├── manifest.json └── popup.html
ではmanifest.jsonの中身を見てみましょう。
[javascript] { "manifest_version": 2, "name": "F1 Checker", "description" : "This extension find the AD delivery from F1.", "version":"1.0", "icons": { "16": "images/icon/icon_16.png", "48": "images/icon/icon_48.png", "128": "images/icon/icon_128.png" },
"permissions":[ "http:///", "https:///" ],
"background": { "scripts": ["js/background.js"] },
"browser_action": { "default_icon": "images/icon/icon_16.png", "default_title": "F1 Checker", "default_popup": "popup.html" },
"content_scripts": [ { "matches": [ "http:///", "https:///" ], "css": ["css/F1Check.css"], "js": ["js/F1Check.js"] } ] } [/javascript]
2〜10行目
"manifest_version"はマニフェストファイルのバージョンを示しています。現在は2です。 続いてChrome拡張機能ページに表示するツール名、説明、この拡張機能のバージョン、アイコンを指定しています。
12〜15行目
"permissions"は使用するchrome.APIや適用範囲を書きます。 ここでは全ページ対象なので"http:///"、"https:///"を書いています。
17〜19行目
"background"では、バックグラウンドで動作させるjsファイルを指定します。
21〜25行目
"browser_action"はブラウザ右上に表示させるアイコンの設定です。 アイコンとなるファイルの場所、ホバーした時に出る説明、押した時に表示させるhtmlファイルを指定します。
27〜36行目
"content_scripts"は開いたページに対するアクションを書きます。 "matches"には適用範囲、"css"は開いているページに追加挿入するcss、"js"にはページ読み込み完了後に実行させる処理を書きます。
F1 Checkerの仕様
①F1 CheckerをONにする
まずはアイコンのポップアップでこのツールのON/OFF設定を保存します。
保存先はローカルストレージを使い、ユーザーのローカルにON/OFF設定を保存します。 ローカルストレージは基本的に見ているページのドメイン単位で保存されますが、 popup.htmlでの保存先はchrome-extensionという名前の付いたファイルに保存されます。 ※下から3行目のファイル
[shell] -rw-r--r-- 1 taisuke staff 0 1 20 12:38 https_www.google.co.jp_0.localstorage-journal -rw-r--r-- 1 taisuke staff 6144 1 20 12:38 https_www.google.co.jp_0.localstorage -rw-r--r-- 1 taisuke staff 0 1 20 12:38 https_plus.google.com_0.localstorage-journal -rw-r--r-- 1 taisuke staff 4096 1 20 12:38 https_plus.google.com_0.localstorage -rw-r--r-- 1 taisuke staff 0 1 20 12:43 chrome-extension_jahdbkdfljhpifdemlokhdmggdalkdmd_0.localstorage-journal -rw-r--r-- 1 taisuke staff 3072 1 20 12:43 chrome-extension_jahdbkdfljhpifdemlokhdmggdalkdmd_0.localstorage -rw-r--r-- 1 taisuke staff 0 1 20 12:45 https_www.youtube.com_0.localstorage-journal -rw-r--r-- 1 taisuke staff 5120 1 20 12:45 https_www.youtube.com_0.localstorage [/shell]
これは"browser_action"や"background"に指定したjs内で使うことができます。
②F1配信の広告枠があるページへ行く
以下のようなデモページを作ってみました。
F1 Checkerは読み込み完了後に発動しますが、これは発動前です。 読み込みが完了するとcontent_scriptsに書いた"F1Check.js"が発動します。
③ON/OFF設定の確認
F1Check.jsからはchrome-extensionのローカルストレージを参照できないので、background.jsにローカルストレージの内容取得を依頼して返却してもらう必要があります。 つまり F1Check.js→background.jsへメッセージを送信 background.jsでchrome-extensionのローカルストレージからデータ取得 background.js→F1Check.jsへデータ返却 というやり取りが必要ですが、これを実現するのがchrome.runtimeというバックグラウンドとのメッセージ通信ができるAPIです。
F1Check.js
[javascript] chrome.runtime.sendMessage({method: "getLocalStorage", key: "config"}, function(response) { if (response.data == "ON") { F1Check(); } }); [/javascript]
background.js
[javascript]</pre> <pre>chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.method == "getLocalStorage") { sendResponse({data: localStorage[request.key]}); } });</pre> <pre>[/javascript]
これによりON/OFF設定をbackground.jsを使って取得します。
④ドメインが一致したら広告枠の上にdivタグを挿入
F1配信の広告枠がどこにあるかはaタグのドメインで判断できます。 設定がONだったら、以下の関数を実行します。 ページ内の全てのaタグを取得(開いているページのDOMにアクセスできます) ↓ aタグを1つずつ評価してhrefに書かれたurlにF1Eドメインがあるか確認 ↓ もしドメインがあればaタグの前に"F1E配信 広告枠"と書かれたdivタグ挿入。
わかりやすいようにcssのanimationを使って青→白→青と点滅するようにしてみました。
作った拡張機能を共有する
作った拡張機能は圧縮して他の人に共有する事ができます。 拡張機能のページから、「拡張機能のパッケージ化」を選択します。
作ったフォルダを選択します。 1回目のパッケージ化では秘密鍵ファイルは空欄で大丈夫です。 「拡張機能のパッケージ化」をクリックすると、デスクトップに以下2つのファイルが作成されます。
この内、.crxの方のファイルを誰かに共有すれば、その人は拡張機能ページに.crxファイルをドラッグ&ドロップするだけで使えるようになります。
もう一つの.pemファイルは、秘密鍵です。これは作成者のみが持ち、2回目以降のパッケージ化の際に、先ほど空欄にした箇所に指定することで、作成者以外が変更できないようになっています。
まとめ
思った以上に簡単に理想が叶えられてChrome拡張機能の便利さに驚きました!
そして目的だった調査時間は短縮できるようになりましたし、F1Eをご利用頂いているお客様のサイトの広告を隅々まで把握できるようになり、普通にネットサーフィンしてる途中に、あっここにもF1E使ってるんだ、と気づきを得ることもできました。
チームの皆さんにも共有して評判がよかったので、更にバージョンアップしていきたいと思います。