アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

GoogleChromeのExtension作成 タブの削除時に直前のタブに戻る拡張を作ってみる

こんばんは。松田です。
今日はGoogleChromeのExtensionを作ってみたいと思います。
実装するExtensionの内容はとっても簡単。「タブを閉じたときに直前に開いていたタブに戻る」Extensionです。

みなさんGoogleChrome使ってますか?
Extension入れまくってますか?
自分はChromeにExtensionを入れられるようになってから完全にChromeの虜となっています。

そんな中、最近気に入っている拡張がこれです。

Right Click Opens Link in New Foreground Tab
https://chrome.google.com/extensions/detail/afalkcagoidkdjdlfoaicbanbfgoamoo?hl=ja

リンクを右クリックしたら新しいタブでリンク先を開いてくれる、ただそんだけのExtensionです。
とてもシンプルなものですが、自タブに表示されている内容を消したくないときや、画像を別枠で見たいときなどに重宝してます。
要するに画像がいっぱいあるようなサイトで画像をポンポン別タブで開くときにすごい便利なんです。

しかし、このExtensionを使っていて気になってくるのが、新しく開いたタブを消した時の遷移先です。
別タブで開いて見たいリンク先は、大抵そんなに重要でない内容のものが多いので、開いて消して開いて消してを繰り返すことになります。
自分としてはリンクを別タブで開いて消して開いて消して・・・を繰り返したいのですが、Chromeは消したタブの右のタブにフォーカスを当ててしまうため、思ったような快適な操作ができません。

というわけで、前置きが長くなりましたが、そんな理由から「タブを閉じたときに直前に開いていたタブに戻る」動作をするExtensionを作ってみることにしました。




Extensionのつくりかた基礎

まず最初に見たサイトはここ。
http://code.google.com/chrome/extensions/getstarted.html
英語ですがExtensionの作り方の基礎がシンプルで分かりやすく解説されています。
このページの内容を追っていくだけで5分もかからずにExtensionが作れてしまいます。
まずはこのページの内容をさらーっと追って作ってみるとよいかと思います。

次に見たのがここ。
http://dev.screw-axis.com/doc/chrome_extensions/
そうは言ってもやっぱ日本語で見たいよねー。ということで読みあさりました。
上の本家リファレンスの日本語訳が載っています。




実際につくってみる

1. まずExtensionを開発するディレクトリを用意します。


2. その中にmanifest.jsonファイルを作成します。


このmanifest.jsonファイルがExtensionの設定ファイルとなります。
作成するExtensionの名称や基本動作をここで設定します。

manifest.json


{
  "name": "BackToTheLastTab",
  "version": "1.0",
  "description": "Go back to the last tab when you close a tab.",
  "background_page": "background.html",
  "permissions": [
  	"tabs"
  ]
}


Extensionの実際の処理を行うのが、ここで"background_page"に設定した "background.html" になります。
このHTMLに記述したJavaScriptの処理がExtensionの実行結果となります。

"background_page"はバックグラウンドで処理を行わせるための項目ですが、この他にもExtensionの処理を行わせる方法はいくつか存在します。
その中でもよく使われそうなものをいくつかピックアップします。



■ browser_action
上部メニューにアイコンが追加される、最も基礎的なExtension。
アイコンをクリックしたときにExtensionが実行される。
すべてのページで共通して使えるような機能を実装する。

■ page_action
アドレスバーの右にアイコンが表示される形式のExtension
特定のページにだけ有効な機能を実装するのに使われる。
RSS取得ボタン等々。。

■ options_page
Extensionの設定を変更するオプションページのHTMLを指定する。
HTMLとJavaScriptで記述。

■ chrome_url_overrides
Chromeの特定のページを上書きする。
新規タブを開いたときや、履歴ページを開いたときに、独自のページを表示させることができる。
Feedlyとかが使ってるのがこれ。

■ background_page
Extensionが起動した瞬間からずーっと実行されているページ。
HTMLで記述されてるけど実際は表示されない。
ここにJavaScriptでコードを仕込んでおいて、必要なときに実行させたりする。
とりあえず何かしたかったらここにJavaScript仕込めばいいと見た。


今回作成するExtensionでは表示する画面は必要なく、裏側で起動されていればいいだけなので、"browser_action" も "page_action" も記述していません。
また、タブの操作を行わせるため、permissionsにtabsを渡しています。


3. 同じディレクトリ内に、background.htmlをおきます。


background.html


<html>
<head><title>background</title></head>
<script type="text/javascript">

var selectedId1 = -1; // 直前に開いたタブのID
var selectedId2 = -1; // ↑のひとつ前に開いていたタブのID

/**
 * タブが切り替えられたときの処理
 */
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {
	//	alert(tabId + ':' + selectInfo);
	selectedId2 = selectedId1;
	selectedId1 = tabId;
});

/**
 * タブが閉じられたときの処理
 */
chrome.tabs.onRemoved.addListener(function(id, removedInfo) {
	//	alert(id + ':' + removedInfo);
	//	alert('selected2 = ' + selectedId2);
	
	if (selectedId2 > 0) {
		chrome.tabs.update(selectedId2, {selected:true});
	}
});

</script>
<body>
</body>
</html>

このExtensionの本体になるのがこのファイルのScript部分です。
やりたいことが簡単なのでスクリプトもえらくシンプルです。

タブが切り替えられたときに、今まで開いていたタブのIDを記憶しておく処理と、タブが閉じられたときに、記憶していたタブにフォーカスを当てる処理を書いています。
デバッグ方法がよくわかんなかったので、いたるところにalert()を仕込んで実行しまくりました。
script開始部分にalert('hoge');を仕込み、Extension実行時に 'hoge' が表示されなければJSがどこか間違ってます。
多分もっとかっこいい開発方法があるはずです。

タブの操作なので、下のURLを読んで片っ端から実行してみました。
http://dev.screw-axis.com/doc/chrome_extensions/ref/api/tabs/


これでExtensionは完成です。


GoogleChromeにExtensionをインストール
次に、作ったExtensionをChromeにインストールしてみます。

1. まずはChrome右上の設定ボタンから、「拡張機能」画面を開きます。


2. 次に「デベロッパーモード」をクリック。
ボタンが3つ現れるので、「パッケージ化されていない拡張機能を読み込みます」ボタンをクリックします。


3. フォルダ選択のウィンドウが出るので、作成したExtensionのフォルダを選択。
すると他のExtensionと同様に作成したExtensionが読み込まれます。


これでインストール完了です。
作成したExtensionが一覧に表示され、実行されます。
もし納得した動きになっていなかったら、スクリプトを修正して「再読み込み」を繰り返します。



作ったExtensionを公開する

作ったついでに以下のページを参考に公開してみました。
http://blog.smartnetwork.co.jp/staff/node/44

BackToTheLastTab

https://chrome.google.com/extensions/detail/gmnobciacgaahhngegnpblmomljmbcmd
ちゃちゃーっとファイルを圧縮してアップしただけでほんとに公開されちゃってます。
簡単すぎてびびります。


最初のサンプルの実行に5分。このExtensionの実装に1時間ほど。
Extension開発というネーミングから取っ付きづらいものかとイメージしてたのですが、驚くほどあっさりと作れました。
快適なChrome生活を送るために、ぜひ皆さんもステキなExtensionを作ってみてください。

GoogleChrome に Firebug extension をいれてみた + よさげなextensionまとめ

こんにちは。松田です。
システムの開発時にはFirefox+Firebugが欠かせなくなっていますが、最近Firefoxがクラッシュしまくる現象に悩まされてます。セーフモードで起動しようがFirefox自体インストールし直そうが、ちょっと使っているとすぐにクラッシュ。
いい加減Firefoxに愛想がつきてきた・・・けどFirebug無いと開発できない。ChromeとかでFirebugっぽいこと出来ないかなぁ・・・、と検索してみたらFirebug Liteエクステンションなるものを発見。さっそく入れてみました。

というかエクステンション機能自体出ていたことを知りませんでした。
いつのまに・・・。


まずはGoogleChromeのインストール

通常のGoogleChromeではエクステンションに対応していないので、エクステンションに対応したdev版のGoogleChromeをインストールする必要があります。

通常版のGoogleChromeでもエクステンションに対応したようです。
http://www.google.com/chrome/eula.html?extra=devchannel

次にFirebugのインストール
https://chrome.google.com/extensions/detail/bnbbfjbeaefgipfjpdabmpadaacmafkj
上記リンクの「インストールボタン」を押せば数秒で登録完了です。
簡単でいいですね。Chromeエクステンションのインストールの場合、ブラウザを再起動させる必要もないようです。

これでURL入力欄の右側にボタンが追加されます。
通常のプラグインはここのボタンを押せばだいたい何かしら動作します。
さっそくクリッククリック。


あれ・・・何も起きない・・・?


何もおきないよ?
サイト内の説明を読むかぎりでは、インストール直後はページをリフレッシュしないとみれない、なおかつ、Google Chrome Extensionのサイト内では使用できないもよう。
上記に当てはまらないのにダメな場合は、以下のリンクをブックマークのツールバーにドラッグしてブックマークレットを作ってみてください。

↓このリンクをドラッグ!
Firebug Lite

ブックマークレット完成

アイコンをクリックしても何も起きない場合でも、このブックマークレットからだと何故か起動してくれることが多いです。謎です。
これでうまくいけば無事Firebugが立ち上がります。

とうとうChromeFirebugが・・・。

あ、あれ?
なんか足りない。
一番使いたかった「接続」タブが無いっ。なんてこったい!
この辺がLiteたる所以なのかっ。

ちょろっと使ってみた感じでは、Inspectorは普通に使えます。
ただ、そこからの要素の書き換えはまだ出来ないようです。
ページをリロードすると枠が消えちゃったりとか改善が必要な様子。
まだまだFirefox版のほうが実用向き。
今後に期待です。




ほかのエクステンションも
新しいブラウザにいじると大体やっちゃうのが使えそうなアドオン探し。
どうせいじるのは最初の頃だけなんだろうなーと分かっていながらもいろいろ入れてみました。
せっかくなので入れてみたものを紹介。

Chrome Gestures
マウスジェスチャー
右クリックしながらマウス動かして進んだり戻ったり更新したり。
GoogleChromeを使ってなかった理由の一つがこれができないからだったりもしたり。

XML Tree
GoogleChromeではXMLのページがただのテキストで表示されますが、これをいれればカッコよくXML風に表示可能。
ただ、後述の他のエクステンションと同時に使うといろいろとおかしなことが起こります。
Coolirisを入れてるとXMLの最初の階層にstyleタグが入れ込まれちゃう。
Furigana Injectorを入れてるとXMLページを表示しただけでエラーが出ちゃう。
これはどっち側の責任なのか。うーん。

Furigana Injector
表示しているサイト内の漢字にフリガナを付けてくれる。
フリガナを付ける漢字のレベルも簡単に調整できる。はずなんですが自分の環境だとまだ動作してくれてません。なぜ・・・。

URL入力フォームの右端に出る「振」マークをクリックしたらフリガナが表示された。
この場所って他のエクステンションとかぶったらどうなるんだろ。

Ibrii
ページ右側にカートのような枠を表示し、サイト内の画像やらテキストやらをドラッグして放り込んで保存しておくことができます。おもしろげ。
最初に簡単なユーザー登録が必要。

Cooliris
GoogleImage等の画像検索画面などをカッコよく表示してくれる。
それでいて見やすい。
Firefoxで使ってたときは日本語入力ができなかった気がするけどいつの間にか対応してた。カッコイイッス。

Hatena Bookmark GoogleChrome extension
メニューのアイコンには見ているページのはてぶ数を表示。
アイコンをクリックすると、「ブックマークする」ボタンと、そのページについているはてぶコメントが出現。ベンリ。

IE Tab
クリックするとIEを使用したタブが出現。
Web開発者にはもってこい。

Digital Clock
ただの時計。
アイコン状態で時間が表示されているので地味に便利。

Google Similar Pages beta
クリックすると表示しているページと似ているサイトをいくつか教えてくれる。
そんなに使ってないけど単にリンクのあるサイトが出ているだけの気もする。

Mini Google Maps
アイコンをクリックするだけでちっこいGoogleMapが出現。検索枠もついてる。
これでいちいち新しいタブで地図を開かなくてもよくなるっ

Bubble Translate
翻訳エクステンション。
Ctrlを押しながら文字列選択とかで翻訳結果をツールチップ表示してくれる。
ヴぇんり。

AutoPatchWork
ページャーが存在するページで一番下までスクロールすると、次のページを勝手に取得してつなげて表示してくれる。

Sexy Undo Close Tab
閉じたタブをスタックしておいてあとで復元することができる。
やべっ、閉じちゃったっ! ってことが多い人はぜひ。
同じ内容のエクステンションMK UndoCloseTabよりも、ちょっぴり見た目がせくしー。

PageShot
クリックするとページのスクリーンショットをとってくれる。
一度ページ全体をキャプチャーしたあと、必要な部分だけ切り出すこともできる。
pngで保存可能。

Google Apps Shortcuts
Googleの提供するいろんなサービスへのショートカット
生活のすべてをGoogleに預けてちゃってる人は是非



使ってみて思ったこと
・いっぱい入れてみたけど体感速度は変わらず。モッサリしない。
・エクステンションのアイコンの表示位置はすべてここで固定?
・別の場所に移動させたい。それかせめて並べ替えたい。
・まだまだ微妙な出来のエクステンションが多い
・オプション画面がカッコ悪いのが多い
・インストール後に再起動を迫らない割に、再起動しないと動作しないものもあったり
・そもそもちゃんと動作しないものもあったり
・エクステンション同士が邪魔しあうことも
・でも乗り換えちゃっていいと思えるぐらい十分な性能

全般的に今後が楽しみといった感じです。