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
1 2 3 4 5 6 7 8 9 10 11 12 13 | { "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" ] } |
background.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <script> function openTab(v) { t = "http://hamcutlet.fjord.jp/?url=" + v; chrome.tabs.create({url: t}); } chrome.browserAction.onClicked.addListener(function(tab) { getUrl(); }); function getUrl() { chrome.tabs.getSelected(null, function(tab) { var url = tab.url; if(url.match(/^http(s)?/)) { openTab(tab.url); } }); } </script> </head> <body> </body> </html> |
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を書けるのも気持ちがイイ。
