Chrome拡張機能で、特定のURLのページでアラートを出す機能を作成する方法です。
経緯
業務で気を付けてはいても、本番環境と開発環境を間違ってしまうことがある（←危ないやつ汗）。
少しでも間違いを防止するため、また、本番環境作業時は気を引き締めて作業に臨めるようにするため、本ツールを作ってみました。
作成手順
作り方はとっても簡単！手際よくやれば1分もかからないでしょう。
1. Javascriptファイルの作成
本番環境訪問時に出力させたいアラートを記述します。
content.js
window.alert("本番環境です！");
2. manifest.jsonの作成
設定ファイルです。
ポイントは、matchesの行に、上のアラートを出力させるページのURLを記述すること。これで、指定したURLのページ訪問時のみアラートが出力されるようになります。
manifest.json
{
"name": "URL Checker",
"version": "1.0.0",
"manifest_version": 2,
"description": "Check URL and show alert if it's production environment",
"content_scripts": [{
"matches": ["https://www.hogehoge.jp/*"],
"js": [
"content.js"
]
}]
}
各項目の説明です。
- name：拡張機能の名前を記載。最大45文字。
- version：バージョン。1～4つの数字をドットで区切ります。
- manifest_version：マニフェスト・バージョン。現状有効なのは2のみなので、そのまま記述。
- description：拡張機能の説明。最大132文字。
- content_scripts：matchesに処理を行いたいURLのパターンを、jsに処理を記述したJavascriptファイルを記述。
3. 拡張機能の読み込み
あとは上の2ファイルをひとつのフォルダにまとめて、Chromeに読み込ませるだけ！
注意点
本ツールはChromeのみ対応なので、別ブラウザを使用している場合、また、クロスブラウザテストの際には残念ながら使えません。。
その場合は、URLをひとつのページにまとめ、本番環境遷移時にはアラートを出す、とかにしたほうがよいかも。
参考
本手順は、主に、@RyBBさんの
Chrome拡張の作り方 (超概要) | Qiita
を参考にさせていただきました。
というか、「特定の画面でアラートを出す」ほぼそのままです。
最初もっと複雑な作り方をしようとしていたのですが、調べていてこれでいけるやん！となりまして。めっちゃ感謝です！
タイトルの通り、Chrome拡張の作り方の概要が詳しく書かれているので、ぜひご参考に！
manifest.jsonの内容については、
Chrome 拡張機能のマニフェストファイルの書き方 | Qiita
を参考にさせていただきました。
ありがとうございました！