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の連携
特徴
- chrome.*APIが全て使える
- 常にバックグラウンドで動くのでメモリを常に消費してしまう。そのためEvent-Pageを使うことが推奨される。manifest.jsondで
"persistent": false
を書くことでEvent-Pageになる。
content_scriptとBackground-Pageの連携
この2つのファイルの連携をchrome.*APIが行う
例としては以下
メッセージを送信する
//変数sendをメッセージで送る
chrome.runtime.sendMessage(send, function(response) {
console.log(response);//メッセージの受け手がレスを返したときキャッチできる
});
参考:Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介!【サンプルあり】
メッセージを受け取る
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 | ポップアップを出して右クリック→検証 |
参考
Author And Source
この問題について(chrome拡張機能の開発について少し理解できた), 我々は、より多くの情報をここで見つけました https://qiita.com/oouaioi/items/2410632dcc43258febf6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .