mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-22 07:26:42 +02:00
61d181fbc2
Move inactive projects out of active workspace: - bauntown (community website) - maerchenzauber (AI story generation) - memoro (voice memo app) - news (news aggregation) - nutriphi (nutrition tracking) - reader (reading app) - uload (URL shortener) - wisekeep (AI wisdom extraction) Update CLAUDE.md documentation: - Add presi to active projects - Document archived projects section - Update workspace configuration Archived apps can be re-activated by moving back to apps/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
133 lines
4.1 KiB
Markdown
133 lines
4.1 KiB
Markdown
# Kokon Browser Extension
|
|
|
|
Eine Chrome/Firefox Browser-Erweiterung für die Kokon Read-Later App.
|
|
|
|
## Features
|
|
|
|
- **Ein-Klick Speichern**: Speichere jeden Artikel mit einem Klick
|
|
- **Automatische Content-Extraktion**: Nutzt die gleiche Mozilla Readability Engine wie die App
|
|
- **Session-Synchronisation**: Automatische Anmeldeerkennung mit der Web-App
|
|
- **Elegantes Design**: Moderne, responsive Benutzeroberfläche
|
|
- **Fehlerbehandlung**: Intelligente Fehlerbehandlung und Benutzerführung
|
|
|
|
## Installation (Development)
|
|
|
|
### Chrome/Edge
|
|
|
|
1. Öffne `chrome://extensions/`
|
|
2. Aktiviere "Entwicklermodus" (Developer mode)
|
|
3. Klicke "Ungepackte Erweiterung laden" (Load unpacked)
|
|
4. Wähle den `browser-extension` Ordner aus
|
|
|
|
### Firefox
|
|
|
|
1. Öffne `about:debugging`
|
|
2. Klicke "Dieses Firefox" (This Firefox)
|
|
3. Klicke "Temporäres Add-on laden" (Load Temporary Add-on)
|
|
4. Wähle die `manifest.json` Datei aus
|
|
|
|
## Verwendung
|
|
|
|
1. **Erste Einrichtung**:
|
|
- Installiere die Erweiterung
|
|
- Logge dich in der Kokon Web-App ein (wird automatisch geöffnet)
|
|
|
|
2. **Artikel speichern**:
|
|
- Navigiere zu einem beliebigen Artikel im Web
|
|
- Klicke auf das Kokon-Symbol in der Browser-Toolbar
|
|
- Klicke "Save Article"
|
|
- Der Artikel wird automatisch verarbeitet und in deiner Kokon-Liste gespeichert
|
|
|
|
## Technische Details
|
|
|
|
### Architektur
|
|
|
|
- **Manifest V3**: Moderne Chrome Extension API
|
|
- **Service Worker**: Background-Verarbeitung für Session-Management
|
|
- **Popup Interface**: Elegant gestaltetes Popup mit Echtzeit-Feedback
|
|
- **Chrome Storage API**: Synchronisation mit Web-App-Sessions
|
|
|
|
### Sicherheit
|
|
|
|
- **Minimale Berechtigungen**: Nur `activeTab` und `storage`
|
|
- **HTTPS Only**: Sichere Kommunikation mit Supabase
|
|
- **Token-basierte Auth**: Nutzt bestehende Supabase-Session
|
|
- **Domain-Validierung**: Verhindert Speichern von Browser-internen Seiten
|
|
|
|
### Integration
|
|
|
|
- Nutzt die gleiche `save-article` Edge Function wie die App
|
|
- Teilt sich die Session mit der Web-App über Chrome Storage
|
|
- Automatische Token-Erneuerung und Logout-Erkennung
|
|
|
|
## Datei-Struktur
|
|
|
|
```
|
|
browser-extension/
|
|
├── manifest.json # Extension-Konfiguration (Manifest V3)
|
|
├── popup.html # Popup-Interface HTML
|
|
├── popup.js # Popup-Logik und API-Calls
|
|
├── background.js # Service Worker für Background-Tasks
|
|
├── icons/ # Extension-Icons (TODO: Icons hinzufügen)
|
|
│ ├── icon-16.png
|
|
│ ├── icon-32.png
|
|
│ ├── icon-48.png
|
|
│ └── icon-128.png
|
|
└── README.md # Diese Datei
|
|
```
|
|
|
|
## TODO: Icons
|
|
|
|
Die Extension benötigt noch Icons in verschiedenen Größen:
|
|
|
|
- 16x16px (Toolbar)
|
|
- 32x32px (Extension-Management)
|
|
- 48x48px (Extension-Management)
|
|
- 128x128px (Chrome Web Store)
|
|
|
|
Icons sollten das Kokon-Logo (🥥) oder ein ähnliches Design verwenden.
|
|
|
|
## Chrome Web Store Deployment
|
|
|
|
Für die Veröffentlichung im Chrome Web Store:
|
|
|
|
1. **Icons hinzufügen** (siehe TODO oben)
|
|
2. **Version bumpen** in `manifest.json`
|
|
3. **Extension packen**:
|
|
```bash
|
|
zip -r kokon-extension.zip browser-extension/
|
|
```
|
|
4. **Chrome Developer Dashboard**: Upload auf [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)
|
|
|
|
## Firefox Add-ons Deployment
|
|
|
|
Für Mozilla Add-ons:
|
|
|
|
1. **Firefox-spezifische Anpassungen** (falls nötig)
|
|
2. **Signierung** über [Mozilla Add-on Developer Hub](https://addons.mozilla.org/developers/)
|
|
|
|
## Entwicklung
|
|
|
|
### Testing
|
|
|
|
1. Lade die Extension im Entwicklermodus
|
|
2. Öffne eine beliebige Webseite
|
|
3. Teste das Popup und die Save-Funktionalität
|
|
4. Überprüfe die Browser-Konsole für Fehler
|
|
|
|
### Debugging
|
|
|
|
- **Popup debuggen**: Rechtsklick auf Extension-Icon → "Inspect popup"
|
|
- **Background Script**: In `chrome://extensions/` → "Inspect views: background page"
|
|
- **Storage prüfen**: Chrome DevTools → Application → Storage → Extension
|
|
|
|
## Kompatibilität
|
|
|
|
- **Chrome**: Version 88+ (Manifest V3 Support)
|
|
- **Edge**: Version 88+ (Chromium-basiert)
|
|
- **Firefox**: Version 109+ (Manifest V3 Support)
|
|
- **Safari**: Benötigt Anpassungen für Safari Web Extensions
|
|
|
|
## Lizenz
|
|
|
|
Teil des Kokon-Projekts - siehe Haupt-Repository für Lizenzdetails.
|