ついにやってきましたAWS温泉ハッカソン。
自分の考えてきてネタはいくつかあるがChromeアドオン作りたい熱が高まってきたので、Management Consoleの表示の制御をしようと思いつき、「コンソールあるある」の一つ「terminatedなインスタンスがじゃま」を解決するアドオンを書きます。
まずはドットインストールを見るべし！これすばらしいです。ざっと把握できてすぐにコード書こうという気にさせてくれるレッドブル的なコンテンツすばらしい。
■Google Chrome拡張機能入門 (全20回) – プログラミングならドットインストール
どんな風に開発するかは後にして、インストールがうまくいくとこのようなボタンが出現します。
ボタンは押すごとにterminatedなインスタンスの表示・非表示の切り替えができます。
クリックすると
こんな感じで切り替えられます。
これでプレゼンやハンズオンなどでデモするときにも恥ずかしいインスタンスを隠すことができますｗ
今のコンソールだと実はフィルタが充実していて…
こんなものでも使ってみたい方がいたらこちらからどうぞ→ Hide Terminated Instances Chrome Extension
はー、勉強になった。さて、風呂にでも入るか。
【追記】
ソースコードがどうなっているか、少し解説。
- manifest.json - icon.png - hide.js - jquery-1.9.1.min.js
まずアドオンを作るにはおきまりのマニフェストファイルminifest.jsonを作ります。
まず permission にコンソールのURLを指定して動作許可します。実装したJavaScriptは hide.js なので読み込む指定を background に。また今回はjQueryを利用したいので content_scripts で指定してます。
{
"name": "Hide Terminated Instances",
"description": "Hide terminated instances in AWS Management Console.",
"version": "0.1",
"permissions": [
"tabs", "https://console.aws.amazon.com/ec2/*" // EC2のコンソールでのみ許可
],
"background": { "scripts": [ "hide.js" ] }, // 自作の切り替えスクリプトを読み込む
"browser_action": {
"default_icon": "icon.png", // アイコン画像の指定
"default_title": "Hide Terminated Instances"
},
"content_scripts": [
{
"matches": [ "https://console.aws.amazon.com/*" ],
"js": [ "jquery-1.9.1.min.js" ], // jQuery読み込み
"run_at": "document_start"
}
],
"manifest_version": 2
}
アイコンは適当に縦横 19px で作っておきます。あとは切り替え機能本体を定義している hide.js を作ります。
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {
code: "if ( localStorage['terminated_hidden'] == 0 ) { $('td.yui-dt-col-instanceState div').each(function(){ if ($(this).text().match(/terminated/i)) { $(this).parent().parent().hide(); localStorage['terminated_hidden'] = 1; } }) } else { $('td.yui-dt-col-instanceState div').each(function(){ if ($(this).text().match(/terminated/i)) { $(this).parent().parent().show(); localStorage['terminated_hidden'] = 0; } }) }"
});
});
localStorage['terminated_hidden'] = 0;
1行目でボタンクリック時のイベントハンドラを登録。2行目の chrome.tabs.executeScript で実際の動作をJavaScriptで実装しています。いくつか方法がありますが、今回は code を使って直接コードを文字列で書いてます。（もっと賢く書く方法を知りたい）
3行目のコードですが、まずトグルするために状態保持をローカルストレージを利用して localStorage[‘terminated_hidden’] をチェックします。terminatedな行を見極めるためにjQueryのセレクタとして「td.yui-dt-col-instanceState div」を指定し、子要素のテキストが「terminated」とマッチするかチェックしてます。マッチしたら行に対応する要素に遡って hide() を実行すると消えるわけですね。この辺の要素を探すところはFirebugやChromeのDeveloper Toolを使ってやるのが良いでしょう。