お疲れ様です、ナッシーです。
今回はタイトル通り、プログラミングのプの字も知らない茄子が、Chromeの拡張機能をAIを利用して作ってみるという内容になります。
INDEX
1章：なぜChrome拡張機能を作ることになったのか
普段から業務中に使っているChromeの拡張機能。私は
- ColorZilla（Webサイト上で使用されている色のコードをコピペできる）
- FireShot（Webサイト全体のスクリーンショットを撮れる）
- WhatFont（Webサイト上の文字のフォントの種類とサイズを確認できる）
このあたりをよく利用しています。
しかし、これを自分で作るという発想はありませんでした。
きっかけは、AIに力を入れている弊社が実施している『虎の穴』という育成プログラム。
その中の『Google Chrome拡張機能開発』という講座でした。
あれって個人で作って実装できるんだ…
講座の説明にはこうありました。
・非エンジニアでもOK！
・プロンプト設計から実装までマスター！ コーディングは全て「AI」任せです！
私はJavaScriptをほぼ読めません。
が、仕様を考えることならできる。
ということで受講開始。
2章：Chrome拡張機能ってどうやって作るの？
受講後の感想
結論から言うと、作れるようになりました。
簡単なものであれば想像以上に制作難易度は意外と低く、コードはほぼ書きませんでした。
とてもざっくりとした流れは
①やりたいことを日本語で仕様書に書く
②AIに渡す（講座ではClaudeを使用）
③出てきたコードをそのまま保存して読み込む
という形です。
では実際、Chrome拡張機能って何でできているの？を説明すると…
- manifest（マニフェスト）
拡張機能が「何をするのか」「どんな権限を使うのか」をまとめて書いておく説明書 - popup（ポップアップ）
画面上に一時的に表示される小さなウィンドウや通知 - content script（コンテント・スクリプト）
表示しているWebページの中で動き、そのページの内容を読み取ったり変更したりするプログラム - service worker（サービスワーカー）
Webページの裏でこっそり働いて、データのやりとりや動きを支える裏方のプログラム
このチームで動いています。
「それぞれ役割がある」ということさえ分かっていれば、あとは仕様を書いて渡すだけで、必要な上記4種のコードをAIが書いてくれます。
すごい。
では具体的にどういう流れで作っていくのか。
① 日本語で仕様書を書く
- 何をしたいのか
- どんなボタンがあるのか
- 押すと何が起こるのか
- どんなショートカットを使うのか
やりたいことを、できるだけ具体的に日本語で書きます。
※もしもっと厳密に「Web上に表示される要素をこう使いたい！」というものがあれば、対象要素の定義が必要になってきます。
② 仕様書をAIに投げる
今回は「Claude Sonnet」に、マークダウン形式で仕様書を制作して渡しました。
出力形式も指定します。
（この仕様書はやりたい事をChatGPTに伝えてマークダウン形式に直した物を書き出してもらいました。）
- 必要なファイルをすべて出すこと
- ファイル名ごとにコードを分けること
- コピペして動かせる形にすること
③ 出力されたコードを1つずつ保存する
AIが出してくれるのは、
- manifest.json
- popup.html
- popup.js
- background.js
- content.js
などの「中身」を、
①メモ帳に貼り付ける
②対応するファイル名で保存する
③同じフォルダにまとめる
という作業を行います。
④ フォルダをChromeに読み込ませる
- Chromeの拡張機能ページを開き、デベロッパーモードをON
- 「パッケージ化されていない拡張機能を読み込む」をクリック
- 作ったフォルダを選択
これで完成です。
【注意点】
Chromeは、一度ブラウザを立ち上げ直さないと挙動が安定しないことがあります。
「動かない…？」と思ったら、一度ブラウザを落として再起動してみてください。
講座で教わった内容は、とても実務に役立つものでした。
例えば、
- 別タブで開いている情報を、自動で入力欄に転記する
- 特定の検索条件でのデータを複数取得し、Excel形式でダウンロードできるようにする
- ページ内の特定情報だけを抽出して一覧化する
- 長いプルダウンの中から毎回同じものを選ぶ際、最初からその項目が選ばれている状態にする
などがあります。
きちんと対象要素を定義し、仕組みを作れば、日々の業務を“ごっそり短縮”できます。
はやくこれになりたい
しかし、まだまだやりはじめたばかり。
複雑なものを作るには定義の指定等を行う必要があり、まだ自力でやるのは難しい。
なにより、実務に投入するものにミスがあったらと思うと恐ろしい。
まだ経験値が欲しい。
3章：作ってみよう！準備編
なので、まずは”くだらない”ものを作ることにしました。
場数を踏むことが目的です。
この練習として、まずはもっとシンプルで、誰でも作れそうなものから始めてみることにしました。
そして生まれたのが、こちらの3つです。
今回作る拡張機能（予定）
- ボタンを押すと、精霊馬が画面を横切るだけの機能
→ 右から左へ、トコトコ走り抜けます。 - ポモドーロタイマー（通知付き）
→ ポップアップ内でタイマーを回し、時間が来たら通知を出します。 - ダイエット向け昼ごはん診断
→ はい／いいえで答えていくと、今日の昼ごはん候補を提案してくれます。
果たしてプログラミングなんもわからんでも、本当に動くのか。
次回、実装編です。
