פיתוח תוספי Chrome עם AI: שלבים, קוד, פרסום

פיתוח תוספי Chrome עם AI: שלבים, קוד, פרסום

השהיה בעת שילוב LLM בתוסף דפדפן היא הבעיה הטכנית המרכזית. המשתמש מצפה לתשובה תוך 1–2 שניות, אך קריאת API ישירה דרך popup נותנת 10+ שניות בשל הרשת וזמן היצירה. אתגרים נוספים — אחסון מאובטח של מפתחות API, תאימות ל-Manifest V3, ופעולה תקינה באתרים עם CSP מחמיר. אנו פותרים משימות אלה עם service worker אסינכרוני, הזרמת tokens, ו-host_permissions מינימליים. אנו מפתחים תוספים turnkey — מאב-טיפוס ועד פרסום ב-Chrome Web Store.

בקשו פיתוח וקבלו פתרון מלא עם תיעוד ותמיכה.

אתגרים טכניים שנפתרו

הכאב המרכזי הוא השהיה: בעת בקשת LLM, זמן התגובה יכול לעלות על 10 שניות, מה שהופך את התוסף לחסר תועלת. אנו משתמשים בהזרמה: ה-token הראשון מגיע תוך 200 אלפיות השנייה, תגובה מלאה תוך 1.2 שניות על Claude Haiku. הבעיה השנייה היא אבטחה: לא ניתן לאחסן מפתחות API בקוד, רק ב-chrome.storage.sync עם הצפנה. השלישית היא תאימות: content script אינו פועל באתרים עם CSP מחמיר; אנו מגדירים isolated world ומשתמשים ב-externally_connectable כדי לעקוף מגבלות.

לטקסטים ארוכים, אנו משתמשים ב-chunking: פיצול לבלוקים של 2000 tokens, שליחת בקשות מקבילות, ואיחוד התוצאה. זה מפחית את השהיית p99 ב-60% וחוסך למשתמשים בממוצע $200 בחודש בעיבוד מסמכים.

כיצד פועל תוסף ה-AI

הארכיטקטורה מבוססת על שלושה רכיבים: service worker (background.js) — מתזמן מרכזי לבקשות LLM API; content script (content.js) — מוזרק לדפים, מנהל את ה-DOM ומציג תוצאות; popup — ממשק לפעולות מהירות. Manifest V3 החליף את דף הרקע ב-service worker, מה שמפחית את צריכת הזיכרון ומגביר את האבטחה.

ה-service worker אינו חוסם את thread העיבוד — בקשות LLM אינן משפיעות על ביצועי הדף. V3 דורש host_permissions מפורשים, מה שמאלץ את המפתח למזער גישה: לדוגמה, במקום <all_urls>, ציינו https://api.anthropic.com/*. בעבר ב-V2, host רחב היה מספיק, מה שהוביל לדליפות נתונים.

דוגמה: סיכום דף עם הזרמה

נניח שהמשתמש לוחץ על "סכם דף". ה-content script מחלץ טקסט דרך document.body.innerText, מקצר ל-3000 תווים, ושולח הודעה ל-service worker. ה-service worker מבקש apiKey מ-chrome.storage.sync, שולח בקשת POST ל-Anthropic API עם stream: true. התגובה מגיעה בנתחים של 10-20 tokens — הם מועברים מיד ל-popup דרך message ports. המשתמש רואה את התוצאה בהדרגה. אם ה-API החזיר 429 (rate limit), אנו מציגים fallback: "יותר מדי בקשות, נסו שוב בעוד דקה."

// manifest.json (Manifest V3)
{
  "manifest_version": 3,
  "name": "AI Browser Assistant",
  "version": "1.0.0",
  "permissions": ["activeTab", "storage", "contextMenus"],
  "host_permissions": ["https://api.anthropic.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "css": ["content.css"]
  }],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

// background.js — центральная логика
const ANTHROPIC_API = 'https://api.anthropic.com/v1/messages';

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'AI_REQUEST') {
    handleAIRequest(request.data).then(sendResponse);
    return true; // Асинхронный ответ
  }
});

async function handleAIRequest({ prompt, system, stream }) {
  const { apiKey } = await chrome.storage.sync.get('apiKey');
  if (!apiKey) return { error: 'API key not set' };

  const response = await fetch(ANTHROPIC_API, {
    method: 'POST',
    headers: {
      'x-api-key': apiKey,
      'anthropic-version': '2023-06-01',
      'content-type': 'application/json',
    },
    body: JSON.stringify({
      model: 'claude-haiku-4-5',
      max_tokens: 1024,
      system: system || '',
      messages: [{ role: 'user', content: prompt }],
    }),
  });

  const data = await response.json();
  return { result: data.content?.[0]?.text || '' };
}

// Context menu
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'ai-summarize',
    title: 'AI: Суммаризировать выделенное',
    contexts: ['selection'],
  });
  chrome.contextMenus.create({
    id: 'ai-translate',
    title: 'AI: Перевести на русский',
    contexts: ['selection'],
  });
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === 'ai-summarize') {
    chrome.tabs.sendMessage(tab.id, {
      type: 'SHOW_AI_RESULT',
      action: 'summarize',
      text: info.selectionText,
    });
  }
});

// content.js — инъектируется на страницы
let aiPanel = null;

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.type === 'SHOW_AI_RESULT') {
    showFloatingPanel(request.action, request.text);
  }
});

function showFloatingPanel(action, text) {
  if (!aiPanel) {
    aiPanel = document.createElement('div');
    aiPanel.id = 'ai-extension-panel';
    aiPanel.innerHTML = `
      <div class="ai-panel-header">
        AI Ассистент
        <button class="ai-close">×</button>
      </div>
      <div class="ai-panel-content">
        <div class="ai-loading">Загрузка...</div>
      </div>
    `;
    document.body.appendChild(aiPanel);
    aiPanel.querySelector('.ai-close').onclick = () => {
      aiPanel.style.display = 'none';
    };
  }
  aiPanel.style.display = 'block';

  const systemPrompts = {
    summarize: 'Суммаризируй текст в 3-5 предложениях на русском.',
    translate: 'Переведи на русский язык.',
  };

  chrome.runtime.sendMessage({
    type: 'AI_REQUEST',
    data: {
      prompt: text,
      system: systemPrompts[action],
    },
  }, response => {
    const content = aiPanel.querySelector('.ai-panel-content');
    content.innerHTML = response.result || response.error;
  });
}

// Кнопка "Суммаризировать страницу" появляется при наведении
document.addEventListener('mouseup', () => {
  const selected = window.getSelection().toString().trim();
  if (selected.length > 50) {
    showSelectionTooltip(selected);
  }
});

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    width: 380px;
    min-height: 200px;
    padding: 16px;
    font-family: system-ui;
  }
  textarea {
    width: 100%;
    height: 80px;
  }
  button {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
  }
</style>
</head>
<body>
  <h3>AI Ассистент</h3>
  <button id="summarize-page">Суммаризировать страницу</button>
  <textarea id="custom-prompt" placeholder="Свой вопрос..."></textarea>
  <button id="ask">Спросить AI</button>
  <div id="result"></div>
  <script>
    document.getElementById('summarize-page').onclick = async () => {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      const [{ result: pageText }] = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: () => document.body.innerText.slice(0, 3000),
      });
      const response = await chrome.runtime.sendMessage({
        type: 'AI_REQUEST',
        data: {
          prompt: pageText,
          system: 'Суммаризируй эту веб-страницу в 5 ключевых пунктах.',
        }
      });
      document.getElementById('result').textContent = response.result;
    };
  </script>
</body>
</html>

השוואת LLM לתוספים

לתוספי AI בדפדפן, מהירות ועלות tokens הם קריטיים. Claude Haiku מגיב פי 2-3 מהר יותר מ-GPT-4o עם איכות דומה לסיכום ותרגום. GPT-4o מטפל טוב יותר במשימות אנליטיות מורכבות, אך השהיית p99 שלו גבוהה ב-30%. אנו בדרך כלל ממליצים על Haiku לתוצאות מוזרמות, ו-GPT-4o לניתוח מסמכים מעמיק. שימוש ב-Haiku יכול להפחית עלויות API ב-50% בהשוואה ל-GPT-4o.

תהליך העבודה

1. ניתוח: יחד אנו מגדירים מקרי שימוש — סיכום, תרגום, עוזר AI, ניתוח סנטימנט. אנו בודקים אם יש צורך בתמיכת RAG (חילוץ תוכן ממערכות פנימיות) או כוונון עדין של המודל.
2. עיצוב: דיאגרמת ארכיטקטורה — אילו APIs אנו משתמשים, כיצד אנו מאחסנים מפתחות, אילו הרשאות אנו מבקשים. אנו מחליטים אם יש צורך בהזרמה, כיצד לטפל בשגיאות (retry, fallback).
3. פיתוח: אנו כותבים קוד, מגדירים טיפול בשגיאות, timeouts, לוגיקת retry. משתמשים ב-LangChain לשרשראות prompt מורכבות. כל מפתחות ה-API מאוחסנים ב-// manifest.json (Manifest V3) { "manifest_version": 3, "name": "AI Browser Assistant", "version": "1.0.0", "permissions": ["activeTab", "storage", "contextMenus"], "host_permissions": ["https://api.anthropic.com/*"], "background": { "service_worker": "background.js" }, "content_scripts": [{ "matches": ["<all_urls>"], "js": ["content.js"], "css": ["content.css"] }], "action": { "default_popup": "popup.html", "default_icon": "icon.png" } } עם הצפנה.
4. בדיקות: בדיקות על 10+ אתרים כולל SPA (React, Angular) ו-iframes. בדיקות ללא אינטרנט (fallback חלק) ו-rate-limit. מדידת השהיית p99.
5. פריסה: הכנת נכסים, יצירת zip, העלאה ל-Chrome Web Store. מעבר ביקורת (בדרך כלל 3-7 ימים). מתן תיעוד התקנה והגדרה.

מה כלול בפיתוח

• קוד מקור של התוסף עם הערות
• תיעוד על התקנה והגדרת מפתחות API
• CI/CD מוגדר (אופציונלי) לבנייה אוטומטית
• כיסוי בדיקות של תרחישים מרכזיים (unit tests, e2e)
• תמיכה ל-30 יום לאחר המסירה
• ייעוץ לפרסום ב-Chrome Web Store

עלות הפיתוח האופיינית נעה בין $3,000 ל-$8,000 בהתאם למורכבות.

לוחות זמנים משוערים

טעויות אופייניות בפיתוח תוספי AI

• מפתח API מקודד. פתרון: השתמשו ב-// background.js — центральная логика const ANTHROPIC_API = 'https://api.anthropic.com/v1/messages'; chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.type === 'AI_REQUEST') { handleAIRequest(request.data).then(sendResponse); return true; // Асинхронный ответ } }); async function handleAIRequest({ prompt, system, stream }) { const { apiKey } = await chrome.storage.sync.get('apiKey'); if (!apiKey) return { error: 'API key not set' }; const response = await fetch(ANTHROPIC_API, { method: 'POST', headers: { 'x-api-key': apiKey, 'anthropic-version': '2023-06-01', 'content-type': 'application/json', }, body: JSON.stringify({ model: 'claude-haiku-4-5', max_tokens: 1024, system: system || '', messages: [{ role: 'user', content: prompt }], }), }); const data = await response.json(); return { result: data.content?.[0]?.text || '' }; } // Context menu chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: 'ai-summarize', title: 'AI: Суммаризировать выделенное', contexts: ['selection'], }); chrome.contextMenus.create({ id: 'ai-translate', title: 'AI: Перевести на русский', contexts: ['selection'], }); }); chrome.contextMenus.onClicked.addListener(async (info, tab) => { if (info.menuItemId === 'ai-summarize') { chrome.tabs.sendMessage(tab.id, { type: 'SHOW_AI_RESULT', action: 'summarize', text: info.selectionText, }); } }); ובמסך הגדרות.
• אין טיפול בשגיאות עבור LLM. ה-API עשוי להחזיר 429 או timeout — יש להציג הודעה ברורה למשתמש.
• host_permissions רחבים מדי. במקום // content.js — инъектируется на страницы let aiPanel = null; chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => { if (request.type === 'SHOW_AI_RESULT') { showFloatingPanel(request.action, request.text); } }); function showFloatingPanel(action, text) { if (!aiPanel) { aiPanel = document.createElement('div'); aiPanel.id = 'ai-extension-panel'; aiPanel.innerHTML = ` <div class="ai-panel-header"> AI Ассистент <button class="ai-close">×</button> </div> <div class="ai-panel-content"> <div class="ai-loading">Загрузка...</div> </div> `; document.body.appendChild(aiPanel); aiPanel.querySelector('.ai-close').onclick = () => { aiPanel.style.display = 'none'; }; } aiPanel.style.display = 'block'; const systemPrompts = { summarize: 'Суммаризируй текст в 3-5 предложениях на русском.', translate: 'Переведи на русский язык.', }; chrome.runtime.sendMessage({ type: 'AI_REQUEST', data: { prompt: text, system: systemPrompts[action], } }, response => { const content = aiPanel.querySelector('.ai-panel-content'); content.innerHTML = response.result || response.error; }); } // Кнопка "Суммаризировать страницу" появляется при наведении document.addEventListener('mouseup', () => { const selected = window.getSelection().toString().trim(); if (selected.length > 50) { showSelectionTooltip(selected); } }); , ציינו את הדומיין הספציפי של ספק ה-LLM — זה משפר אבטחה ומאיץ את ביקורת החנות.
• התעלמות מ-CSP של הדף. content script עשוי שלא לפעול באתרים עם מדיניות אבטחת תוכן מחמירה — השתמשו ב-<!-- popup.html --> <!DOCTYPE html> <html> <head> <style> body { width: 380px; min-height: 200px; padding: 16px; font-family: system-ui; } textarea { width: 100%; height: 80px; } button { width: 100%; margin-top: 8px; padding: 8px; } </style> </head> <body> <h3>AI Ассистент</h3> <button id="summarize-page">Суммаризировать страницу</button> <textarea id="custom-prompt" placeholder="Свой вопрос..."></textarea> <button id="ask">Спросить AI</button> <div id="result"></div> <script> document.getElementById('summarize-page').onclick = async () => { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); const [{ result: pageText }] = await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: () => document.body.innerText.slice(0, 3000), }); const response = await chrome.runtime.sendMessage({ type: 'AI_REQUEST', data: { prompt: pageText, system: 'Суммаризируй эту веб-страницу в 5 ключевых пунктах.', } }); document.getElementById('result').textContent = response.result; }; </script> </body> </html> עם isolated world.
• אין טיפול בהזרקת prompt. אם קלט המשתמש מכיל הוראות ל-LLM, תוקף עלול להשתלט. בריחו את הקלט והגבילו את system prompt.

שיקולים נוספים

התיעוד הרשמי של Chrome Extensions מציין: Service Worker הוא הרכיב המרכזי של התוסף, ונטישת דף הרקע הקבוע מפחיתה את צריכת הזיכרון ומגבירה את האבטחה.

אנו מבטיחים שהתוסף יעבור את ביקורת Chrome Web Store בניסיון הראשון. יש לנו 5 שנות ניסיון בפיתוח תוספי דפדפן ומעל 10 מוצרי AI ששוחררו. קבלו ייעוץ ממהנדס — פשוט צרו קשר.