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

ただGoogleトップに飛ぶだけでは面白くないので…

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

今回はできることいろいろ見てみる回

0. 前回のmanifest.json

{
 "manifest_version": 2, // マニフェストのバージョン. 2にしないと怒られる
 "name": "my extention", // name. 表示される名前でもある
 "version": "1.0",  // アプリversion. 更新があったらあげていく.
 "description": "my first extention", // 説明.
 "icons": {    // iconの設定. サイズごとに設定できる
  "16": "icons/icon.png",
  "48": "icons/icon.png"
 }, 

 "browser_action": {  // ツールバー右上に表示するのに必要な設定. Chrome4からのAPIで、それ以前のものでは使えない。
 "default_icon": "icons/icon.png", //表示するアイコン
     "default_title": "titil test", // 説明. 右上にアイコンを出す場合はホバーするとみられる
     "default_popup": "htmls/popup.html" // 右上に表示されたアイコンを押した際に出るhtmlの指定. 

}

こんな感じ

1. バッジテキスト

右上アイコンにこんなことできます

1-1. 準備

まずはmanifestの準備

"background": {   // 裏で動く機能について書く場所
 "scripts": ["js/background.js"]
}

これをmanifestに追加。","に注意。 backgroundは表に見えない処理を書く場所。そこにscriptを宣言しておく。
ついでに該当ファイルを用意。

1-2. script実装

そして登場するのが

chrome.browserAction

クラス？

参考

要するに browser_actionに対していろいろできるメソッドを持つ。

今回はこんなのをチョイス

// バッジの文字を指定.日本語は不可. 4文字まで
chrome.browserAction.setBadgeText({text:"TEST"});

// バッジの色を指定. RGBA
chrome.browserAction.setBadgeBackgroundColor({color:[125,230,200,255]});

// clickイベント. browser_action.default_popupがあると負けるので注意
chrome.browserAction.onClicked.addListener(
 function(tab){
  alert("test alert");
 }
);

この3つ。概要はコメントで記載の通り。 特にclickイベントはbrowser_action.default_popupがあると宣言順などに関わらず負けるっぽい。使う場合は要注意。

これをbackground.jsに記載して リロード 。

すると

クリックも合わせてこんな感じ。

2. 今開いているページへの操作

そろそろ面白くなってまいりました
前準備として、1.の実行のために browser_actionのdefault_popupを外していた場合、元に戻しておくこと。

2-1. permissionの設定

いくら拡張とはいえ、あんまりポンポンいじれてしまうのは問題。なので必要な権限だけ付与してやる必要がある。

manifest.jsonで以下を宣言する。

 "permissions": [ // 権限付与の設定
  "tabs", "http://*/*"
 ]

権限に関わるものを宣言する場所。","区切りで並べていく。
内容としては、
tabs : タブに関する操作(移動、作成等)
http://*/* : 自分以外のリソースを使う宣言. この場合は、「httpスキーマである全てのドメイン、パスのものを使う」になるかと。httpsの何かを使うなら、新たに同様な宣言が必要。「現在開いているページ」の情報にアクセスしたいなら必要。基本この2つはセットになるのかねヽ('A`)ﾉ

2-2. scriptの準備

popup.html(アイコンを押したら出てくる領域)lがインターフェースになるため、まずは操作用のボタンを仕込む
今回はお手本通り、「いま開いているページの背景色を操作」する

<div id="red">to Red</div>
<script src="../js/colorscript.js"></script>

なんの変哲もないdiv。これにclickイベントを載せるscriptを続けて宣言してやる。もちろん中に書いてもいいけど…分けたいね(・д・`)

colorscript.jsを作成する。プロジェクトフォルダ内なら場所に制限は特にない。

function changeColor(color){
 chrome.tabs.executeScript(null,{
  "code" : "document.body.style.backgroundColor='" + color + "'"
 });
}

document.getElementById('red').onclick = function(){
 changeColor('red');
}

ポイントは1. 同様に用意されている、chrome.tabsクラス？ タブ操作にまつわるメソッドがいっぱいなのは名前から明らか。
今回は指定したscriptをタブ内で実行する、executeScriptを使用。 実行する内容自体は至極単純で、背景色に引数の色を指定してね、というだけの内容。
これを、#redクリック時に発動するようイベントを乗っけてやるだけ。

全部終わったらまた拡張機能タブからリロード。

3. 実際にやってみる

3-1. 実行

適当なページを開いたら、右上のアイコンをクリック。まずはポップアップ出てますか？
ポップアップが出たら今度は to Redをクリック。するとbodyに background-colorが設定されているはず。
ちなみにポップアップのところで右クリック→要素を検証 すると、ポップアップ部分のデベロッパーツールが開いてくれる。scriptのエラーなんかのチェックに使えるのでぜひ多用するべし。

3-2. 一工夫

実際に色が変わったらここで一工夫。わざわざ開く→押す なんてめんどくさい手間をかけずにアイコンクリックで何とかしたい場合。

1.でいじった background の部分を利用する。

まずmanifest.jsonのbrowser_actionから、default_popupの項を削除。これでポップアップは開かないはず。

さらに backgeoundを1.の状態に再現、動作を確認する。

大丈夫そうなら、background.jsのchrome.browserAction.onClicked.addListener()を用いる。1-2.で既に入れている場合、現在alertが入っている部分に、changeColorメソッドの中身をまるっとブチ込む。

chrome.browserAction.onClicked.addListener(
function(){
 chrome.tabs.executeScript(null,{
  "code" : "document.body.style.backgroundColor='red'"
 });
);

とかなるかと。
これでリロードし、アイコンをクリックすると、同じように赤い背景になるはず。目に優しくない(⊃д⊂ )

ここまでのフォルダ構成

ChromeExt━ ┳━manifest.json
                   ┃
                   ┣━ｊs┳━background.js
                   ┃     ┗━colorscipt.js
                   ┃
                   ┣━htmls━popup.html
                   ┃
                   ┗━icons━icon.png







こんな感じ？ヽ('A`)ﾉ


参考: ドットインストール