【Chrome拡張】sendMessageによるアイコン押下時の処理
先日公開したUrl2Imageを作ってる時に結構詰まった内容。
アイコン押下した時だけイベント飛ばしたいなーって思ったけどなかなか見つからず。
見つかってしまえば意外とシンプルだった。
○manifest.json
backgroundを定義しておく。
"background":{"scripts": ["background.js"]},
○background.js
ブラウザアクションでcontent scriptにメッセージを送信する。
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendMessage(tab.id, "myAction");
});
○content_script.js
backgroundで発行されたメッセージを受け取る。
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request == "myAction") {
alert("アイコン押下時の処理");
}
});
こんだけ。簡単だった。
Url2Imageではサイト内のHTMLをごそっと抽出し、改行・タブ・スペースを削り、タグで囲まれたURL文字列を画像ファイルに置換してます。
srcText.replace(/>(http(s)?:\/\/[\x21-\x7e]+(jpg|jpeg|gif|png|bmp))</gi, "><img src=\"$1\"><")
こんな感じ。
なので、ぶっちゃけ以下みたいなhtmlだと機能しません。
(bodyタグ直下にタグで囲んでないURLが記述されてるような場合。)
<body>
http://hogehoge.com/hogehoge.jpg
</body>
まぁ今日日そんな構成のサイトなんて無いだろうしいいかなと。