komagata毎週火曜日、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を書けるのも気持ちがイイ。
