https://zenn.dev/ichiki/articles/b78fedf1ad672c

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

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

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

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

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

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

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

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

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

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

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

{
  "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ボタンでデベロッパーモードを有効化