Chrome拡張でAWSコンソールでのオペミスを防止する

対象

以下のようにAWSのリージョンでプロダクション環境/開発環境と使い分けて運用している人

東京(ap-northeast-1) => プロダクション環境
バージニア(us-east-1) => 開発（ステージング）環境

概要

AWSのリージョンによってプロダクション環境/開発環境と使い分けている場合、「開発環境だと思って操作したら実は本番だった」というオペミスが起こり得ます。
もちろんコンソール上部のリージョン名で区別がつきますが、これだと心もとないのでChrome拡張で本番環境の場合に警告を表示するようにしました。

※本来はIAMで適切に権限を絞るべきだと思います。

Chrome拡張の作り方

公式ドキュメントがありますが、時間がなかったのでこちらの記事を参考にさせていただきました。

スクリプトを任意のページで実行できる「Content script」というのが今回の用途にあっていたので、コンソールのヘッダー部分に特定のリージョンを表す文字列が入っていたら警告を出す、というスクリプトを実行するようにしました。

manifest.json

{
  "manifest_version": 2,
  "name": "これ本番ですよ",
  "description": "AWSコンソールがプロダクション環境(東京リージョン)の場合に警告を表示します",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["https://*.console.aws.amazon.com/*"],
      "js": ["jquery.min.js", "script.js"]
    }
  ]
}

script.js

/**
 * Created by Takuhiro Yoshida
 */
$(function() {
    console.log($(".nav-elt-label").text());
    var tokyo = /東京/;
    var global = /グローバル/;
    if($(".nav-elt-label").text().match(tokyo)) {
        $("#h").after('<div style="background-color:#FF0000;text-align:center;"><h3>これ本番ですよ！これ本番ですよ！これ本番ですよ！これ本番ですよ！これ本番ですよ！これ本番ですよ！</h3></div>');
    } else if($(".nav-elt-label").text().match(global)) {
        $("#h").after('<div style="background-color:#FFFF00;text-align:center;"><h3>これグローバルですよ！これグローバルですよ！これグローバルですよ！これグローバルですよ！これグローバルですよ！これグローバルですよ！</h3></div>');
    }
});

以下のようにディレクトリ、ファイルを作成し、Chromeの設定->その他ツール->拡張機能で「デベロッパーモード」をオンにして、「パッケージ化されていない拡張機能を読み込む」でこのディレクトリを指定すると使えるようになります。
jqueryはダウンロードしてきてください。

$ ls kore-honban-desuyo
jquery.min.js manifest.json script.js

(追記)Githubで公開しました => これ本番ですよ

最後に

今回Chrome拡張を初めて作りましたが、簡単なので他にもちょっとしたブラウザ操作の効率化に使えそうです。

参考

• http://qiita.com/edit-mode/items/26d7a22233ecdf48fed8