AI Chrome Extension - “Dude!”

A “Dude!” egy innovatív Chrome böngésző bővítmény, amelyet a Google Hackathon versenyére fejlesztettem ki. A projekt célja a Chrome beépített AI képességeinek kihasználása egy intelligens webes asszisztens létrehozásához.

Projekt Háttér

A Kihívás

A Google Hackathon témája a Chrome beépített AI funkcióinak kreatív felhasználása volt. A cél egy olyan bővítmény létrehozása, amely valódi értéket ad a felhasználóknak a mindennapi böngészés során.

A Megoldás

A “Dude!” egy kontextuális AI asszisztens, amely:

• Automatikusan elemzi a weboldalak tartalmát
• Intelligens összefoglalókat készít
• Válaszol a felhasználó kérdéseire az aktuális oldal alapján
• Segít a navigációban és információkeresésben

Főbb Funkciók

Intelligens Tartalom Elemzés

// Content script - oldal elemzés
class ContentAnalyzer {
  private aiSession: any;

  async initializeAI() {
    // Chrome AI API inicializálás
    this.aiSession = await (window as any).ai.createTextSession({
      systemPrompt: `Te egy hasznos webes asszisztens vagy. 
                     Elemezd az oldal tartalmát és segíts a felhasználónak.`
    });
  }

  async analyzePage(): Promise<PageSummary> {
    const content = this.extractPageContent();
    const summary = await this.aiSession.prompt(
      `Készíts rövid összefoglalót erről az oldalról: ${content}`
    );
    
    return {
      title: document.title,
      summary,
      keyPoints: await this.extractKeyPoints(content),
      readingTime: this.calculateReadingTime(content)
    };
  }

  private extractPageContent(): string {
    // Főbb tartalom kinyerése
    const article = document.querySelector('article, main, .content');
    const paragraphs = document.querySelectorAll('p');
    
    let content = '';
    if (article) {
      content = article.textContent || '';
    } else {
      content = Array.from(paragraphs)
        .map(p => p.textContent)
        .join(' ');
    }
    
    return content.slice(0, 5000); // Limit a token használat miatt
  }
}

Interaktív Chat Interface

// Popup komponens
interface ChatMessage {
  id: string;
  type: 'user' | 'assistant';
  content: string;
  timestamp: Date;
}

class ChatInterface {
  private messages: ChatMessage[] = [];
  private aiSession: any;

  async sendMessage(userInput: string): Promise<void> {
    // Felhasználó üzenet hozzáadása
    this.addMessage('user', userInput);

    try {
      // Kontextus lekérése az aktuális oldalról
      const pageContext = await this.getPageContext();
      
      // AI válasz generálása
      const response = await this.aiSession.prompt(
        `Kontextus: ${pageContext}
         Felhasználó kérdése: ${userInput}
         
         Válaszolj röviden és hasznossan a kérdésre a kontextus alapján.`
      );

      this.addMessage('assistant', response);
    } catch (error) {
      this.addMessage('assistant', 'Sajnos hiba történt. Próbáld újra!');
    }
  }

  private async getPageContext(): Promise<string> {
    // Aktív tab tartalmának lekérése
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    const results = await chrome.scripting.executeScript({
      target: { tabId: tab.id! },
      func: () => {
        return {
          title: document.title,
          url: window.location.href,
          content: document.body.textContent?.slice(0, 2000)
        };
      }
    });

    return JSON.stringify(results[0].result);
  }
}

Smart Suggestions

// Intelligens javaslatok generálása
class SuggestionEngine {
  async generateSuggestions(pageType: string): Promise<string[]> {
    const suggestions = {
      'article': [
        'Készíts összefoglalót',
        'Mik a főbb pontok?',
        'Mennyi idő elolvasni?'
      ],
      'product': [
        'Mik az előnyök és hátrányok?',
        'Hasonlítsd össze más termékekkel',
        'Milyen az ár-érték arány?'
      ],
      'tutorial': [
        'Magyarázd el egyszerűen',
        'Mik a lépések?',
        'Mire kell figyelni?'
      ]
    };

    return suggestions[pageType] || [
      'Mire vonatkozik ez az oldal?',
      'Segíts megérteni a tartalmat',
      'Van valami fontos információ?'
    ];
  }
}

Technikai Implementáció

Manifest V3 Konfiguráció

{
  "manifest_version": 3,
  "name": "Dude! - AI Assistant",
  "version": "1.0.0",
  "description": "Intelligens webes asszisztens Chrome AI-val",
  
  "permissions": [
    "activeTab",
    "scripting",
    "storage"
  ],
  
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  
  "background": {
    "service_worker": "background.js"
  },
  
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  
  "action": {
    "default_popup": "popup.html",
    "default_title": "Dude! AI Assistant"
  }
}

Vite Build Konfiguráció

// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        popup: resolve(__dirname, 'src/popup.html'),
        background: resolve(__dirname, 'src/background.ts'),
        content: resolve(__dirname, 'src/content.ts')
      },
      output: {
        entryFileNames: '[name].js',
        chunkFileNames: '[name].js',
        assetFileNames: '[name].[ext]'
      }
    },
    outDir: 'dist',
    emptyOutDir: true
  },
  
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
});

Kihívások és Megoldások

1. Chrome AI API Limitációk

• Probléma: Token limitek és rate limiting
• Megoldás: Intelligens content chunking és caching

2. Cross-Origin Restrictions

• Probléma: Nem minden oldalon működik az AI API
• Megoldás: Fallback mechanizmus és error handling

3. Performance Optimalizáció

• Probléma: Lassú AI válaszok
• Megoldás: Streaming responses és loading states

Eredmények

Hackathon Eredmények

• 🏆 2. helyezés a Google Hackathon-on
• 👥 50+ résztvevő közül
• 🎯 Különdíj a leginnovatívabb AI használatért

Felhasználói Visszajelzések

• ⭐ 4.8/5 átlagos értékelés
• 📈 1000+ aktív felhasználó az első héten
• 💬 Pozitív feedback a funkcionalitásról

Technikai Metrikák

• ⚡ <500ms átlagos válaszidő
• 🔋 Minimális battery impact
• 📱 Cross-platform kompatibilitás

Jövőbeli Fejlesztések

Rövid Távú (Q1 2024)

• Több nyelv támogatása
• Testreszabható AI személiség
• Offline mód alapfunkciókhoz
• Billentyűparancsok

Hosszú Távú

• Integrációk más szolgáltatásokkal
• Fejlett analytics
• Team collaboration funkciók
• API más fejlesztőknek

Tanulságok

Technikai Tanulságok

• Chrome AI API még korai fázisban van, de nagy potenciál
• Manifest V3 szigorúbb, de biztonságosabb
• TypeScript elengedhetetlen komplex bővítményeknél

Termékfejlesztési Tanulságok

• Felhasználói visszajelzés kritikus fontosságú
• Egyszerű UX > komplex funkciók
• Performance mindennél fontosabb

A “Dude!” projekt remek példa arra, hogyan lehet modern web technológiákat és AI-t kombinálni egy hasznos, mindennapi eszköz létrehozásához. A hackathon során szerzett tapasztalatok és a pozitív fogadtatás megerősítette, hogy az AI-powered browser extensionök nagy jövő előtt állnak.