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


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

Chromeの拡張機能試してみた

ずっとやろうやろう思ってできていなかったので

Chrome拡張の自作

まぁ別に「こんな機能が作りたい！」なんてのはないので、ベースになる部分ができたらまずは満足。

0. 必要なもの

GoogleChrome
Javascritpの知識
htmlの知識？
なんか適当にエディタ

1. フォルダ準備

まずはプロジェクトフォルダの作成。場所は自由。めんどいのでデスクトップに作るズボラっぷり。

フォルダ名も特に制約っぽい制約もない？別にどこかに表示されるでもなし。

たぶんパッケージ名になるのだろうと予想。

2. ファイル作成

1で作ったフォルダの中でいろいろファイルを作る。まずはmanifest.json。これが無いと始まらない。

その名の通りjson形式での記入。うだうだコードを書かなくていいのは素晴らしいとおもう(小並感)

必要なファイルごとに追ってみる。

2-1. manifest.json

必須ファイル。先述の通りjsonで書く設定ファイル。アイコンの指定や使うファイル等はこいつが持ってる。

簡単にコード-A

{
 "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"
 }, 
 // コード-Bに続く
}

まずは基本の宣言。 manifest_versionは拡張機能作成全体に言えることみたいなので、とりあえず2に。
ほかは表示の問題。コード的にはエラーを起こしたりはしないが、nameに関しては必須事項らしい。

簡単にコード-B

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

この辺りから実用的な設定。拡張を有効にすると出てくる右上アイコンの設定についてのお話。
iconとtitleはともかく、問題はpopup。アイコンクリック時に出るアレはここの中で作る。

manifest.jsonについてはひとまずはこの辺。

2-2. html

簡単にコード-B 中に出てきたhtmlを作成。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
 </head>
 <body>
  <div class="main_contents">
   <span>Hello, World! <a href="http://www.google.co.jp" target="_blank">Google検索</a></span>
  </div>
 </body>
</html>

ただHello, World!と Google検索 というリンクが並んでいるだけのページ。 拡張で使うのにGoogleへのリンクなのはキニシナイ
とりあえずはシンプルにこれだけ。これをmanifest.jsonのパスに合うように、1で作ったフォルダ内に配置する。

ChromeExt(1のフォルダ)━ ┳━manifest.json
                                      ┃
                                      ┣━htmls━popup.html
                                      ┃
                                      ┗━icons━icon.png

現在こんな感じなはず。

3. 登録

準備ができたらいよいよ配置してみる。機能はとりあえず二の次。

まずは設定を開く。メニューから開くのが楽かと。

設定タブが新たに出てきたら、今度は左側の「拡張機能」を選択。

デベロッパーモードのチェックボックスにチェックを入れたら、

「パッケージ化されていない拡張機能を読み込む」を選択、ディレクトリが選択できるので、 1で作成したディレクトリを選択すると、拡張機能の一覧に追加されて

こうなるはず。icon設定していないのがバレバレである。なんか見えちゃいけないものがちらほらあるので塗りつぶし。ヽ('A`)ﾉ 

エラーなんかはここに出てくる。修正したら下の リロード を押せばOK。簡単。

ここに登録できたら、右上に注目。ちゃんと「有効」になっていれば設定したアイコンがいるかと。

押せばこうなるはず。 もちろんGoogle検索 を押せばGoogleトップへ。

今回はこんなところで。∩( ・ω・)∩

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