chrome extensionでページのSEOタグ情報をポップアップで表示
chrome extensionでページのSEOタグ情報をポップアップで表示
今回の目的
- chrome extensionのContentScript, EventPage(backgroundPage), BrowserActionを用いて、現在閲覧しているhtmlの情報をポップアップで表示する
chrome extensionについて
概要
- chrome extensionとはgoogle chromeの拡張機能のこと
公式サイト
- extensionの公式ストア
- 開発者用サイト(英語のみ)
参考ページ
概念【重要】
- 今回用いた機能の概念を書きに記す。この概念を理解するのと、それぞれの相互作用のさせ方を理解するのにかなり時間がかかった
ContentScript
- Content Scripts - Google Chrome
- 見ているページがロードされたときに、一緒に読み込ませるjs, cssを指定できる
- ページの中に無理やり読み込ませるので、jqueryのバージョン違いや、bootstrapなどを読み込ませるといろんな定義が上書きされて、そのページのjsが動かなくなったり、デザインが崩れたりする。
- MVCモデルでいうと、Modelに該当するもの（今回の場合は）
EventPage
- Event Pages - Google Chrome
- ちょっと前はBackgroundPageが主流だったが、その低コスト版。extensionの核となるもの。公式ページのBackgroundPage欄にも「EventPage 使ったら？」って書いてある
- ContentScriptからBrowserActionの挙動は変更できないし、BrowserActionから、見ているページのDOMにアクセスできないので、それを仲介する存在。
- イベントを発生させたり、拾ったりするのは、基本的にここで行う。
- ContentScriptとのやりとりはsendMessageを用いて行う Message Passing - Google Chrome
- BrowserActionのpopup.htmlファイルとのやりとりは、LocalStorage(or WebStrage)を用いて行う
- MVCモデルでいうと、Controllerに該当するもの（今回の場合は）
BrowserAction
- chrome.browserAction - Google Chrome
- ブラウザのアドレスバー横に表示されるアイコン
- popup用htmlファイルが設定されていれば、アイコンをクリックしたときに、ポップアップが出る
- MVCモデルでいうと、Viewに該当するもの（今回の場合は）
注意事項
- EventPageとpopup用htmlファイルの間をsendMessageでやり取りすることはできない
- BrowserActionがクリックされたときにおこるchrome.browserAction.onClickedイベントは、既にpopupファイルが存在する場合は発生しない(つまり、クリックするたびにイベントを発生させたい場合は、ポップアップ表示の度に、popupファイルの設定を初期化する必要がある)
- 今まで開発をしたことがある人は、最近いろいろ変わったので注意が必要（ネットに落ちてる情報も間違ってることがある）
- popup用htmlなどでscriptタグは使えなくなった（外部ファイル化する必要がある）
- ポップアップを指定するときのオブジェクトのキーがpopup => default_popupに変わった
- sendRequestはsendMessageに変わった
作業 (12h)
- ContentScriptを用いてDOM情報を抜き出して表示する(2h) => bootstrapも読み込ませたら、デザインがくずれたので、違う方法が必要に
- いろいろ調べて、EventPageとBrowserActionを使えばよいことを知る(3h)
- ドキュメントを読む(2h)
- 色々試す(3h) => ContentScript <=> EventPage, EventPage <=> BrowserActionのやり取りの方法に躓く
- 実装(2h) => できるだけrailsっぽくしてみた
