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

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

タグ [　 Tech　 Chrome　 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
  1. {
  2.   "name": "BackToTheLastTab",
  3.   "version": "1.0",
  4.   "description": "Go back to the last tab when you close a tab.",
  5.   "background_page": "background.html",
  6.   "permissions": [
  7.     "tabs"
  8.   ]
  9. }

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

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

  1. ■ browser_action
  2. 上部メニューにアイコンが追加される、最も基礎的なExtension。
  3. アイコンをクリックしたときにExtensionが実行される。
  4. すべてのページで共通して使えるような機能を実装する。
  5.  
  6. ■ page_action
  7. アドレスバーの右にアイコンが表示される形式のExtension
  8. 特定のページにだけ有効な機能を実装するのに使われる。
  9. RSS取得ボタン等々。。
  10.  
  11. ■ options_page
  12. Extensionの設定を変更するオプションページのHTMLを指定する。
  13. HTMLとJavaScriptで記述。
  14.  
  15. ■ chrome_url_overrides
  16. Chromeの特定のページを上書きする。
  17. 新規タブを開いたときや、履歴ページを開いたときに、独自のページを表示させることができる。
  18. Feedlyとかが使ってるのがこれ。
  19.  
  20. ■ background_page
  21. Extensionが起動した瞬間からずーっと実行されているページ。
  22. HTMLで記述されてるけど実際は表示されない。
  23. ここにJavaScriptでコードを仕込んでおいて、必要なときに実行させたりする。
  24. とりあえず何かしたかったらここにJavaScript仕込めばいいと見た。

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


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


background.html
  1. <html>
  2. <head><title>background</title></head>
  3. <script type="text/javascript">
  4.  
  5. var selectedId1 = -1; // 直前に開いたタブのID
  6. var selectedId2 = -1; // ↑のひとつ前に開いていたタブのID
  7.  
  8. /**
  9.  * タブが切り替えられたときの処理
  10.  */
  11. chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {
  12.   //  alert(tabId + ':' + selectInfo);
  13.   selectedId2 = selectedId1;
  14.   selectedId1 = tabId;
  15. });
  16.  
  17. /**
  18.  * タブが閉じられたときの処理
  19.  */
  20. chrome.tabs.onRemoved.addListener(function(id, removedInfo) {
  21.   //  alert(id + ':' + removedInfo);
  22.   //  alert('selected2 = ' + selectedId2);
  23.   
  24.   if (selectedId2 > 0) {
  25.     chrome.tabs.update(selectedId2, {selected:true});
  26.   }
  27. });
  28.  
  29. </script>
  30. <body>
  31. </body>
  32. </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を作ってみてください。

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事