こんにちは、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ファイルになります。