導入から公開まで13時間!Chrome拡張機能の開発[6of6]

最初の記事に書いた苦労したポイントについて補足したいと思います。

苦労したポイント

  • 生のjavascriptではなく、jQueryを使えるようにするにはどうすればいい?
  • 対象ページの内容を変更する方法は?contentscriptによる方法とexecuteScriptがある?
  • backgroundを含む拡張部分とcontentscriptとはDOMを共有しないので変数や関数が互いに参照できない。その場合の通信方法はどうするの?
  • デバッグはどうすればいい?background.jsを含む拡張部分。contentscript部分。

生のjavascriptではなく、jQueryを使えるようにするにはどうすればいい?

これは「manifest.json」に明記すればよいです。例外として「popup.html」を見ていただければ分かるようにHTML中に記述しています。

対象ページの内容を変更する方法は?contentscriptによる方法とexecuteScriptがある?

「manifest.json」にcontentscriptとして宣言すれば「対象ページ」の内容を変更できます。

jQuery使いなら「contentscript.js」でもjavascriptそのものではなくjQueryを使いたいはず。その際は「manifest.json」にcontentscript宣言に「jQuery.js」等を追加してあげればよいです。「対象ページ」でjQueryが使われている場合でも版数の違いなどを気にすることなく宣言できるそうです。

バックグラウンドコードからexecuteScript関数を使って対象ページの内容を変更する方法もありますが、複雑な処理には向かないような印象でした。具体例については参照リンクを見ていただければと思います。

backgroundを含む拡張部分とcontentscriptとはDOMを共有しないので変数や関数が互いに参照できない。その場合の通信方法はどうするの?

リクエスト(メッセージ)のやりとりで実現します。拡張部分のコードとcontentscriptではリクエスト(メッセージ)のやりとりの際の引数が違います。

デバッグ方法はどうすればいい?background.jsを含む拡張部分とcontentscript部分

コンテントスクリプト部分については、対象ページを表示した状態でいつものデバッグツールを起動すればよいです。バックグラウンド部分では、Chromeの「設定」「拡張機能」画面にある「page_backgound.html」をクリックした状態でいつものデバッグツールを起動すればよいです。ポップアップ部分についてはHTMLにスナップショットを表示するdivタグを用意しておいてデバッグ内容を表示するようにすればよいような。

Chrome拡張は、作る楽しさ、使う楽しさが満載な仕組み

以上、これまで各コードについてひとつずつソースコードを提示してきましたが、各コード(ファイル)の役割は次のようになると思います。

  • background.js:ハブ的役割を持つコード。
  • popup.html, popup.js:利用者にユーザインタフェースを提供するコード。
  • contentscript.js:対象ページを処理するコード。
  • manifest.json:役割定義

Chrome拡張開発によりいろいろできそうに思いました。もちろん既に誰かが作成した便利なものを探して使うのが、もっともコストがかからない便利な方法だと思います。

でも、自分のニーズや悩みにぴったり来るものがない場合には、javascriptやHTMLなどをちょっとかじっていさえすれば、とても便利な、世界でひとつしかないブラウザ環境が手に入ります。

例えば、ページの文字が小さくてみえずらい場合には、ブラウザの機能を使って少しだけ大きな文字にすることもできますが、こうした拡張を作って好きなだけ拡大してみる。特定の英単語のみ拡大するような拡張機能も簡単に作成できます。

とにかくChrome拡張は、作る楽しさ、使う楽しさが満載な仕組みだと思います。

以上です。

関連する記事

導入から公開まで13時間!Chrome拡張機能の開発[1of6]
導入から公開まで13時間!Chrome拡張機能の開発[2of6]
導入から公開まで13時間!Chrome拡張機能の開発[3of6]
導入から公開まで13時間!Chrome拡張機能の開発[4of6]
導入から公開まで13時間!Chrome拡張機能の開発[5of6]

お世話になったリンク

Chrome Extensions API リファレンス
Sample Extensions – Google Chrome Extensions
ぷりんすの開発メモ: Chrome拡張機能のマニフェストVesrsion2対応についてのメモ
ChromeExtensionを作ってみる | ぼんぼるにっき
Chrome Extension でデバッグを行う – 日頃の行い
ハローワークの「求人情報検索」ページ

以上です。ありがとうございました。