2013年4月14日日曜日

Chrome拡張で朝鮮半島に平和を!Browser ActionからScriptを実行する


 前回はツールバーのアイコンクリックでポップアップを表示させましたが、今回はアイコンクリックで直接スクリプトを実行します。

 拡張のアイコンをクリックすると、innerHTMLを書き換えるスクリプトを仕込みます。


 前回と違う点は「permissions」の設定と、「background」の設定です。

 「permissions」については必要なものを配列で指定します。
 今回はchrome.tabsを利用するために「tabs」を指定するのと、どのサイトでも動くように「http://*/*」(httpから始まるすべてのサイト)を指定。

 「background」については、スクリプトを登録しておくとChrome起動時に呼ばれます。
 関数を定義しておいたり、リスナーを登録しておいたりなどに利用します。

 「browser_action」の「default_popup」は、今回は使わないので削除します。

{
 "name": "南北統一",
 "version": "1.0",
 "manifest_version": 2,

 "description": "朝鮮半島を平和にします。",

 //必要なパーミッションを指定する
 "permissions": [
  "tabs", "http://*/*"
 ],

 //バックグラウンドで動く処理
 "background": {
  //スクリプトファイルを登録
  "scripts": ["background.js"]
 },

 "browser_action": {
  "default_icon": "icon.png",
  "default_title": "統一"
 }
}


 続いてスクリプトファイルを作成します。

 「chrome.browserAction.onClicked」はツールバーのアイコンがクリックされた際に呼ばれるイベントで、その「addListener」でリスナーを登録しておきます。

 「chrome.tabs.executeScript」でタブ内でスクリプトを実行します。
 第1引数はスクリプトを実行するtabIdで、現在のタブの場合はnullを指定します。
 第2引数は実行するスクリプトの詳細情報オブジェクトで、codeプロパティの場合は「:」の後ろに実行するスクリプトを文字列で指定します。

 長々と実行内容を文字列変数に格納しておいてから、executeScriptに渡していますが、もっとうまいやり方がありそうです。
 事前に関数を定義しておいてその関数を文字列で渡せば良いかと思ったのですが、やってみたら動きませんでした。

 まぁ、ここは動けば良いということで。

unification = "";
unification += 
 "document.body.innerHTML = " +
 "document.body.innerHTML.replace(/北朝鮮/g,'朝鮮');" +
 "document.body.innerHTML = " +
 "document.body.innerHTML.replace(/韓国/g,'朝鮮');";

chrome.browserAction.onClicked.addListener(function() {
 chrome.tabs.executeScript(null, {code: unification});
});

 ちなみにタグやスクリプトも無慈悲に置換されますので、「a」⇒「h1」なんてことも出来ます。


 さて、作成した拡張をChromeに登録して実行してみましょう。

 これが、

こうなる。

うーん。。

半島の統一には成功したのですが、内戦が激化しましたね。


0 件のコメント:

コメントを投稿