チラシの裏的備忘録: 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と対話する

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

メッセージングは、簡単に言えば

拡張「ちょいこれやって結果持ってきて(;´Д`) 」

埋め込み「おｋわかった。これやな⊂(・ω・`)」

拡張「おｋ受け取った。あとはこっちでやるわ(;´ω`)」

的な通信。何かを起点にメッセージのやり取りを行うシンプルなもの。

まずはブラウザアクションのデフォルトポップアップに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`)
これ一つで、

拡張「ちょいこれやって結果持ってきて(;´Д`) 」

埋め込み「おｋわかった。これやな⊂(・ω・`)」

拡張「おｋ受け取った。あとはこっちでやるわ(;´ω`)」

の赤字の部分が出来上がる。シンプルにリクエストを送り、返ってきたレスポンスで何かをやる、というもの。ちなみに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とかも実験できてたはｚ…
まさかと思い返信側を以下に訂正

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

チラシの裏的備忘録

2014年1月8日水曜日

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

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

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

2. ContentScriptと対話する

3. 何が送れるの？

0 件のコメント:

コメントを投稿

AWS CDKで立てたEC2インスタンスのTimeZoneとかいじりたかった話

お気に入り, 見よう.

不正行為を報告