【実践解説】ChatGPTとCursorで作るTwitterブロック拡張機能の開発手順 - 4〜5時間でリリースした話
詳細情報
| 日時 | 2025年02月13日 22:00 - 22:30 |
|---|---|
| テーマ | 生成AIとCursorで作る Chrome拡張機能 (TwitterBlocker) |
| 発表者 | のりちゃんさん |
| 集会名 | 個人開発集会 |
| 発表資料 | ファイル |
開発の背景と目的
課題認識とアイデアの着想
Twitterの過度な利用による時間の浪費は、多くの人が抱える課題です。
のりちゃんさんは、NekoDOSさんが開発したTwitterブロック拡張機能からインスピレーションを受け、同様の機能を一般公開することを決意しました。
仕事中についTwitterを見てしまう自身の経験から、この問題を解決したいという思いが原動力となりました。
開発プロセスと実装の詳細
ChatGPTによる初期開発
開発はChatGPT(o1モデル)から始まりました。
「Google Chromeの拡張機能で、設定した時間内はTwitterの画面を見れなくする」という基本的な指示をChatGPTに与え、生成されたコードをベースに開発を進めました。
Cursorを活用したコード実装
生成されたコードは、Cursorのエージェントモードを活用して実装に落とし込みました。
Cursorは、テキストベースの出力を適切なファイル構造を持つプログラムに変換する作業を支援してくれました。
さらに、アイコンクリックによる一時解除機能も実装することができました。
技術的課題への対応
開発過程で直面した2つの大きな課題について：
デザインの最適化
拡張機能のアイコンクリック時のデザインの崩れは、Cursorのエージェントモードに「アイコンを押したときのスタイルを綺麗にしてください」と指示することで解決しました。
セッション管理の改善
他の端末でセッションが切れてログインを要求される問題は、Cursorによる分析で原因が判明。
DOMの完全削除から非表示方式に変更することで解決しました。
Chrome Web Storeへの公開プロセス
説明文と権限の設定
Chrome Web Storeへの公開にあたっては、拡張機能の説明や各権限の使用理由の説明が必要でした。
生成AIにスクリーンショットを提供することで、適切な説明文を生成することができました。
プライバシーポリシーの実装
プライバシーポリシーのリンク形式での提出という課題は、生成AIからの提案で、GitHubのREADMEを活用することで解決しました。
開発の成果とまとめ
実現した成果
プログラミングをほとんど行うことなく、Chrome拡張機能のリリースに成功しました。
構想からリリースまでにかかった時間はわずか4〜5時間程度です。
技術的な進歩
半年前と比較すると、専門的な知識がなくても実装できるようになり、特にCursorのエージェントモードが非常に有用でした。
アクセス方法
プロジェクトの詳細については、GitHubリポジトリTwitter-blockerで確認することができます。
個人開発集会の他の発表もチェック！
個人開発集会の開催情報・参加方法
個人開発集会
開催日: 2025年02月13日
開催時間: 21:00 - 22:00
開催曜日: 木曜日開催周期: 隔週(グループA)
個人開発にまつわる話でワイワイする集会です。 個人開発をやっている方も初めてみたい方も大歓迎！ 企画・技術・マーケティング・保守・運用など 技術的なことに限らない幅広い分野を想定しています。 個人開発に興味がある方はぜひ遊びに来てください！