こんにちは、ROBOT PAYMENTのプロダクト開発本部ペイメントシステム課のtaniguchikun です。
ブラウザの拡張機能を使う事で誤操作を防いでみたエピソードを、お伝えできればと思います。
※本記事にChatGPTは使用されておりません。筆者の熱い想いが書かれておりますｗ

拡張機能とはどういう機能かというのをご説明をできればと思います。

以下3つの機能があります。

特定のサイトを閲覧したときに自分が実装したJavaScriptを読み込ませて実行する機能
ブラウザが起動した際にバックグラウンドで処理を行う機能
ブラウザにアイコンボタンを用意し、アイコンをクリックすると用意したHTMLファイルをポップアップで表示する機能

本記事では①つ目の機能について例えを用いてご説明します。

自分は開発作業を行っている中で、サイトを大量に開きっぱなしにしている時が多々あり、
確認している対象サイトが開発環境のサイトなのか本番環境のサイトなのか分からなくなる時があります。

対策としてブラウザの拡張機能を使用して画面表示時にURLで背景色を変えることを行い、間違えることを防いでいます。

どのようにブラウザの拡張機能を作り、動作させるかを説明していきたいと思います。
まず下図のようなフォルダー構成でファイルを準備します。

EnvironmentColor
    ├─ main.js
    └─ manifest.json

main.js

window.onload = function() {
    // URLから開発環境か判断
    let color = 'red';
    if(-1 < window.location.origin.search('.prod.'))
    {
        color = 'green';
    }
    else if(-1 < window.location.origin.search('.stg.')){
        color = 'blue';
    }
    var bodyElement = document.querySelector('body')
    bodyElement.setAttribute('style', 'background-color: ' + color + ';');
};

manifest.json

{
    "manifest_version": 3,
    "name": "environment color",
    "description": "環境表示",
    "version": "1.0.0",
    "content_scripts": [{
        "matches": [
            "https://*.自社URL.com/*",
            "http://local.dev.com/*",
            "http://local.prod.com/*",
            "http://local.stg.com/*"
        ],
        "js": [
            "main.js"
        ]
    }]
}

フォルダーとファイルが準備出来ましたら、後はブラウザに読み込ませるだけになります。以下の手順通りに読み込みをすれば意図した通りの動作を行います。

まずは赤枠の拡張機能を管理を選択してください。
赤枠のデベロッパーモードをオンにしてください。
赤枠のパッケージ化されていない拡張機能を読み込むを選択して今回作成したフォルダーを選択してください。
後は対象となるサイトにアクセスしていただくとmain.jsが動作し、対象URLによって背景色が変わります。

動作前動作後

詳細を説明したいと思います。
まずmanifest.jsonファイルから説明したいと思います。

manifest_versionは3と仕様で決まっています。
nameはパッケージの名前になるので任意で決めてください。
descriptionは説明になるので、任意に決めてください。
versionはパッケージのバージョンになります。
content_scriptsは今回の肝となります。
- matchesは動作させたいURLになり、複数指定も出来ますしワイルドカード指定も出来ます。
- jsは動作させたいJavaScriptファイルになります。

次にmain.jsファイルを説明したいと思います。

1行目のwindow.onloadイベントに登録を行う事で、画面が表示された時に処理が行われます。
3行目でURLに.dev.が含まれているか判断します。
- 含まれていない場合は何も処理を行いません。
7行目でbody要素の取得を行います。
8行目でbody要素に背景色が赤になるスタイルを追加しています。

以上を持って説明は終わりとなります。
このような細々とした事がコード管理されてない方がコードは読みやすくなると考えておりますので、ブラウザの拡張機能がもっと知られていけばと思っています。

もっと知りたいよといった方はドキュメントのURLを記載しておりますのでご確認してみてください。

developer.chrome.com

反響がありましたら残りの機能についても紹介していきたいと思います！

We are hiring！！

ROBOT PAYMENTでは一緒に働く仲間を募集しています!!!

speakerdeck.com
www.robotpayment.co.jp
🎉twitter採用担当アカウント開設！🎉どんどん情報発信していきます！！