【初心者向け】Chrome拡張機能を自作してみた
はじめに
こんにちは、山本 翔大です。
普段何気なく使っている Chrome 拡張機能ですが、実際に自分で作るとどれくらい大変なのか気になったため、今回は以下のチュートリアルを参考に拡張機能を作ってみました。
なお、今回は簡単なテストとして、設定したリンクを開くだけのシンプルなものを作成しました。
1. ファイルの作成
まずはファイルの作成を行います。
拡張機能を作るにあたって以下の 3 つを作成します。
project/
├─ manifest.json
├─ view.html
└─ icon.png
- manifest.json
拡張機能の名前やアイコンなどを設定するファイル - 表示用の HTML ( view.html )
拡張機能クリック時に表示される HTML - アイコン画像 ( icon.png )
128px × 128px の画像
() 内のファイル名は自由ですが manifest.json は固定になっています。
なお、アイコン画像は必須ではなく、指定しない場合は Chrome のデフォルトアイコンが表示されます。
用途に応じて 16px・32px・48px・128px のアイコンを用意することが推奨されていますが、今回は簡単なテストのため 1 つの画像のみ使用します。
2. コードの作成
各ファイルのコードは以下のように作成しました。表示用の HTML のファイル名やアイコン画像の名前を上記と別のものにしている際はあわせて変更してください。
manifest.json
{
"name": "Test Extension",
"description": "DevelopersIO link",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "view.html",
"default_icon": "icon.png"
}
}
ファイルの中身は以下のようになっています。
| プロパティ | 説明 |
|---|---|
| name | 拡張機能の名前 |
| description | 拡張機能の説明 |
| action/default_popup | アイコンクリック時に表示するファイル |
| action/default_icon | 表示するアイコン |
表示する HTML は以下のように書きました。
view.html
<html>
<body>
<a href="https://dev.classmethod.jp/" target="_blank">DevelopersIO</a>
</body>
</html>
リンクをクリックすると新しいタブで DevelopersIO のリンクが開かれます。
注意点として、リンクにはtarget="_blank"を設定してください。設定しないと拡張機能のポップアップ内でページを開こうとしてしまい、正常に開くことができません。
3. Chromeで読み込む
最後に Chrome で拡張機能を読み込みます。
- chrome://extensions/ にアクセスし、右上のデベロッパーモードを有効にします
- 「パッケージ化されていない拡張機能を読み込む」ボタンが表示されるので、クリックして作成したフォルダを選択します
- 拡張機能が読み込まれたら、拡張機能一覧からアイコンをクリックすると、設定したリンクが表示されます
なお、開発時の注意点として HTML や CSS の変更はポップアップを開き直すだけで反映されますが、JavaScript の変更や manifest.json の変更は、chrome://extensions/ から拡張機能を再読み込みする必要があるため注意してください。
おわりに
今回は簡単な Chrome 拡張機能を作ってみました。
なんとなく難しそうなイメージがありましたが、案外すぐに作成することができました。
今回作成したのはリンクを開くだけの簡単な内容なので、いろいろカスタマイズしてお試しください。
参考資料
以下は本文中では触れていませんが、参考になりそうな記事です。
クラスメソッドオペレーションズ株式会社について
クラスメソッドグループのオペレーション企業です。
運用・保守開発・サポート・情シス・バックオフィスの専門チームが、IT・AIをフル活用した「しくみ」を通じて、お客様の業務代行から課題解決や高付加価値サービスまでを提供するエキスパート集団です。
当社は様々な職種でメンバーを募集しています。
「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、クラスメソッドオペレーションズ株式会社 コーポレートサイト をぜひご覧ください。※2026年1月 アノテーション㈱から社名変更しました
