読者です 読者をやめる 読者になる 読者になる

techium

このブログは何かに追われないと頑張れない人たちが週一更新をノルマに技術情報を発信するブログです。もし何か調査して欲しい内容がありましたら、@kobashinG or @muchiki0226 までいただけますと気が向いたら調査するかもしれません。

Chrome ExtensionのContent Scriptsで特定のページをInjectする

Motivation

ZenhubのExtensionを入れるとGithubのページにいくつかのViewが追加される。
これはいったいどうやってるの?と気になったので調べてみた。

Content Scriptsにできること

Chrome Extensionの隅々まで読んだ訳では無いので、Content Scriptsに絞って書く。 リファレンスはこちら。

Content Scripts - Google Chrome

Content Scriptsは特定のWebページ上のコンテキストで任意のJavascriptを実行することができる機能とのこと。
もちろん、JSからDOMを操作することができる。 つまり、「ハイパーリンク化されてないURLをリンク化」したりとか、「フォントサイズ変えたり」とか、
HTMLで表示する内容を変更できる。

試しに実装してみる

試しにwww.google.co.jpのページにテキストを突っ込んでみる。 ご存じのこちらが表示されるページ。

f:id:kobashin__G:20160510014917p:plain

今回実装したmanifest.jsonとjs

chrome extensionを作成する時には、以下のファイルを用意する必要がある。

  • manifest.json
  • hoge.js
  • hoge.html(UI表示するなら)
  • hoge.css(読み込むなら)

今回は、manifest.jsonとmyscript.jsの2ファイルを用意した。

manifest.jsonのポイントはcontent_scriptsの項目。
matchesには対象となるURLを記述する。
match patternsに沿った形式で書くことで、対象を絞ることができる。
jsにはロードするjsファイルを記述する。他にも、cssやrun_atといった指定子もある。
詳しくは先のリファレンスを参照されたい。

ロードするjsでは、一緒にjQueryをロードしたので、対象となるページにおいてGoogleのロゴを探し、
ロゴの上にh3タグを挿入している。

実行する

Chrome Extensionの実行には、Extensionを登録しなければならない。
Chromeのメニューより、その他のツール>拡張機能を選択し拡張機能タブを開く。

f:id:kobashin__G:20160510020926p:plain

拡張機能タブにおいて、デベロッパーモードにチェックを入れ、「パッケージ化されていない拡張機能を読み込む」ボタンより、 先に作成したディレクトリを選択し登録を行う。

f:id:kobashin__G:20160510021110p:plain

エラー無く読み込みができていれば、下記のように登録できる。

f:id:kobashin__G:20160510021120p:plain

コードやmanifestを変更した時には、リロードボタンを押下することで、再読込を実行させることもできる。

デバッグする

今回の対象コード程度あれば、デバッグの必要もないかもしれないが、
込み入ったことをするのであればブレイクポイントを貼りたいこともでてくるかもしれない。
そんな時は、デベロッパーツール内のSources>Content Scriptsからデバッグ実行を行うことができる。

f:id:kobashin__G:20160510021636p:plain

できたもの

以下のように、Googleのロゴの上にテキスト文を挿入できている。

f:id:kobashin__G:20160510021653p:plain