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クリックで切り替えられるのが便利です。