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

ど忘れSEの備忘録

日々集めた何かしらを残すための何か。 共有とか疑問解決とかできたらいいな。 iPhoneとかiOSとかその他スクリプトとか色々。

【Chrome拡張】sendMessageによるアイコン押下時の処理

Chrome Extension

先日公開した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>

まぁ今日日そんな構成のサイトなんて無いだろうしいいかなと。