コードDJ第9回 – Chrome Extensionに挑戦

毎週火曜日、Help me, hackers!に上がったコードを紹介していくコードDJ 第9回。

「あなだのコードがー しぬほどスキダカダー!」(@チャン・ドンゴン)

komagata a.k.a. DJです。

今回紹介するのはコレ。

Ham Cutlet Chrome Extension – Help me, hackers!

HTMLのインデントを綺麗にする誰得サービスHam CutletのGoogle Chrome Extension。ブラウザの「このページのソースを見る」の代わりにインデントを綺麗にしたソースを表示するボタンをOmniBoxの右に追加するExtensionだ。

mongorian_chop a.k.a. 自由人が作ってくれた。ボタンのアイコンはmachida a.k.a. 漫★画太郎。軽いコラボ。

コードはココ。

mongorian-chop’s hamcutlet-extension at master – GitHub

manifest.json

[cc lang=”javascript”]{

“name”: “Ham Cutlet Extension”,

“version”: “0.1”,

“description”: “Ham Cutletを使用したHTMLソース表示”,

“background_page”: “background.html”,

“browser_action”: {

“default_icon”: “icon.png”,

“defailt_title”: “Ham Cutlet”

},

“permissions”: [

“tabs”

]

}[/cc]

background.html

[cc lang=”html”]

[/cc]

Chrome Extensionの作り方なんて知らないって?それならDJに任せろ!当然の如くDJも知らないからお前らの代わりに泣きながら覚えてやる!

モダンブラウザ・JS好きなら知らぬものはいないid:os0xの連載、続・先取り! Google Chrome Extensions:第1回 Chrome ExtensionsのAPI#1|gihyo.jp … 技術評論社で丁寧に説明されてるのでこれでわかりそうだ。

DJが超訳するとこんな感じだ。

  • manifest.jsonの入ったディレクトリを作る
  • 上のバーの右にあるボタンはbrowser_actionという
  • browser_actionのボタンを押した時の動きはbackground_pageで指定したhtmlに書く
  • Chromeで.crxパッケージを作れる。(単なるzipなので解凍も出来る)(CUI野郎にはConstellation’s crxmake at master – GitHubというパッケージングコマンドもあるらしい。)

作れる気がしてきた!早速コードを見ていこう。

6行目のbrowser_actionでタイトルとアイコンを設定してる。

10行目のpermissionsはクロスドメインでアクセスできるURLを指定するようだが、tabsはなんだろう?

5行目のbackground_pageで実際の動作を書くファイルを指定している。

background.htmlを見ていこう。

10行目のchrome.browserAction.onClicked.addListenerがキモだ。こうやってbrowser_actionをクリックした時の動作を設定するのだろう。

7行目のchrome.tabs.createでURLを指定してタブを開けるらしい。何かグリモンでも思ったけどクロスブラウザ問題が無いとJSってこんなにシンプルに書けるのかという・・・。

URLは以前、「HTMLのインデントを綺麗にするAPI – Help me, hackers!」でkyanny a.k.a. 刺身ブーメランが作ってくれたHam Cutlet APIを使って該当ページのソースをインデントを綺麗にした上で取得している。

これは簡単・・・。グリモンやFF拡張もそうだけど、実用的なものが簡単に作れるのがイイ!ECMAScripter的にもクロスブラウザに悩まされず思いっきりJSを書けるのも気持ちがイイ。

comments powered by Disqus