chrome拡張機能の開発について少し理解できた

最近chrome拡張機能について調べていてサンプロを見たりしているが、いまいちcontent_scriptやbackground.js、chrome.*APIの挙動がよくわからなかったが、なんとなくつかめた気がするので備忘録としてメモ

content_script

特徴

• DOMにはアクセスできる
• 開いているページのディベロッパーツールでデバッグができる
• chrome.*APIには色々制限があり、使えないものがある

Background-Page

特徴

• chrome.*APIが全て使える
• 常にバックグラウンドで動くのでメモリを常に消費してしまう。そのためEvent-Pageを使うことが推奨される。manifest.jsondで"persistent": falseを書くことでEvent-Pageになる。

content_scriptとBackground-Pageの連携

この2つのファイルの連携をchrome.*APIが行う

例としては以下

メッセージを送信する

content_ascript

//変数sendをメッセージで送る
chrome.runtime.sendMessage(send, function(response) {
   console.log(response);//メッセージの受け手がレスを返したときキャッチできる
});

参考：Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】

メッセージを受け取る

background-page

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  console.log(msg);//送られたメッセージをキャッチ
  sendResponse(response);//sendResponseでmsgを送ったスクリプト側にレスを返せる
});

参考：Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】

何をしているか

またこのコードではcontent_script→background-pageへメッセージを送信している。
そして、変数sendの内容がbackgroundのコールバック関数の引数msgに渡される
そして関数sendResponseの引数へ渡したものがメッセージの送信元へ送られることで双方の連携ができている。

chrome.runtimeではコンテンツスクリプトへ送信できない

またこのコードではcontent_script→background-pageへメッセージを送信するのに
**chrome.runtime.sendMessage()を使用しているが、逆をやりたい場合、
つまりbackground-page→content_scriptへメッセージを送信したい場合はchrome.tabs.sendMessage()**を使用する。

参考：https://developer.chrome.com/extensions/tabs

**chrome.tabs.sendMessage()**を使用する際にはどのcontent-scriptに送信するかを決めるためにtabIdなるものが必要になる。
参考：https://developer.chrome.com/apps/runtime

デバッグ関連

種類	説明
content-script	通常のデベロッパーツール
background-page	拡張機能の管理画面から
popup	ポップアップを出して右クリック→検証

参考

• Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】
• Chrome Extension の作り方 (その4: Event Page / Background Page)