Jak stworzyć własny, prosty wtyczkę/rozszerzenie AI do przeglądarki (np. Chrome/Firefox) z użyciem OpenAI API dla codziennych zadań?

Stworzenie własnej, prostej wtyczki AI do przeglądarki, która wykorzystuje API OpenAI, jest nie tylko możliwe, ale i zaskakująco przystępne nawet dla osób z podstawową wiedzą programistyczną. Pomoże Ci to zautomatyzować codzienne zadania, od streszczania artykułów po szybkie generowanie draftów odpowiedzi na maile, wszystko w ciągu kilku sekund i bez opuszczania strony. Sam zaczynałem od podobnego projektu i muszę przyznać, że zaoszczędziło mi to mnóstwo czasu, szczególnie podczas researchu.

Dlaczego warto mieć własne rozszerzenie AI?

Posiadanie spersonalizowanego narzędzia AI w przeglądarce to gra warta świeczki. Przede wszystkim personalizacja – to Ty decydujesz, do czego ma służyć. U mnie pierwszym celem było streszczanie długich artykułów naukowych, bo ręczne czytanie 15-20 stron zajmowało mi często ponad pół godziny. Teraz? Klikam ikonkę, a w ciągu ~7 sekund dostaję kluczowe wnioski. To też szybkość i wygoda. Nie musisz kopiować tekstu, przełączać się do ChatGPT czy Gemini, wklejać, a potem wracać. Wszystko dzieje się „in-situ”. Co więcej, masz kontrolę nad promptem, czyli instrukcją dla AI, co przekłada się na lepsze i bardziej spersonalizowane wyniki.

Co będzie potrzebne?

Nie martw się, to nie rocket science. Będziesz potrzebować:

• Konta OpenAI i klucza API (API Key): Bez tego nie połączysz się z modelem językowym. Utworzenie konta i wygenerowanie klucza zajmuje jakieś 2 minuty.
• Podstawowej wiedzy o HTML, CSS i JavaScript: Nie musisz być ekspertem, żeby stworzyć prosty interfejs i obsługę API. W praktyce wystarczy znajomość podstawowych tagów i funkcji.
• Zrozumienia `manifest.json`: To plik konfiguracyjny, który mówi przeglądarce, czym jest Twoje rozszerzenie i jakie ma uprawnienia.

Krok po kroku: Tworzymy proste rozszerzenie

Zacznijmy od najprostszej wersji – rozszerzenia, które po kliknięciu ikonki w przeglądarce otworzy małe okienko (popup), gdzie wkleisz tekst, a AI go przetworzy.

1. Struktura folderów

Utwórz nowy folder, np. `MojaWtyczkaAI`. W nim stwórz trzy pliki:

• `manifest.json`
• `popup.html`
• `popup.js`

2. Plik `manifest.json`

To serce rozszerzenia. Dla Chrome (i większości nowoczesnych przeglądarek) użyjemy formatu Manifest V3.

Musisz dodać ikonki (`icon16.png`, `icon48.png`) do folderu. Mogą to być proste, kwadratowe obrazki. `permissions` na `activeTab` i `scripting` są kluczowe, bo pozwalają rozszerzeniu działać na aktywnej zakładce.

3. Interfejs `popup.html`

Teraz stworzymy proste okno, które wyskoczy po kliknięciu ikonki.

„`html

body { font-family: sans-serif; width: 300px; padding: 10px; }

textarea { width: 95%; height: 100px; margin-bottom: 10px; }

button { padding: 8px 15px; cursor: pointer; }

#output { margin-top: 10px; border: 1px solid #eee; padding: 5px; min-height: 50px; background-color: #f9f9f9; }

Wtyczka OpenAI

Przetwórz (GPT-3.5)

„`

Bardzo proste: pole tekstowe, przycisk i miejsce na wynik.

4. Logika `popup.js`

Tutaj dzieje się magia – pobieranie tekstu, wysyłanie do OpenAI i wyświetlanie odpowiedzi. Klucz API będzie tu wklejony tymczasowo w celach edukacyjnych, ale pamiętaj: w prawdziwym projekcie nigdy nie umieszczaj go bezpośrednio w kodzie, który może trafić do publicznego repozytorium! U mnie pierwszy raz z kluczem w kodzie skończyło się na zablokowaniu konta, bo przypadkiem wypuściłem to publicznie. Nauczka: nigdy więcej! Dla prototypu możesz użyć `localStorage` przeglądarki, żeby użytkownik sam raz wpisał klucz.

„`javascript

document.getElementById(’processBtn’).addEventListener(’click’, async () => {

const inputText = document.getElementById(’inputText’).value;

const outputDiv = document.getElementById(’output’);

outputDiv.textContent = 'Przetwarzam…’;

if (!inputText) {

outputDiv.textContent = 'Wklej jakiś tekst!’;

return;

}

const OPENAI_API_KEY = 'TWOJ_KLUCZ_API_OPENAI’; // ZMIEŃ NA SWÓJ KLUCZ!

const prompt = `Streszcz krótko i zwięźle następujący tekst: „${inputText}”`; // Możesz zmienić prompt!

try {

const response = await fetch(’https://api.openai.com/v1/chat/completions’, {

method: 'POST’,

headers: {

’Content-Type’: 'application/json’,

’Authorization’: `Bearer ${OPENAI_API_KEY}`

},

body: JSON.stringify({

model: 'gpt-3.5-turbo’, // Możesz eksperymentować z innymi modelami

messages: [{ role: 'user’, content: prompt }],

max_tokens: 150

})

});

const data = await response.json();

if (data.choices && data.choices.length > 0) {

outputDiv.textContent = data.choices[0].message.content;

} else if (data.error) {

outputDiv.textContent = `Błąd API: ${data.error.message}`;

console.error(„OpenAI API Error:”, data.error);

} else {

outputDiv.textContent = 'Nieoczekiwana odpowiedź API.’;

console.error(„Unexpected API response:”, data);

}

} catch (error) {

outputDiv.textContent = `Wystąpił błąd: ${error.message}`;

console.error(„Fetch Error:”, error);

}

});

„`

Zastąp `TWOJ_KLUCZ_API_OPENAI` swoim prawdziwym kluczem. Zauważ, że używamy modelu `gpt-3.5-turbo`, który jest bardzo wydajny i stosunkowo tani (około 0.0015 USD za 1000 tokenów wejściowych).

5. Testowanie i ładowanie rozszerzenia

To ostatni krok!

• Otwórz przeglądarkę (np. Chrome).
• Wpisz `chrome://extensions` w pasku adresu (lub `about:addons` dla Firefox, potem „Debug add-ons”).
• Włącz „Tryb deweloperski” (Developer mode) w prawym górnym rogu.
• Kliknij „Załaduj rozpakowane rozszerzenie” (Load unpacked).
• Wybierz folder `MojaWtyczkaAI`, który wcześniej utworzyłeś.

Powinieneś zobaczyć nową ikonkę w pasku rozszerzeń przeglądarki. Kliknij ją, wklej tekst, kliknij „Przetwórz” i zobacz, jak działa Twoje pierwsze rozszerzenie AI! U mnie pierwszy test poszedł gładko, ale zdarzało mi się zapomnieć o dodaniu `Bearer` przed kluczem, co skutkowało błędem autoryzacji. Małe detale robią różnicę.

Optymalizacja i porady

• Monitoruj koszty: OpenAI nalicza opłaty za użycie tokenów. Sprawdzaj panel użytkownika, żeby nie było niespodzianek. 150 `max_tokens` w tym przykładzie to bardzo mała wartość, wystarczająca na krótkie streszczenie.
• Zmień prompt: Eksperymentuj z `promptem`. Zamiast streszczenia, możesz poprosić o poprawę gramatyki (`Popraw gramatykę i ortografię w tekście: „${inputText}”`), generowanie pomysłów, czy tłumaczenie.
• Obsługa błędów: Dodaj bardziej rozbudowaną obsługę błędów, np. komunikat, gdy klucz API jest błędny.
• Lokalne przechowywanie klucza: Zamiast hardcodować klucz, użyj `chrome.storage.sync` lub `localStorage`, aby użytkownik mógł go bezpiecznie wprowadzić raz.

Najczęstsze pytania

Czy to bezpieczne dla moich danych?

Jeśli używasz własnego klucza API, to Ty kontrolujesz, co wysyłasz do OpenAI. Pamiętaj jednak, że wysyłane dane przechodzą przez serwery OpenAI i mogą być używane do poprawy ich modeli, chyba że masz umowę o wyłączeniu danych. Nie przesyłaj wrażliwych informacji bez świadomości tego ryzyka.

Ile to kosztuje?

Koszt jest minimalny. Model `gpt-3.5-turbo` to obecnie jeden z najtańszych modeli API OpenAI. Za 1000 tokenów wejściowych zapłacisz około 0.0015 USD, a wyjściowych 0.002 USD. W praktyce, za dziesiątki, a nawet setki zapytań dziennie, miesięczny rachunek nie powinien przekroczyć kilku dolarów.

Czy mogę to udostępnić innym?

Tak, możesz spakować rozszerzenie i udostępnić je znajomym, aby załadowali je w trybie deweloperskim. Aby udostępnić je szerzej (np. w Chrome Web Store), musisz zadbać o bezpieczeństwo klucza API (użytkownicy muszą podawać własny) oraz spełnić wytyczne przeglądarki.

Nie ma na co czekać, zrób to dziś!