👍

【個人開発】プロンプトをプログラミングのように管理できるChrome拡張を作った話

に公開
AI
Chrome
YouTube
個人開発
プロンプト
tech

毎日「この動画を要約して」って言うのに疲れて作ったChrome拡張の話

🤦‍♂️ また同じことを繰り返している自分を発見

この記事で得られるもの:

  • AIプロンプトをコードみたいに再利用する方法（もう同じこと言わなくて済む！）
  • 6つのAIサービスを一気に連携させる実戦開発ノウハウ
  • YouTube字幕抽出からChrome拡張まで、試行錯誤の全記録
  • 個人開発者が5000人に使われるツールを作るまでのリアル体験談

想定読者: 毎日AIで要約作業してる人、個人開発に興味ある人、「なんか面白そう」って思った人

🙄 きっかけ：同じプロンプトを何回打ってるんだ問題

ある日の夜中、子供を寝かしつけた後。いつものようにChatGPTを開いて...

私：「この技術記事を要約してください」
ChatGPT：（要約してくれる）

私：「じゃあ初心者向けに説明して」
ChatGPT：（また要約してくれる）

私：「これ企画書に使えるポイントは？」
ChatGPT：（さらに要約してくれる）

あれ？毎回同じ内容に対して違う角度で質問してるじゃん...

そこで気づいたんです。プログラミングでは関数を作って再利用するのに、なんでプロンプトは毎回手打ちしてるんだろうって。

💡 「プロンプトもプログラミングできるはず」という発想

エンジニアなら誰でも思うはず：

// これができるなら...
function summarizeForBeginner(content) {
  return `${content}を初心者向けに段階的に説明して`;
}

// プロンプトでもできるんじゃない？
const promptTemplates = {
  'beginner': '初心者向けに段階的に説明してください',
  'business': '企画書に使えるポイントを整理してください',
  'technical': '技術的なメリット・デメリットを分析してください'
};

これだ！ と思って、夜な夜な開発を始めました。

🛠️ 開発で遭遇した「まさか」の問題たち

問題1: AIごとにUIが全然違う問題

ChatGPT、Claude、Gemini...みんな入力欄のHTMLが違いすぎる！

// ChatGPTは素直
const chatgptInput = 'div[contenteditable="true"][data-testid="composer-text-input"]';

// Claudeはちょっと気難しい
const claudeInput = 'div[contenteditable="true"][role="textbox"]';

// Geminiは独自路線
const geminiInput = '.ql-editor[contenteditable="true"]';

解決策: 「全部に対応する汎用テキスト挿入ライブラリ」を作成

function insertText(text, aiType) {
  const element = document.querySelector(AI_SELECTORS[aiType]);
  
  // AIごとに最適な挿入方法を使い分け
  switch (AI_METHODS[aiType]) {
    case 'execCommand':
      element.focus();
      document.execCommand('insertText', false, text);
      break;
    case 'dispatchEvent':
      // Claudeはイベントを直接発火させないと反応しない
      element.dispatchEvent(new InputEvent('input', { data: text }));
      break;
    // その他のパターンも対応...
  }
}

問題2: YouTube字幕が取れない問題

YouTube APIには字幕取得機能がないという衝撃の事実...

最初の作戦: DOMから直接抽出

// うまくいった時は良いけど...
const subtitles = document.querySelectorAll('.ytd-transcript-segment-renderer');

現実: YouTubeのUI変更で頻繁に動かなくなる 😭

最終作戦: 3段階フォールバック機構

async function getYouTubeTranscript(videoId) {
  try {
    // 作戦A: 既存の字幕パネルから抽出
    return await extractFromTranscriptPanel();
  } catch {
    try {
      // 作戦B: 字幕ボタンをクリックして強制表示
      return await forceShowSubtitles();
    } catch {
      // 作戦C: ユーザーに「手動でコピペしてね」とお願い
      return await askUserToCopy(videoId);
    }
  }
}

問題3: Chrome拡張のストレージ制限問題

発覚したとき: 長いプロンプトテンプレートを保存しようとしたら...

Error: QUOTA_BYTES_PER_ITEM quota exceeded

Chrome拡張のsync storageは4KBまで！ 長いプロンプトは保存できない...

解決策: サイズに応じて自動振り分け

async function smartSave(key, data) {
  const size = new Blob([JSON.stringify(data)]).size;
  
  if (size > 4000) {
    // デカいデータ → ローカルに保存（同期はしない）
    await chrome.storage.local.set({[key]: data});
    console.log('大きなテンプレートなので、このデバイスでのみ利用可能です');
  } else {
    // 小さいデータ → 同期ストレージ（全デバイスで共有）
    await chrome.storage.sync.set({[key]: data});
    console.log('全デバイスで同期されました！');
  }
}

🎉 リリース後の反応が予想外すぎた

数字で見る現実

  • ダウンロード数: 約5,000人（思ったより多い！）
  • 毎日使ってくれる人: 約1,500人
  • 一番人気の用途: 技術記事の要約（35%）

ユーザーの使い方が想像と全然違った

私の想定: YouTube動画の要約メイン
実際の使われ方:

  1. Qiitaの技術記事を学習用に整理 📚
  2. 会議資料の要点抽出 📊
  3. 競合他社の分析資料作成 🔍
  4. たまにYouTube動画 📺

印象的だったレビュー:

「同じ記事でも『学習用』『企画用』『共有用』で全く違う要約が作れて驚きました」

心に刺さったフィードバック:

「チーム内の分析品質が統一されて、会議の効率が上がりました」

🤯 作ってみて分かった「プロンプトプログラミング」の威力

Before（従来）

私: 「この技術記事を要約して」
AI: （普通の要約）

私: 「初心者向けに説明して」
AI: （また最初から要約）

私: 「企画に使えそうなポイントは？」
AI: （また最初から分析）

After（テンプレート化後）

// 一度設定すれば...
const templates = {
  learning: `この内容を以下の形式で整理:
    1. 前提知識
    2. 段階別学習ステップ  
    3. 実践課題
    4. 参考資料`,
    
  business: `ビジネス観点で分析:
    1. 市場への影響
    2. 競合優位性
    3. 実装コスト
    4. ROI予測`
};

同じコンテンツから複数の価値を一気に抽出！

🚀 今後やりたいこと（妄想込み）

近日実装予定

  • GitHub公開（コード整理がんばり中...）
  • チーム共有機能（「俺のテンプレート使ってみて」機能）
  • 使用統計（どのテンプレートが一番効果的かわかる）

夢のような機能（いつかできたら...）

// こんなのできたら面白そう
class AIWorkflow {
  async autoAnalysis(content) {
    const results = await Promise.all([
      this.summarize(content),      // 要約
      this.extractKeywords(content), // キーワード
      this.generateQuestions(content) // 質問生成
    ]);
    
    return this.synthesize(results); // 統合分析
  }
}

💭 個人開発者として感じたこと

開発時間の現実

  • 平日: 夜中の2-3時間（子供が寝た後）
  • 休日: 朝の1-2時間（みんなが起きる前）
  • 合計: 週に約15時間

一番嬉しかった瞬間

朝起きてChrome Web Storeを見たら、新しいレビューが：

⭐⭐⭐⭐⭐ 「これ作った人天才すぎる。毎日使ってます！」

コーヒーが美味しすぎて泣きそうになりました ☕😭

技術的に一番学んだこと

  • Content Scriptの制約下でのDOM操作テクニック
  • 各AIサービスのUI変更に耐える設計パターン
  • ユーザーの使用パターンは想定と90%違うという現実

🎯 最後に：同じことの繰り返しはもう終わり

「同じコンテンツでも、質問の仕方次第で全く違う価値が生まれる」

これがAI時代の一番面白いところだと思います。

でも毎回手打ちでプロンプト書くのは、プログラマーとしてのプライドが許さない！

ということで作ったこのツール、よかったら使ってみてください：

Chrome Web Store: ChatPage AI コンテンツ要約

レビューを投稿する
開発者を応援する📺

使ってみて「これ便利じゃん！」って思ったら、レビューもらえると夜中の開発が続けられます 🙏

何か質問や「こんな機能欲しい」というリクエストがあれば、コメント欄でお気軽にどうぞ！






Discussion