ChatGPT o4-mini-high を使って Google Chrome 拡張機能を公開した話
今回は、ChatGPT o4-mini-high を活用して、Google カレンダーの「コピー」ボタンから Meet の URL のみを抽出してクリップボードに入れる Chrome 拡張機能を開発・公開した手順をまとめました。
🎯 背景
- 課題：Google カレンダーで「コピー」ボタンを押すと、予定の全文（氏名や日時、タイムゾーンなど）まで全部コピーされてしまう
- 解決策：イベント詳細ダイアログ内の Meet リンクだけを自動で抽出してコピーする拡張機能を作成
🚀 機能概要
- カレンダーでイベント詳細ダイアログを開く
- 「コピー」ボタンをクリック
- ダイアログ内にある Meet URL（例:
https://meet.google.com/xxx-xxxx-xxx）のみがクリップボードにコピーされる
🛠️ 開発手順（コード抜きの概要）
-
プロジェクト構成
-
manifest.json：拡張のメタ情報と権限設定 -
content.js：ページにスクリプトを注入するだけのファイル -
injected.js：ページコンテキストでexecCommand('copy')をフックしてリンクを抽出 -
icons/：ストア掲載用のアイコン
-
-
マニフェスト設定
-
clipboardWrite権限：クリップボード書き込み用 -
host_permissions：https://calendar.google.com/*でカレンダーの DOM にアクセス -
web_accessible_resources：CSP 回避のため外部ファイルを注入
-
-
スクリプト注入
-
content.jsで<script src="…/injected.js">をページに追加 -
injected.jsではページと同じコンテキストでdocument.execCommandを上書き
-
-
URL 抽出ロジック
- 開いている “イベント詳細ダイアログ” 要素だけを検索
-
a[href^="https://meet.google.com"]を優先し、なければテキストから正規表現で抽出 - クエリパラメータ（
?authuser=…）を除去してベース URL のみコピー
-
パッケージ化 & 公開
- プロジェクトを ZIP にまとめる
- Chrome ウェブストア デベロッパーダッシュボードにアップロード
- タイトル・説明・スクリーンショット・プライバシーポリシー URL を登録
-
プライバシーポリシー & 審査対応
- ユーザーの個人情報は一切収集せず、権限は最小限
-
clipboardWriteとhost_permissionsの使用理由を明記 - リモートコードは不使用と明言
🔧 トライ＆エラー
-
最初の試み
Content Script 内でcopyイベントをフックし、全文から Meet リンクを抽出してclipboard.writeText()→ 何も変わらず全文コピーされた -
ChatGPT への質問
「コピーした内容が変わらないです」 -
返答
ページコンテキストでexecCommand('copy')を丸ごと乗っ取る注入方法に変更 -
次の問題
CSP（Content Security Policy）エラーが発生し、インラインスクリプトがブロックされた -
ChatGPT への質問
「Refused to execute inline script because it violates CSP…」 -
返答
injected.jsを外部ファイル化し、web_accessible_resources経由でページに注入する方法 -
追加の課題
同じカレンダー内の別イベントの URL がコピーされてしまう -
ChatGPT への質問
「別の URL がコピーされる…特定のダイアログ内だけから抽出するには？」 -
返答
div[role="dialog"]でダイアログを限定してその内部だけを検索 -
最終的な課題
コピーした URL に?authuser=0&hs=…が付与される -
ChatGPT への質問
「パラメータがつくんだけどどう除去？」 -
返答
new URL()でsearchをクリアする orsplit('?')[0]でフォールバック削除 -
結果
ベースの Meet URL のみが確実にコピーできるようになった
🎉 まとめ
- ChatGPT o4-mini-high の対話を活用し、要件定義から審査対応まで最速実装
- CSP 回避、ページコンテキスト注入、ダイアログ限定抽出、クエリ除去など、現場で悩みがちなポイントもクリア
ちなみに、この文章もChatGPTですw