Chromeの拡張機能を試してみた.4
1. ページ内の画像srcを取得する
ついでにmapの実験にしたかったので、今回はmapでもらってきたデータのやりとりは前回でできるようになったので、いよいよ派遣したContentScriptに調査をしてもらうフェーズ。
function getImgs(){
var imgs = $("img[src]");
var srcMap = {};
for(var i = 0; i < imgs.length; i++){
srcMap["img_" + i] = $(imgs[i]).attr("src");
console.log("img_" + i + " is " + srcMap["img_" + i]);
}
return srcMap;
}
とりあえずsrcだけもらってくるmap。相対パスはまだ考えない。とりあえず取れればいいやなスタンス。あとは受信機に
} else if (request.message == "getImg"){
var m = getImgs();
sendResponse(
{imgMap: m}
);
今回からmessageに変更してます。 受信したときに先ほどのメソッドを呼び出すだけ。取得したmapをレスポンスに乗せて送り返す。後は送信側で
function(response) {
var imgSrcs = response.imgMap;
}
てな感じでもらえば後は加工し放題。2. 別タブに並べて表示する
ただsrcの文字列だけもらってもねぇ…せっかくsrc貰えるんだしサムネ的にして一覧化したい。なんで別タブ作ってそこに並べていきたい。
ただ「新しいタブの作成」はいいとして、どーしたらそこにデータを渡せるか考える。
…またレシーバー立ててメッセージ投げればいいかヽ('A`)ﾉ
考えるのをやめた
// 新しいタブを作成
function createNewTab(){
chrome.tabs.create(
{
url: "../htmls/result.html",
/* まだ移動はしない */
selected: false
},
function(tab){
//window.close(); // popup.htmlを閉じる
newTabId = tab.id;
setListener();
}
);
}
/* 新規タブページからのリクエストにこたえるためのリスナー */
/* 先にセットしてしまうと map の中身が更新されないっぽい… */
function setListener(){
// 新規タブページからのリクエストにこたえたい
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.message == "getResult"){
// レスを返してからタブを移動しないと
// ポップアップが先に消える = mapやこのレシーバ自体消えてしまう
sendResponse(
{
result: map
}
);
// 新規タブへ移動 = タブを選択状態にする
chrome.tabs.update(
newTabId,
{
selected: true
}
);
} else{
sendResponse({}); // snub them.
}
}
);
}
こんな感じのfunctionを作っておく。一つ目のfunctionが 「新しいタブ」を作成する機能、二つ目が「新しいタブ」からのリクエストにこたえるレシーバー。すなわち、「新しいタブ」のonloadあたりで、ContentScriptに送ったようにリクエストを投げさせ、そのリクエストに調査結果を添付して返す、という仕組み。
但し先にレシーバーを立ててしまうと、なぜか添付するものが初期値のまま送られてしまう(更新されない？)ため、調査が終わってからレシーバーを立てる。
新しいタブは、別途自分で用意したresult.htmlなるものを表示させる。さすがにGoogleトップとか表示してもいじれないし…
但し、このタブに移動するのは上記のリクエスト/レスポンスを行い調査結果を送ってから。出ないと拡張のポップアップがタブ移動の際に消えてしまうことがあり、結果、調査結果やレシーバーがなくなってしまうためである。
そのため「新しいタブ」作成時に、そのタブIDを記憶しておき、調査結果の送信が終わってからそのタブをアクティブにする、という手順を取っている。
後は野となれ山となれ。調査結果のmapは無事にresult.htmlに送信されるので、その結果をもとにimgタグを作って表示してやればいい。
長かったヽ('A`)ﾉ
