Chrome拡張機能を作りながら、
Claude Code／Codexの
基礎を学ぼう

Chrome拡張機能は、
何でできている？

翻訳、広告ブロック、パスワード管理……。Chrome拡張機能（Chromeに機能を足す小さなプログラム）は、毎日のように使っている方も多いと思います。

でも、その中身を見たことはあるでしょうか。

正体は、フォルダ1つです

今日の完成版「定型文パレット」のフォルダの中身（主なもの）

Chromeは、このフォルダを丸ごと読み込んで動かします。

manifest.json（マニフェスト）＝設定表

{
  "manifest_version": 3,
  "name": "定型文パレット",
  "version": "1.3.0",
  "permissions": ["storage", "sidePanel", "contextMenus", ...],
  "side_panel": { "default_path": "sidepanel.html" },
  "icons": { "16": "icons/icon16.png", "128": "icons/icon128.png", ... }
}

• 拡張機能の名前・版・使う機能・どのファイルを使うかを書いた表です
• このファイルが無いと、Chromeは拡張機能として読み込めません

画面と、その裏で働くファイル

このほかに、画面には出ない裏方のファイルや、Webページの中で働くファイルが組み合わさって、1つの拡張機能になっています。

アイコンも、サイズ違いで用意します

Chromeの公式ガイドでは、この3つのサイズを用意することが勧められています。定型文パレットでは、ツールバー用に32pxも足して4枚にしています。

画像の形式はPNG（背景を透明にできる画像）。

全部そろって、
はじめて拡張機能になる

設定表・画面・裏方・アイコン。これを全部、自分で1から書くのは大変です。

でも今は、AIエージェントに「こういうものを作りたい」と伝えれば、フォルダの中身を一気に作ってもらえます。

チャットのAIと、
AIエージェントの違い

たとえるなら

調べる → 作業する → 確かめる

↺ 終わるまで、これを何度もくり返す

頼まれた内容に合わせて、エージェントが自分で次の一手を決めていきます。途中で止めたり、方向を変えてもらったりもできます。

参考：Claude Code公式ドキュメント「How Claude Code works」

Claude Code と Codex

作っている会社は違いますが、どちらもAIエージェントです。今日の流れは、どちらを使っても同じです。

ふだんの操作と、ターミナルの操作

Claude CodeもCodexも、もともとはターミナルで使う道具として登場しました。今はデスクトップアプリ（GUI）からも使えます。今日はデスクトップアプリで進めます。

デスクトップアプリでも、
中ではコマンドが動いている

たとえば「このフォルダにWebアプリを作って」と頼むと、エージェントは作業の途中で、こんなコマンドを実行します（アプリの画面に表示されることもあります）。

npm（エヌピーエム）は、JavaScriptの部品を入れる道具です。今日の拡張機能は部品がいらないので、npmは使いません。

Git（ギット）とは

• ファイルの変更の履歴を記録しておく仕組みです
• 「いつ・どのファイルを・どう変えたか」が残るので、前の状態に戻したり、変えた所を見比べたりできます
• ゲームのセーブポイントのようなもの、と考えると分かりやすいです

GitHub（ギットハブ）は、このGitの履歴をインターネット上に預けておくサービスです。座学③で少しだけ触れます。

慣れるまでは「毎回確認する」設定で

• エージェントがファイルを書き換える前や、コマンドを実行する前に「実行していいですか」と聞いてくる設定があります（Claude Code・Codexとも）
• 毎回の確認は少し面倒ですが、内容を読んで、許可しながら進めるのがおすすめです
• エージェントが作業の対象にするのは、基本的に開いたフォルダの中です。だからフォルダを分けて作業することが大事になります

いちばん気をつけたいのは「削除」

確認の画面に、こんなコマンドや言葉が出てきたら、すぐに許可しないでください。

Claude Codeには、ファイルの変更を元に戻す仕組みもあります。ただしメール送信などの外への操作は戻せません。

使い始める前に
用意する3つ

この3つは、拡張機能に限らず、Claude Code／Codexで何かを作る時はいつも同じです。

1つの制作物に、1つのフォルダ

エージェントは、開いたフォルダの中を見て、そこで作業します。このフォルダのことをプロジェクトとも呼びます。

• 拡張機能を1つ作るなら、そのためのフォルダを1つ
• 別のものを作る時は、別のフォルダを作る

※フォルダは「ディレクトリ」とも呼ばれます。同じものです。フォルダを開かずに使う方法もありますが、それは例外。基本は「フォルダを作って、開いて使う」です。

大元のフォルダは、
自分で作る

フォルダを作るところからAIに任せることもできます。でも最初の1つは、自分で作るのがおすすめです。

• どこで作業させるかを決めるのは自分。場所が決まっていれば、作ったものが迷子になりません
• そのフォルダの中に何を入れるかは、AIと相談しながら決めていきます

フォルダの中は、こうなっていきます

今日、実践が終わるころのイメージ（実際の構成はAIとの相談で決まります）

「.md」はマークダウン（見出しや箇条書きを記号で書く、文字だけのファイル）。メモ帳でも開けます。

AGENTS.md／CLAUDE.md（指示書）＝
作業部屋のルール

AGENTS.md（エージェンツ・エムディー）や CLAUDE.md（クロード・エムディー）は、エージェントが作業を始める時に、毎回最初に読むファイルです。この教材では、2つをまとめて「指示書」とも呼びます。

• このフォルダで何を作っているのか
• 守ってほしいこと・やってほしくないこと
• どんな話し方をしてほしいか

一度書いておけば、毎回同じ説明をしなくて済みます。

AGENTS.md と CLAUDE.md、どっちを置く？

出典：Claude Code公式ドキュメント「How Claude remembers your project」（AGENTS.mdの節）／Codex公式ドキュメント「AGENTS.md」

AGENTS.md／CLAUDE.md（指示書）には、
何を書く？

新しいスレッドでは、
AIは前の会話を覚えていません

スレッド（1つの会話のまとまり）を新しく始めると、エージェントは前のスレッドで話したことを覚えていない状態から始まります。

• 翌日に続きをやりたい時
• 会話が長くなって、新しいスレッドに切り替えたい時

このままだと「どこまでやったっけ？」から始まってしまいます。

参考：Claude Code公式ドキュメント「How Claude Code works」（新しいセッションは、前の会話の履歴なしで始まる）

だから、記録をファイルに残す

GitHub（ギットハブ）にも保存しておくと安心

作業フォルダの写しを、インターネット上の保管場所に置いておく仕組みです。

• パソコンが壊れても、フォルダを元に戻せる
• いつ・何を変えたかの履歴が残る

これも「GitHubに非公開で保存して」とAIに頼んで進められます。詳しいやり方は、また別の機会に扱います。

この3つを、実際にやってみます

大元のフォルダを、自分で作る

「書類」など見つけやすい場所に、この名前でフォルダを作ってください。

my-snippet-palette

作りたいものを伝えて、
フォルダの構成を相談する

いきなり作らせず、まず相談します。開いたフォルダで、そのまま貼ってください。

このフォルダで、Chrome拡張機能を作りたいです。
作りたいもの：よく使う文章（挨拶・返信・AIへの指示文など）を登録しておき、Chromeのサイドパネルから、Webページの入力欄へ挿入したりコピーしたりできる拡張機能です。右クリックからも、文章の保存や挿入ができるようにしたいです。

私はChrome拡張機能を作るのは初めてです。
まだ何も作らずに、次の2つを相談させてください。

1. このフォルダの中を、どんなファイル・フォルダの構成にしたらいいですか。それぞれ何のためのものかも教えてください。
2. AIエージェント向けの指示書（AGENTS.md）、使う人向けの説明書（README.md）、続きの作業のための引き継ぎ書（docs/引き継ぎ.md）には、それぞれ何を書いたらいいですか。

専門用語には、かっこ書きで短い説明を付けてください。

返ってきた案を、読んでみる

• 分からない言葉があれば、そのまま聞き返す
• ファイルが多すぎて分からなければ「もっと少なくして」と頼む
• 気になる所は、言葉で直してもらう

聞き返す時の例

「service worker」とは何ですか？今回の拡張機能に本当に必要ですか？

AGENTS.md・README.md・引き継ぎ書を
作ってもらう

その構成で進めます。
まず AGENTS.md、README.md、docs/引き継ぎ.md の3つだけ作ってください。
拡張機能のプログラムは、まだ作らないでください。

AGENTS.md には、次の約束も入れてください。
- 日本語で、専門用語には短い説明を付けて話す
- 作業の前に、何をするかを短く説明する
- 登録した文章は外部に送らない
- 作業を区切る時は、docs/引き継ぎ.md を更新する

できたファイルを、開いて確かめる

拡張機能を、まるごと作ってもらう

配布する完成版と同じ機能を、1つのプロンプトで頼みます。長いので折りたたんでいます。開かなくても、右上の「コピー」で全文をコピーできます。

AGENTS.md を読んでから、Chrome拡張機能「定型文パレット」を作ってください。
よく使う文章（返信文・案内文・AIへの指示文など）を登録しておき、Chromeのサイドパネルや右クリックから、すぐに使えるようにする拡張機能です。

## 作ってほしい機能

1. サイドパネル
- ツールバーの拡張機能アイコンを押すと、Chromeの右側にサイドパネルが開く
- 上に「＋ 定型文を追加」ボタンと、登録した文章を探せる検索欄を置く

2. 登録・編集・削除
- 本文だけで保存できる（名前と分類は任意。名前が空なら、本文の先頭から自動で付ける）
- 一覧の各行の「…」から、編集・削除ができる。削除の前には確認を出す

3. 使う
- 一覧の各行に「挿入」と「コピー」のボタンを置く
- 挿入：Webページで最後にクリックした入力欄の、カーソルの位置に文章を入れる（送信はしない）
- 挿入できないページでは、自動でコピーに切り替えて、そのことを表示する

4. 右クリックメニュー
- どのページでも、右クリックから「定型文パレットを開く」でサイドパネルを開ける
- Webページの文章を選んで右クリック →「選択した文章を保存」で、定型文として登録できる
- 入力欄で右クリック → 登録した定型文を選ぶと、その場に挿入できる

## 作り方の条件

- Manifest V3 で、HTML・CSS・JavaScriptだけで作る（ビルドや外部のサービスは使わない）
- manifest.json は、このフォルダの直下に置く
- 登録した文章は chrome.storage.local（Chromeの中の保存場所）に保存し、外部には送らない
- ファイルは役割ごとに分けて、初めての人が見ても何のファイルか分かる構成にする
- アイコン画像を作る（16・32・48・128ピクセルのPNG。シンプルな吹き出しの形で、色はネイビーとくすみピンク）
- 見た目は白を基調に、すっきりと。サイドパネルの狭い幅でも使いやすくする

## 終わったら

- README.md に、できること・ファイル構成・Chromeへの読み込み方を、初めての人向けに書く
- Chromeへの読み込み方を、チャットにも手順で教える
- docs/引き継ぎ.md を更新する

エージェントの動きを、見てみよう

できたフォルダの中を、のぞいてみる

• manifest.json がありますか？（設定表）
• 画面のファイル（.html・.css・.js）がありますか？
• アイコンの画像（icons などのフォルダ）はありますか？

Chromeに入れる

chrome://extensions

うまく入らない時は

• 選ぶフォルダを確かめる：最初に作った my-snippet-palette フォルダです。開いた時に manifest.json が見えていれば正解。見えない時は、AIに「manifest.json はどのフォルダにありますか？」と聞きましょう
• エラーが出たら：表示された文章をそのままコピーして、AIに「このエラーが出ました」と貼り付ける
• 読み込んだフォルダは動かさない：Chromeはそのフォルダを読み続けて動いています。移動・削除すると動かなくなります

動かしてみよう

新しいタブ（Googleロゴの下に「Chrome をカスタマイズ」がある画面）には挿入できません。その時は「コピー」を使います。

自分好みに、1か所だけ直す

使ってみて気になった所を、AIに伝えて直してもらいます。

コツは、どこが・どう気になって・どうしたいかを具体的に言うことです。

使ってみて、ここを直したいです。
（どこが）登録した文章の一覧
（どう気になるか）文字が小さくて読みにくい
（どうしたいか）少し大きくして、行と行の間をあけたい
直す前に、どう直すかを短く説明してください。

miraiが実際に直してもらったこと

使う前には分からなかったことばかりです。使ってから直す、で大丈夫です。

直したあとは、
Chromeにも反映させる

エージェントがファイルを直しても、それだけではChromeの画面は変わりません。

記録して、今日を終える

今日はここまでにします。
docs/引き継ぎ.md を更新してください。
今日やったこと・決まったこと・残っていること・次にやることを書いてください。

翌日に持ち越す時、会話が長くなった時、区切りがついた時。この一言を習慣にしておくと安心です。

新しいスレッドで、続きから始める

新しいスレッドを開いて、同じフォルダで貼ってみてください。

AGENTS.md と docs/引き継ぎ.md を読んで、前回の続きから進めたいです。
まず、今どこまでできていて、次に何をするところかを教えてください。

何を作る時も、この流れです

ファイルを1つずつ自分で作って打ち込むのではなく、AIと相談しながら作ってもらい、中身を確かめて直す。これが基本の使い方です。

完成版「定型文パレット」をお配りします

使い方は、フォルダの中の README.md にまとめてあります。

どちらの使い方でも大丈夫です

今日の続きで、扱いたいこと

• Chrome拡張機能の詳しい仕組み
• GitHubで、作業フォルダを保存・管理する
• 長く育てていくプロジェクト（自分の仕事をAIに1つずつ任せていく作り方・スキル・点検）

今日は「1つの制作物を作るプロジェクト」から始めました。まずはこの形で、何か1つ作ってみてください。

今日の内容の出どころ

Claude Code「How Claude Code works」

Claude Code「How Claude remembers your project」（AGENTS.md）

Codex「AGENTS.md」

Chrome for Developers「Icons」

2026年10月6日時点の内容です。