Gemini API で作るブラウザ常駐 AI アシスタント — Manifest V3 サイドパネルにストリーミングと会話履歴を実装する

{
  "manifest_version": 3,
  "name": "Gemini AI Assistant",
  "version": "1.0.0",
  "description": "Gemini API を活用したブラウザ内蔵 AI アシスタント",
  "permissions": [
    "sidePanel",
    "activeTab",
    "storage",
    "contextMenus"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "side_panel": {
    "default_path": "sidepanel/index.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

// background.js
 
const GEMINI_API_URL =
  "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent";
 
// API キーを安全に取得
async function getApiKey() {
  const result = await chrome.storage.local.get("geminiApiKey");
  return result.geminiApiKey;
}
 
// Gemini API にリクエストを送信
async function callGeminiApi(prompt, systemInstruction) {
  const apiKey = await getApiKey();
  if (!apiKey) {
    throw new Error("API キーが設定されていません");
  }
 
  const requestBody = {
    system_instruction: {
      parts: [{ text: systemInstruction }]
    },
    contents: [
      {
        parts: [{ text: prompt }]
      }
    ],
    generationConfig: {
      temperature: 0.7,
      maxOutputTokens: 2048
    }
  };
 
  const response = await fetch(`${GEMINI_API_URL}?key=${apiKey}`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(requestBody)
  });
 
  if (!response.ok) {
    const error = await response.json();
    throw new Error(
      `API エラー: ${error.error?.message || response.statusText}`
    );
  }
 
  const data = await response.json();
  return data.candidates[0].content.parts[0].text;
}
 
// メッセージリスナーの設定
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "summarize") {
    callGeminiApi(
      request.content,
      "以下のWebページの内容を日本語で簡潔に要約してください。" +
        "重要なポイントを箇条書きで整理し、最後に一言でまとめてください。"
    )
      .then((result) => sendResponse({ success: true, data: result }))
      .catch((err) => sendResponse({ success: false, error: err.message }));
    return true; // 非同期レスポンスを有効化
  }
 
  if (request.action === "translate") {
    callGeminiApi(
      request.content,
      `以下のテキストを${request.targetLang}に翻訳してください。` +
        "自然で読みやすい訳文にしてください。"
    )
      .then((result) => sendResponse({ success: true, data: result }))
      .catch((err) => sendResponse({ success: false, error: err.message }));
    return true;
  }
 
  if (request.action === "analyzeCode") {
    callGeminiApi(
      request.content,
      "以下のコードを分析してください。" +
        "処理内容の説明、改善点の提案、潜在的なバグがあればそれも指摘してください。"
    )
      .then((result) => sendResponse({ success: true, data: result }))
      .catch((err) => sendResponse({ success: false, error: err.message }));
    return true;
  }
});
 
// 右クリックメニューの追加
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "gemini-summarize",
    title: "Gemini で要約する",
    contexts: ["page"]
  });
  chrome.contextMenus.create({
    id: "gemini-analyze-selection",
    title: "Gemini で選択テキストを分析",
    contexts: ["selection"]
  });
});
 
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === "gemini-summarize") {
    chrome.tabs.sendMessage(tab.id, { action: "getPageContent" });
  }
  if (info.menuItemId === "gemini-analyze-selection") {
    const result = await callGeminiApi(
      info.selectionText,
      "選択されたテキストを分析し、要点を整理してください。"
    );
    chrome.runtime.sendMessage({
      action: "showResult",
      data: result
    });
  }
});

// content.js
 
// ページの主要テキストを抽出する
function extractPageContent() {
  // article タグがあればその中身を優先
  const article = document.querySelector("article");
  if (article) {
    return article.innerText.trim();
  }
 
  // main タグにフォールバック
  const main = document.querySelector("main");
  if (main) {
    return main.innerText.trim();
  }
 
  // 最終手段として body 全体
  const body = document.body.innerText;
  // 長すぎる場合は先頭 8,000 文字に制限
  return body.substring(0, 8000).trim();
}
 
// コードブロックを検出して抽出
function extractCodeBlocks() {
  const codeElements = document.querySelectorAll("pre code, .highlight code");
  return Array.from(codeElements).map((el) => ({
    language: el.className.replace("language-", ""),
    code: el.textContent.trim()
  }));
}
 
// バックグラウンドからのメッセージを受信
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getPageContent") {
    const content = extractPageContent();
    const title = document.title;
    const url = window.location.href;
 
    // サイドパネルに送信
    chrome.runtime.sendMessage({
      action: "summarize",
      content: `タイトル: ${title}\nURL: ${url}\n\n${content}`
    });
  }
 
  if (request.action === "getSelectedText") {
    const selection = window.getSelection().toString();
    sendResponse({ text: selection });
  }
 
  if (request.action === "getCodeBlocks") {
    const codeBlocks = extractCodeBlocks();
    sendResponse({ codeBlocks });
  }
});

<!-- sidepanel/index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Gemini AI Assistant</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <header>
      <h1>Gemini AI Assistant</h1>
      <button id="settings-btn" title="設定">⚙️</button>
    </header>
 
    <div id="settings-panel" class="hidden">
      <label for="api-key-input">API キー:</label>
      <input type="password" id="api-key-input"
             placeholder="Gemini API キーを入力" />
      <button id="save-key-btn">保存</button>
    </div>
 
    <div class="actions">
      <button id="summarize-btn" class="action-btn">
        📝 ページ要約
      </button>
      <button id="translate-btn" class="action-btn">
        🌐 翻訳
      </button>
      <button id="code-btn" class="action-btn">
        💻 コード解析
      </button>
    </div>
 
    <div id="chat-area">
      <div id="messages"></div>
    </div>
 
    <div class="input-area">
      <textarea id="user-input"
                placeholder="質問を入力..."
                rows="3"></textarea>
      <button id="send-btn">送信</button>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

// sidepanel/app.js
 
const messagesEl = document.getElementById("messages");
const userInput = document.getElementById("user-input");
const sendBtn = document.getElementById("send-btn");
const summarizeBtn = document.getElementById("summarize-btn");
const translateBtn = document.getElementById("translate-btn");
const codeBtn = document.getElementById("code-btn");
const settingsBtn = document.getElementById("settings-btn");
const settingsPanel = document.getElementById("settings-panel");
const saveKeyBtn = document.getElementById("save-key-btn");
const apiKeyInput = document.getElementById("api-key-input");
 
// メッセージを表示エリアに追加
function addMessage(text, type = "assistant") {
  const div = document.createElement("div");
  div.className = `message ${type}`;
  div.textContent = text;
  messagesEl.appendChild(div);
  messagesEl.scrollTop = messagesEl.scrollHeight;
}
 
// ローディング表示
function showLoading() {
  const div = document.createElement("div");
  div.className = "message assistant loading";
  div.id = "loading-indicator";
  div.textContent = "考え中...";
  messagesEl.appendChild(div);
  messagesEl.scrollTop = messagesEl.scrollHeight;
}
 
function hideLoading() {
  const el = document.getElementById("loading-indicator");
  if (el) el.remove();
}
 
// 設定パネルの表示切り替え
settingsBtn.addEventListener("click", () => {
  settingsPanel.classList.toggle("hidden");
});
 
// API キーの保存
saveKeyBtn.addEventListener("click", async () => {
  const key = apiKeyInput.value.trim();
  if (key) {
    await chrome.storage.local.set({ geminiApiKey: key });
    apiKeyInput.value = "";
    settingsPanel.classList.add("hidden");
    addMessage("API キーを保存しました。", "system");
  }
});
 
// 自由入力の送信
sendBtn.addEventListener("click", async () => {
  const text = userInput.value.trim();
  if (!text) return;
 
  addMessage(text, "user");
  userInput.value = "";
  showLoading();
 
  chrome.runtime.sendMessage(
    { action: "summarize", content: text },
    (response) => {
      hideLoading();
      if (response?.success) {
        addMessage(response.data);
      } else {
        addMessage(
          `エラー: ${response?.error || "不明なエラー"}`, "error"
        );
      }
    }
  );
});
 
// ページ要約ボタン
summarizeBtn.addEventListener("click", async () => {
  addMessage("ページを要約しています...", "system");
  showLoading();
 
  const [tab] = await chrome.tabs.query({
    active: true, currentWindow: true
  });
  chrome.tabs.sendMessage(
    tab.id,
    { action: "getPageContent" },
    (response) => {
      // Content Script が getPageContent を処理
    }
  );
});
 
// バックグラウンドからの結果を受信
chrome.runtime.onMessage.addListener((request) => {
  if (request.action === "showResult") {
    hideLoading();
    addMessage(request.data);
  }
});
 
// Enter キーで送信（Shift+Enter で改行）
userInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && !e.shiftKey) {
    e.preventDefault();
    sendBtn.click();
  }
});

// background.js に追加するシステムプロンプト定義
 
const SYSTEM_PROMPTS = {
  summarize: `あなたは優秀なリサーチアシスタントです。
Webページの内容を以下のフォーマットで日本語で要約してください。
 
【概要】1〜2文で全体をまとめる
【主要ポイント】3〜5個の箇条書き
【結論・示唆】読者にとっての意味を1文で
 
専門用語が含まれる場合は簡潔な補足を添えてください。`,
 
  translate: `あなたは経験豊富な翻訳者です。
原文のニュアンスを保ちつつ、対象言語として自然な訳文を作成してください。
翻訳結果のみを出力し、説明は不要です。`,
 
  analyzeCode: `あなたはシニアソフトウェアエンジニアです。
コードを分析し以下を回答してください。
 
【処理内容】このコードが何をしているかの概要
【注目すべき点】設計上の良い点やパターン
【改善提案】パフォーマンスや可読性の観点からの提案
【注意点】潜在的なバグやセキュリティ上の懸念`
};

// sidepanel/app.js に追加する翻訳機能
 
translateBtn.addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({
    active: true, currentWindow: true
  });
 
  chrome.tabs.sendMessage(
    tab.id,
    { action: "getSelectedText" },
    (response) => {
      const text = response?.text;
      if (!text) {
        addMessage(
          "翻訳するテキストを選択してください。", "system"
        );
        return;
      }
 
      addMessage(`翻訳対象: ${text.substring(0, 100)}...`, "user");
      showLoading();
 
      chrome.runtime.sendMessage(
        {
          action: "translate",
          content: text,
          targetLang: "日本語"
        },
        (res) => {
          hideLoading();
          if (res?.success) {
            addMessage(res.data);
          } else {
            addMessage(`エラー: ${res?.error}`, "error");
          }
        }
      );
    }
  );
});
 
// コード解析機能
codeBtn.addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({
    active: true, currentWindow: true
  });
 
  chrome.tabs.sendMessage(
    tab.id,
    { action: "getCodeBlocks" },
    (response) => {
      const blocks = response?.codeBlocks;
      if (!blocks || blocks.length === 0) {
        addMessage(
          "このページにコードブロックが見つかりませんでした。",
          "system"
        );
        return;
      }
 
      // 最初のコードブロックを解析
      const target = blocks[0];
      addMessage(
        `${target.language || "不明"} のコードを解析中...`,
        "system"
      );
      showLoading();
 
      chrome.runtime.sendMessage(
        { action: "analyzeCode", content: target.code },
        (res) => {
          hideLoading();
          if (res?.success) {
            addMessage(res.data);
          } else {
            addMessage(`エラー: ${res?.error}`, "error");
          }
        }
      );
    }
  );
});

// background.js — ストリーミング応答
const STREAM_URL =
  "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:streamGenerateContent";
 
async function streamGemini(prompt, systemInstruction, onChunk) {
  const apiKey = await getApiKey();
  if (!apiKey) throw new Error("API キーが設定されていません");
 
  const res = await fetch(`${STREAM_URL}?alt=sse&key=${apiKey}`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      system_instruction: { parts: [{ text: systemInstruction }] },
      contents: [{ parts: [{ text: prompt }] }],
      generationConfig: { temperature: 0.7, maxOutputTokens: 2048 }
    })
  });
  if (!res.ok) throw new Error(`API エラー: ${res.status}`);
 
  const reader = res.body.getReader();
  const decoder = new TextDecoder();
  let buffer = "";
 
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
 
    // SSE は "data: {...}" 行で届く。未完了の末尾行は次回へ繰り越す
    const lines = buffer.split("\n");
    buffer = lines.pop();
    for (const line of lines) {
      if (!line.startsWith("data:")) continue;
      const json = line.slice(5).trim();
      if (!json) continue;
      try {
        const parsed = JSON.parse(json);
        const text = parsed.candidates?.[0]?.content?.parts?.[0]?.text;
        if (text) onChunk(text);
      } catch {
        // 行をまたいで分割された JSON は次のチャンクで補完される
      }
    }
  }
}

// background.js — ポートで逐次中継
chrome.runtime.onConnect.addListener((port) => {
  if (port.name !== "gemini-stream") return;
  port.onMessage.addListener(async (msg) => {
    try {
      await streamGemini(msg.content, SYSTEM_PROMPTS[msg.mode], (chunk) => {
        port.postMessage({ type: "chunk", text: chunk });
      });
      port.postMessage({ type: "done" });
    } catch (err) {
      port.postMessage({ type: "error", error: err.message });
    }
  });
});

// sidepanel/app.js — ストリームを逐次描画
function askStreaming(content, mode) {
  const port = chrome.runtime.connect({ name: "gemini-stream" });
  const bubble = addMessage("", "assistant");
  port.postMessage({ content, mode });
 
  port.onMessage.addListener((msg) => {
    if (msg.type === "chunk") {
      bubble.textContent += msg.text;
      messagesEl.scrollTop = messagesEl.scrollHeight;
    } else if (msg.type === "done") {
      port.disconnect();
    } else if (msg.type === "error") {
      bubble.textContent = `エラー: ${msg.error}`;
      bubble.classList.add("error");
      port.disconnect();
    }
  });
}

// background.js — 会話履歴つきリクエスト
async function loadHistory(sessionId) {
  const key = `history:${sessionId}`;
  const r = await chrome.storage.session.get(key);
  return r[key] || [];
}
 
async function saveTurn(sessionId, role, text) {
  const key = `history:${sessionId}`;
  const history = await loadHistory(sessionId);
  history.push({ role, parts: [{ text }] });
  // 直近 20 ターンに制限し、入力トークンの肥大を防ぐ
  const trimmed = history.slice(-20);
  await chrome.storage.session.set({ [key]: trimmed });
  return trimmed;
}
 
async function chatWithHistory(sessionId, userText) {
  const history = await saveTurn(sessionId, "user", userText);
  const apiKey = await getApiKey();
  const res = await fetch(`${GEMINI_API_URL}?key=${apiKey}`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ contents: history })
  });
  const data = await res.json();
  const reply = data.candidates[0].content.parts[0].text;
  await saveTurn(sessionId, "model", reply);
  return reply;
}

// content.js — 要約向けの軽量抽出
function extractForSummary() {
  const root =
    document.querySelector("article") ||
    document.querySelector("main") ||
    document.body;
  const parts = [];
  root.querySelectorAll("h1, h2, h3, p").forEach((el) => {
    const t = el.innerText.trim();
    if (!t) return;
    // 段落は先頭2文だけ残す。見出しはそのまま
    parts.push(/^H[1-3]$/.test(el.tagName)
      ? t
      : t.split("。").slice(0, 2).join("。"));
  });
  return parts.join("\n").slice(0, 6000);
}

// background.js — 指数バックオフ
async function withBackoff(fn, max = 4) {
  for (let i = 0; i < max; i++) {
    try {
      return await fn();
    } catch (err) {
      const transient = /429|503/.test(String(err.message));
      if (!transient || i === max - 1) throw err;
      const wait = Math.min(2 ** i * 1000, 8000); // 1s, 2s, 4s, 8s
      await new Promise((r) => setTimeout(r, wait));
    }
  }
}