Dieses Projekt verfolgt das Ziel, eine Browserextension zu entwickeln, mit der Nutzer UI-Elemente auf beliebigen Webseiten auswählen können. Die Extension extrahiert automatisch die HTML- und CSS-Strukturen des ausgewählten Elements und übergibt diese an ein Large Language Model (LLM). Auf dieser Basis generiert das LLM entweder ein Code-Snippet oder eine Webkomponente, die dem originalen Element möglichst nahekommt.
Der Fokus liegt dabei bewusst auf der technischen Machbarkeit innerhalb eines klar definierten neunwöchigen Projektzeitraums sowie auf der Priorisierung essentieller Kernfunktionen. Das Projekt greift verschiedene Umsetzungsvarianten auf, bewertet deren Eignung für den Prototypen und schafft ein Verständnis dafür, wie aktuelle LLMs im Kontext von Webentwicklung eingesetzt werden können.

Projektseite - Christian Noss

Die Browserextension entsteht im Rahmen der Bachelorarbeit im 7. Semester Medieninformatik an der TH Köln. Das Projekt bewegt sich an der Schnittstelle zwischen Webentwicklung und modernen KI-Technologien. Im Mittelpunkt steht die Frage, wie weit eine solche Browsererweiterung innerhalb eines begrenzten Zeitraums praktisch realisiert werden kann.

Wiki: Detaillierte technische Dokumentation und Anleitungen zur Nutzung der Anwendung findest du im Projekt-Wiki
Exposé: Exposé ‐ Web‐Anwendung zur Selfie-Dokumentation
Weekly Documentation: Wöchentliche Dokumentation der Arbeit
Kanban Board: Kanban Board mit Issues für das Projekt
Miro-Board: Weitere Details und die visuelle Darstellung des Projekts findest du auf dem Miro-Board

• Google Chrome (Manifest V3 kompatibel)
• Node.js
• Zugangsschlüssel für die verwendete LLM-API (OpenAI)

Die Kommunikation mit dem Sprachmodell erfolgt über einen lokalen Proxy-Server, um API-Schlüssel nicht im Client offenzulegen.
In das Server-Verzeichnis wechseln:
cd server
Abhängigkeiten installieren:
npm install
.env Datei im Ordner /server anlegen:
OPENAI_API_KEY=your_api_key_here PORT=3000
Server starten:
node server.js
Standardmäßig läuft der Server unter:
http://localhost:3000

1. Chrome öffnen
2. chrome://extensions aufrufen
3. Meine Erweiterungen aufrufen
4. "Entpackte Erweiterung laden" klicken
5. Ordner /extension auswählen

bachelorarbeit/
│
├── extension/                  # Chrome Extension
│   ├── manifest.json           # Extension-Konfiguration
│   ├── popup.html              # Popup-Interface
│   ├── src/
│   │   ├── scripts/
│   │   │   ├── contentScript.js
│   │   │   └── popup.js
│   │   ├── styles/
│   │   │   ├── base.css
│   │   │   ├── combined.css
│   │   │   ├── content.css
│   │   │   ├── fonts.css
│   │   │   ├── icons.css
│   │   │   ├── popup.css
│   │   │   ├── reset.css
│   │   │   └── variables.css
│   │   ├── assets/
│   │   └── fonts/
│   │       └── Inter/
│   └── vendor/
│
├── server/                     # Proxy-Server
│   ├── server.js
│   ├── package.json
│   ├── package-lock.json
│   ├── .env
│   └── node_modules/
│
├── POCs/                       # Proof of Concepts
│
├── .gitignore
├── LICENSE
└── README.md

• Frontend: Chrome Extension (Manifest V3)
• Backend: Node.js Proxy-Server
• Modell: GPT-5.2
• Eingabekontext: JSON-Payload + optional Screenshot
• Sicherheitskonzept: Trennung von Instruktions- und Datenebene zur Reduktion von Prompt-Injection-Risiken

Cosima Hiromi Zink

Lizenz