2014年1月23日木曜日

Chromeの拡張機能を試してみた.4

そろそろページの要素からいろいろしたいなぁ

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`)ノ

2014年1月8日水曜日

Android標準ブラウザの不思議な挙動

Android標準ブラウザでダウンロードを行った際、なんかうまくいかなかったことがあった時の考察メモ。
8割あってる気はしてるけど確証が持てないそんなお話。

Android標準ブラウザは2度刺す

はい、Eカードネタです。

1. 事象

事象自体は単純。
【Android】の【標準ブラウザ】で【のみ】、【ダウンロードが失敗する】というお話。
Chromeであれば問題なくダウンロードできるし、iPhoneでは普通に表示される。標準ブラウザのみ、
こんな感じで、<無題>のままいつまでたってもダウンロードが終わらず、ダウンロードマネージャを見ると【失敗】となっている状態。(仮に【事象1】とする)
また、上記とは別に、
と、にべもなく瞬殺されるケースも。(こちらを【事象2】とする)

2. 前提

上記2つの事象に対して考察を行う前に、一つ前提としておきたい【仕様】がある。
それは、
【Android標準ブラウザは、表示用プロセスとダウンロードプロセスの2種類を持つ】ということである。
これにより、ダウンロードしながらブラウジングができる、というメリットはあるのだが…

3. 考察

実は【事象2】に関しては、いろいろな人がぶつかっているらしい。その原因は、【Basic認証】にあるという。
前提 の通り、【Android標準ブラウザ】は普段【表示プロセス】で表示、リクエストを行う。しかし、ダウンロードを行う段階に入ると、【ダウンロードプロセス】にそのダウンロードを委譲するが、【ダウンロードプロセス】が「ダウンロードさせてよ( ・ω・)」と投げるリクエストは、【表示プロセス】のリクエストとは異なるリクエストになるため、【Basic認証】を通ることができなくなる、らしい。

じゃあ【事象1】も同じか、と思うとそうでもない。そもそも事象が違うし、【事象1】が発生した環境では【Basic認証】もかかっていない。じゃあ何が【事象1】みたいにブロックしてるのかと考えた時浮かんだのが、

…【自己証明書】?('A`)

【事象1】の環境では、いわゆる【オレオレ証明】を持つhttps区間内での出来事。白で塗りつぶしている部分にはダウンロード対象のドメインが入っていたため、通信自体は通っているっぽい。
すると、
【オレオレ証明】を認めますか?という問いに返答しようにも、【ダウンロードプロセス】はUIを持たないため、ユーザーは答えることができないまま、【ダウンロードプロセス】は待機を続けていた
ということになるのだろうか…
過程がどうにしろ、少なくとも【オレオレ証明】でなくなった途端【事象1】は発生しなくなったので、【事象1】の犯人はこいつで間違いないと思われる。





でも確証が無いのがなぁ…('A`)

参考

Chromeの拡張機能を試してみた.3

そろそろそれっぽいものを作り始められるかな…
とか思ってたら年開けちゃったよ…(・ω・`)

Chromeの拡張機能を試してみた.3

現在の機能: アイコン押したら背景赤くなるよ!
そんだけ。
やりたいのは、「開いてるページ中の要素について調べたい」なので、これじゃ一方的に操作しに行っているだけで意味がない。
そこで、 ContentScriptなるものをページに派遣して、そいつにページの調査をさせ、その結果を拡張が受け取る、とすればいいらしい。

1. ページにスクリプトを派遣する

ContentScriptなるまんまなScriptを派遣する。但しこいつはページ自身に入り込めるわけではなく、Chrome拡張の用意する「隔離空間(Isolated World)」にて実行される。これによりDOMにアクセスはできるが、そのページの他のスクリプトに干渉したりはできない。当たり前か。逆にページのスクリプトがこちらの動きを阻害することも無いらしい。
宣言はmanifest.json
"content_scripts": [  // 表示ページ中に埋め込むなんちゃらの宣言
     {
  "matches": [   // 埋め込むページのマッチ 必須
   "http://*/*",
   "https://*/*"
   ],
  //"css": ["css/mycontentstyles.css"], // 埋め込むcss 任意
  "js": [        //埋め込むjs 任意
   "js/jquery-1.8.2.min.js",
   "js/mycontentscript.js"
   ]
     }
   ],
この項目を追加してやる。階層はpermissionsなんかの兄弟になる位置。jsのほかcssも埋め込めるらしい。どうなっちゃうのやら...
今回はおまけでjqueryも持っていく。無いといろいろめんどいし...

mycontentscript.js(終わったら名前変えよう('A`))には、とりあえず
console.log("I'm here!")
ログ出すだけ。

全部終わったらいつも通りリロードしてから新しくタブでも開いてみる。するとコンソールに先ほどのアホなログが書き込まれているはず。

2. ContentScriptと対話する

埋め込んでログ吐くだけじゃ意味ないわけで。派遣したスクリプトから報告を受けないと派遣した意味がない。対話方法としてまずメッセージングをやってみる。

メッセージングは、簡単に言えば
拡張「ちょいこれやって結果持ってきて(;´Д`) 」
埋め込み「おkわかった。これやな⊂(・ω・`)」
拡張「おk受け取った。あとはこっちでやるわ(;´ω`)」
的な通信。何かを起点にメッセージのやり取りを行うシンプルなもの。

まずはブラウザアクションのデフォルトポップアップにpopup.htmlを用意、適当にmyscript.jsなんてスクリプトを埋め込む。
"browser_action": {  // ツールバー右上に表示するのに必要な設定. Chrome4からのAPIで、それ以前のものでは使えない。
     "default_title": "titil test", // 説明. 右上にアイコンを出す場合はホバーするとみられる
     "default_popup": "htmls/popup.html" // 右上に表示されたアイコンを押した際に出るhtmlの指定. 
},

…もうやったのがだいぶ前すぎて忘れてたヨヽ('A`)ノ
適当にpopup.htmlにボタンなりなんなり置いたら、myscript.jsにてclickイベントを乗っける。ちなみにボタンに属性として onclick="" なんて乗っけるとエラー吐かれることがある。ワケワカラン( ゚д゚ )
$("#myBtn").click(function(){
 chrome.tabs.getSelected(
  null,
  function(tab) {
     chrome.tabs.sendRequest(
      tab.id,
       {
        greeting: "hello"
       },
       function(response) {
        console.log("send from myscript " + response.farewell);
      }
     );
  }
 );
});

参考まんま、だがそれがいい。
sendRequestに必要な情報を載せて送り出す。コールバックにレスポンスが返ってきたときの処理を載せる。
3行目のnullはどのタブを操作するかを考えずに、「今開いてるタブに操作する」ためのnull。idを入れれば指定したタブにのみ操作できるが…やるのかな?('A`)
これ一つで、

拡張「ちょいこれやって結果持ってきて(;´Д`) 」
埋め込み「おkわかった。これやな⊂(・ω・`)」
拡張「おk受け取った。あとはこっちでやるわ(;´ω`)」

の赤字の部分が出来上がる。シンプルにリクエストを送り、返ってきたレスポンスで何かをやる、というもの。ちなみにresponseが無いのに response.farewellとか参照しようとするとエラーを吐くっぽい。nullチェックとか必要か?

今度は受け取り側。

chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
    else
      sendResponse({}); // snub them.
  }
);

こちらも参考ま(ry
リクエストをもらったら処理を行い、sendResponseでお返事する。

sendResponseは無くてもいけてしまうが、無いと送信側がいつまでも返信を待って
(;´Д`)マダー?
待ちぼうけを食らうことになる。これはメモリ的によろしくないので、空のsendResponseだけでも返してやるのがよろしいらしい。

先ほど出た response.farewell は、この7行目で送り返されたもの。こんな感じでやり取りができる。

なので、これらを仕込んでから実際にボタンを押すと、コンソールには


send from myscript goodbye
…うわ すっごいfrom間違ってるorz


  参考

3. 何が送れるの?

そうすると気になるのはいったい何がメッセージとして送れるのか。
試しに2. で作った送信側に testなるキーを設定("greeting"のままなのは内緒。)
chrome.tabs.getSelected(
 null,
 function(tab) {
    chrome.tabs.sendRequest(
     tab.id,
      {
       greeting: "test"
      },
      function(response) {
       console.log("num is " + response.num);
       console.log("string is " + response.string);
       console.log("array is " + response.array);
       console.log("map is " + response.map);
     }
    );
 }
);
中身を置き換えた感じ。戻ってくるレスポンスにはとりあえず、int、string、配列、マップで実験。

返信側もいじくる
} else if (request.greeting == "test"){

   var n = 1;
   var s = "test";
   var a = [12,13,14];
   var m = {x: 100, y: "map y"};

  console.log("num is " + n);
  console.log("string is " + s);
  console.log("array is " + a);
  console.log("map is " + m);

   sendResponse(
    {num: n},
    {string: s},
    {array: a},
    {map: m}
   );

とりあえずいろいろ載せてみた。この状態だとどうなるか。
まずは返信側のページのコンソール
num is 1
string is test
array is 12,13,14
map is [object Object]
さすがにmapはそのまま出ないがきちんと出荷されてそう。では送信側に返ってきたログは…
num is 1
string is undefined
array is undefined
map is undefined
…あれ?
2. とかでstringは貰ってるし、実は書いてないけどmapとかも実験できてたはz…
まさかと思い返信側を以下に訂正
} else if (request.greeting == "test"){

   var n = 1;
   var s = "test";
   var a = [12,13,14];
   var m = {x: 100, y: "map y"};

  console.log("num is " + n);
  console.log("string is " + s);
  console.log("array is " + a);
  console.log("map is " + m);

   sendResponse(
    {string: s},
    {num: n},    
    {array: a},
    {map: m}
   );
stringを先頭に返すように変更してみる。すると…

num is undefined
string is test
array is undefined
map is undefined
マジですか Σ(・д・)

というわけで先頭の一個しか読んでくれないらしい。エラー吐いてくれよ…('A`)





ただ、mapはいけるので複数のデータ返したいときはmapで返すか、複数回リクエストするのがいいのかね('A`)