ChatGPT o4-mini-high を使って Google Chrome 拡張機能を公開した話

今回は、ChatGPT o4-mini-high を活用して、Google カレンダーの「コピー」ボタンから Meet の URL のみを抽出してクリップボードに入れる Chrome 拡張機能を開発・公開した手順をまとめました。

🎯 背景

プロジェクト構成
- 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 抽出ロジック
パッケージ化 & 公開
- プロジェクトを 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 をクリアする or split('?')[0] でフォールバック削除
結果
ベースの Meet URL のみが確実にコピーできるようになった

ちなみに、この文章もChatGPTですw