個人・チーム内でしか使わないようなプライベートなChrome 拡張機能をサクッと作る

最近のテック系の記事とかTwitterを見るとみんな作っている物のレベルが高いので、Chrome 拡張機能を作ると聞いたら勝手に

• ブラウザ上で右クリックしたらメニューを出す
• タブでメニューを表示する

とかリッチなUIを含めて実装が必要なのかなと勝手にハードルを上げていたのですが、この間自分で使うためだけのChrome拡張機能を作ってみたところ

「特定のページにjsを仕込む」

というすごいシンプルな拡張機能も作れるんだなということに気づきがあったので今回記事にしました！(今更感)

そこでこの記事では自分が思う一番簡単な拡張機能を例にChrome拡張のサンプルを作って解説していきたいと思います。

一番シンプルなChrome拡張機能を作ってみる

今回は題材として自社のサービスの本番のページを表示したら「ここは本番環境です」とアラートを表示させるChrome拡張を作っていきたいと思います。

jsを仕込むだけのChrome拡張を作る場合、必要なファイルは以下の2つだけです。

- index.js (仕込むjsファイル本体)
- manifest.json (Chrome Extensionの設定ファイル)

index.js

window.alert('ここは本番環境です')

本番環境かどうかの判定はmanifest.json側で行うので、jsではアラートを表示させるコードを書くだけになります。

manifest.json

{
  "manifest_version": 3,
  "name": "ここにChrome Extension名",
  "description": "ここに説明",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": [
        "https://www.google.com/"
      ],
      "js": [
        "index.js"
      ]
    }
  ]
}

content_scripts matchesを使うと、指定したURLのみに指定したjsファイルを読み込ませることができます。(上記の例は本番のURLをGoogleのトップページとして、index.jsを読み込ませるようにしています)

ファイルはたったこれだけです。
では最後に作成した拡張機能をChromeに追加していきます。

Chromeに作成した拡張機能を追加する

自分用にChrome拡張機能を作る場合は、ストア上に公開するために証明書の発行やリリースのためのレビューを受ける必要はありません。以下の手順で追加することができます。

1. chrome://extensions/ にアクセス
2. 右上のSwitchボタンでデベロッパーモードを有効化

3. 「パッケージ化されていない拡張機能を読み込む」をクリックして上で説明していた2つのファイルを含めたフォルダを読み込ませる

できあがり！

あとがき

https://github.com/ichiki1023/deployable-env-checker
自分がこの記事を作成しようと思ったきっかけとなったものです。

今の職場では開発環境がN個用意されていて、PRのタイトルに[deploy-devN]の文字を含めると指定した環境にデプロイすることができるのですが、(dev5にデプロイしたい場合は[deploy-dev5] タイトル名 と入力する)

いざデプロイしようと思うと、

1. PR一覧ページで空いているdev環境を探す
2. タイトルに空いている環境の数字を入力する

ということをやっていて非常に面倒だったのでここを自動化できないかと考え始めたのが今回の記事の発端でした。

TypeScript化やスクレイピングとかもやっていたので、興味のある方はこちらも見て頂けると嬉しいです。