LCL Engineers' Blog

夜行バス比較なび・格安移動・高速バス比較を運営する 株式会社LCL開発者のブログ

Google Chrome拡張機能で業務改善 入門編

フロントエンドエンジニアの岡田です。 業務改善大好きです。 LCLに入社してからは、Google Chromeの拡張機能でちょっと便利なツールを作っています。

Google Chromeの拡張機能は、HTML, CSS, JSで作るので、気軽に始められます。 今まで作ったツールは以下のとおりです。

  • 日報を簡単に作成するツール
  • チケット管理ツールの表示カスタマイズ
  • 本番サイト表示時に警告を表示するツール(テスト中に意図せず本番サイトへ遷移することを防ぐ)
  • 1クリックで接続先のサーバーを切り替え

その中でも、今回は最も簡単な拡張機能をご紹介します。 1クリックで接続先のサーバーを切り替える拡張機能です。 (テストサイト→本番サイトへ切り替えます)

ファイルは2つだけです。

manifest.json

{
    "name": "Publicサーバー切り替えextention",
    "version": "0.0.1",
    "manifest_version": 2,

    "description": "本番サイトへ切り替えます",

    "permissions": [
        "tabs", "http://*/*"
    ],

    "background": {
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_title": "本番サイトへ切り替え"
    }
}

background.js

function getAlternateUrl(url) {
    var nowUrlArray = url.split('/');
    var nowProtocol = nowUrlArray[0] + '//';
    var nowDomain = nowUrlArray[2];
    var nowRootPath = url.replace(nowProtocol + nowDomain, '');
    var targetDomain;
    if (/bus/.test(nowDomain)) { // URLにbusが含まれている場合は夜行バス比較なびへ
        targetDomain = 'bushikaku.net';
    }
    return nowProtocol + targetDomain + nowRootPath;
}

function clickHandler(tab) {
    var alternateUrl = getAlternateUrl(tab.url);
    chrome.tabs.update(tab.id, {
        url: alternateUrl
    });
}

chrome.browserAction.onClicked.addListener(clickHandler);

こちらのコードは、本番サイトへの切り替えのみですが、以下の3つも作り、アイコンを常駐させています。 地味ではありますが、1クリックで切り替えられるのが便利です。

  • ローカルサーバー(Develop)への切り替え
  • テストサーバー(Test)への切り替え
  • ステージングサーバー(Web)への切り替え

f:id:lcl-engineer:20160502011612p:plain

※アイコンを表示させることもできますが、設定しない場合はmanifest.jsonのnameの最初のアルファベットが表示される仕組みのようです。

テスト⇔本番だけの切り替えの場合は、以下の拡張機能でもできますが、切り替え先が複数の場合は使えません。 chrome.google.com

拡張機能の配布については、GoogleのApps for Workを契約していれば、組織内では無料配布できます。 次回は公開方法についてご紹介します。