Chrome拡張機能開発講座第1回: Chrome拡張機能の全体像と構成ファイル

GoogleChrome(グーグルクローム)

2026.06.26

この記事は約4分で読めます。

Chrome拡張機能は、ブラウザに独自の機能を追加するための小さなWebアプリケーションです。HTML、CSS、JavaScriptという標準的なWeb技術で作成でき、特定のWebサイトだけに処理を追加することもできます。

この連載では、「Googleカレンダー上でショートカットキーを押すと、直近の予定へフォーカスするツール」を題材に、Chrome拡張機能の作り方を6回に分けて解説します。第1回では、拡張機能の全体像と構成ファイルを確認します。

作成する拡張機能の概要

今回のサンプルは、Googleカレンダーを開いている状態で z キーを押すと、現在時刻に近い予定を探してスクロールし、フォーカスとハイライトを行う拡張機能です。

Googleカレンダー標準の画面に、次のような操作を追加するイメージです。

Chrome拡張機能は、最初から難しい設定をすべて覚える必要はありません。基本は、フォルダを作り、その中に設定ファイルとJavaScript、必要に応じてCSSを置き、Chromeに読み込ませる流れです。

今回の拡張機能では、対象ページがGoogleカレンダーなので、manifest.json で calendar.google.com だけを指定します。これにより、他のWebサイトでは拡張機能が動かないようにできます。

Chrome拡張機能作りで最初に意識したいのは、「設定」「処理」「見た目」を分けて考えることです。設定は manifest.json、処理は content.js、見た目は styles.css に分けると、どこを直せばよいか分かりやすくなります。

最小構成では、次の3ファイルでChrome拡張機能を作成できます。

Googleカレンダー/
├─ manifest.json
├─ content.js
└─ styles.css

manifest.json は、Chrome拡張機能の設計図です。拡張機能の名前、バージョン、説明、どのページでどのJavaScriptやCSSを読み込むかを定義します。

今回の例では、GoogleカレンダーのURLを開いたときだけ content.js と styles.css を読み込むように指定します。

content.js は、Googleカレンダーの画面上で実行されるメインプログラムです。キー入力を監視し、予定要素を探し、対象の予定へスクロールしてフォーカスします。

Chrome拡張機能では、このようにWebページ側へ挿入されて動くJavaScriptを Content Scripts と呼びます。

styles.css は、対象の予定を視覚的に目立たせるためのスタイルシートです。JavaScriptが予定要素に専用のCSSクラスを付け、そのクラスに対して枠線やアニメーションを指定します。

この拡張機能は、3つのファイルが次の順番で連携して動きます。

つまり、manifest.json は設定、content.js は処理、styles.css は見た目を担当します。役割を分けておくことで、拡張機能の構造を理解しやすくなります。

Chrome拡張機能では、次のようなことができます。

今回の題材では、Googleカレンダーという既存のWebアプリに対して、「直近の予定へ移動する」という小さな機能を追加します。ブラウザ拡張の基本を学ぶには、ちょうど扱いやすい題材です。

第1回では、Chrome拡張機能の基本構造を確認しました。今回の拡張機能は、manifest.json、content.js、styles.css の3つのファイルで構成されています。

次回は、拡張機能の設計図である manifest.json の中身を詳しく見ていきます。