+
+
+ ${esc(e.title)}${totpBadge}
+ ${userText}
+
+
+ 
+
OpenNIT Vault – Browser-Erweiterung
+ ++ Passwort-Manager-Erweiterung für OpenNIT – + Autofill für Benutzer-, Passwort- und 2FA-Felder direkt im Browser. +
+ +--- + +## Was ist das? + +**OpenNIT Vault** ist die Browser-Erweiterung zum Passwort-Tresor von OpenNIT. Sie verbindet sich mit +deiner selbst gehosteten OpenNIT-Instanz und bietet: + +- 🔎 **Sofortsuche** über alle persönlichen und Team-Tresore +- ⌨️ **Autofill** von Benutzername, Passwort und **2FA/TOTP-Codes** – auch auf mehrstufigen Login-Seiten +- 💡 **Vorschläge direkt im Eingabefeld** (passend zur aufgerufenen Website) +- 👁️ **Detailansicht** mit Anzeigen/Kopieren von Zugangsdaten und 2FA-Code mit Countdown +- ➕ **Neue Einträge anlegen** inkl. **Passwort-Generator** +- 🔒 **PIN-Sperre** mit demselben PIN wie der Web-Tresor (Dauer frei wählbar, bis „bis Browser schließt") +- 🧹 **Zwischenablage-Auto-Clear** nach dem Kopieren von Geheimnissen +- 🖼️ **Favicons** der hinterlegten Seiten (serverseitig gecacht – keine externen Aufrufe) +- 🌙 **Heller & dunkler Modus** (folgt dem System) + +
+ 
+ 
+
🔑'
+ + '2FA-Code kopiert
'
+ + '' + esc(formatted) + '
'
+ + ''
+ + '' + remaining + 's
';
+ document.documentElement.appendChild(notif);
+
+ let secs = remaining;
+ const iv = setInterval(() => {
+ secs--;
+ const t = document.getElementById('__vault_totp_t');
+ const bar = document.getElementById('__vault_totp_bar');
+ if (secs <= 0 || !t) { clearInterval(iv); notif.style.transition = 'opacity .4s'; notif.style.opacity = '0'; setTimeout(() => notif.remove(), 400); return; }
+ t.textContent = secs + 's';
+ if (bar) { bar.style.width = (secs / 30 * 100) + '%'; if (secs < 10) bar.style.background = '#dc3545'; }
+ }, 1000);
+ notif.addEventListener('click', () => { clearInterval(iv); notif.remove(); });
+}
+
+init();
+}
\ No newline at end of file
diff --git a/extension/icon128.png b/extension/icon128.png
new file mode 100644
index 0000000000000000000000000000000000000000..564e7e2c5b674a4caafd82a72d74312b858c9b3a
GIT binary patch
literal 6778
zcmV-=8inPFP)
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/extension/options.js b/extension/options.js
new file mode 100644
index 0000000..25181f6
--- /dev/null
+++ b/extension/options.js
@@ -0,0 +1,227 @@
+'use strict';
+
+function $(id) { return document.getElementById(id); }
+
+// Gespeicherte Werte laden (überschreibt das vorausgefüllte Feld nur wenn bereits gespeichert)
+chrome.storage.local.get(['serverUrl', 'apiToken'], cfg => {
+ if (cfg.serverUrl) $('serverUrl').value = cfg.serverUrl;
+ if (cfg.apiToken) $('apiToken').value = '••••••••';
+});
+
+// Sicherheits-Einstellungen laden
+chrome.storage.local.get(['lockDuration', 'clipClear'], cfg => {
+ $('lockDuration').value = (cfg.lockDuration && cfg.lockDuration !== 'off') ? cfg.lockDuration : '15';
+ $('clipClear').checked = cfg.clipClear !== false; // Standard: an
+});
+
+$('btnSaveSec').addEventListener('click', () => {
+ chrome.storage.local.set({
+ lockDuration: $('lockDuration').value,
+ clipClear: $('clipClear').checked,
+ }, () => {
+ chrome.runtime.sendMessage({ type: 'LOCK_NOW' });
+ $('savedSecMsg').innerHTML = '✓ Gespeichert';
+ setTimeout(() => { $('savedSecMsg').textContent = ''; }, 2000);
+ });
+});
+
+// App-Name und Verbindungsstatus laden (falls Token bereits gesetzt)
+chrome.storage.local.get(['serverUrl', 'apiToken'], async cfg => {
+ if (!cfg.serverUrl || !cfg.apiToken) return;
+ try {
+ const res = await fetch(`${cfg.serverUrl}/api/vault/extension/status`, {
+ headers: { 'Authorization': `Bearer ${cfg.apiToken}` }
+ });
+ const data = await res.json();
+ if (data.ok) {
+ // Name der Erweiterung bleibt fest „OpenNIT Vault"; die Instanz wird
+ // beim angemeldeten Nutzer zur Orientierung angezeigt.
+ if (data.user) {
+ $('headerUser').textContent = data.app_name ? (data.user + ' · ' + data.app_name) : data.user;
+ $('headerStatus').style.display = '';
+ }
+ }
+ } catch { /* ignore */ }
+});
+
+// HTTPS erzwingen (außer localhost) – sonst gingen Token und Passwörter im
+// Klartext über die Leitung.
+function isSecureServerUrl(url) {
+ try {
+ const u = new URL(url);
+ if (u.protocol === 'https:') return true;
+ if (u.protocol === 'http:' && /^(localhost|127\.0\.0\.1|\[::1\])$/.test(u.hostname)) return true;
+ return false;
+ } catch { return false; }
+}
+
+$('btnSave').addEventListener('click', () => {
+ const url = $('serverUrl').value.trim().replace(/\/$/, '');
+ const token = $('apiToken').value.trim();
+ if (!url) { showStatus('Server-URL darf nicht leer sein.', false); return; }
+ if (!isSecureServerUrl(url)) {
+ showStatus('Bitte eine https://-Adresse verwenden (nur localhost darf http:// sein). Sonst würden Token und Passwörter unverschlüsselt übertragen.', false);
+ return;
+ }
+
+ const data = { serverUrl: url };
+ if (token && !token.startsWith('•')) data.apiToken = token;
+
+ chrome.storage.local.set(data, () => {
+ chrome.runtime.sendMessage({ type: 'CLEAR_CACHE' });
+ $('savedMsg').innerHTML = '✓ Gespeichert';
+ setTimeout(() => { $('savedMsg').textContent = ''; }, 2000);
+ });
+});
+
+$('btnTest').addEventListener('click', async () => {
+ const url = $('serverUrl').value.trim().replace(/\/$/, '');
+ const token = $('apiToken').value.trim();
+
+ if (!url || !token || token.startsWith('•')) {
+ showStatus('Bitte zuerst URL und Token eingeben und speichern.', false);
+ return;
+ }
+
+ $('btnTest').innerHTML = ' Teste…';
+ $('btnTest').disabled = true;
+
+ try {
+ const res = await fetch(`${url}/api/vault/extension/status`, {
+ headers: { 'Authorization': `Bearer ${token}` }
+ });
+ const data = await res.json();
+ if (data.ok) {
+ showStatus(`Verbunden als ${esc(data.user)}`, true);
+ if (data.user) {
+ $('headerUser').textContent = data.user;
+ $('headerStatus').style.display = '';
+ }
+ } else {
+ showStatus('Ungültiger Token oder Server-Fehler.', false);
+ }
+ } catch (e) {
+ showStatus('Server nicht erreichbar: ' + esc(e.message), false);
+ }
+
+ $('btnTest').innerHTML = 'Verbindung testen';
+ $('btnTest').disabled = false;
+});
+
+// ── SSO-Anmeldung (OAuth 2.0 + PKCE via chrome.identity) ────────────────────
+function b64url(bytes) {
+ let s = btoa(String.fromCharCode.apply(null, new Uint8Array(bytes)));
+ return s.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+function randB64(len) { const a = new Uint8Array(len); crypto.getRandomValues(a); return b64url(a); }
+async function pkceChallenge(verifier) {
+ const d = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
+ return b64url(d);
+}
+function ssoMsg(msg, ok) {
+ const el = $('ssoMsg');
+ if (ok === null) { el.innerHTML = msg ? ('' + esc(msg) + '') : ''; return; }
+ el.innerHTML = ok ? ('✓ ' + esc(msg) + '')
+ : ('' + esc(msg) + '');
+ if (ok) setTimeout(() => { el.innerHTML = ''; }, 3000);
+}
+function ssoSet(area, obj) { return new Promise(r => chrome.storage[area].set(obj, r)); }
+function ssoRemove(area, keys) { return new Promise(r => chrome.storage[area].remove(keys, r)); }
+
+async function loginWithSso() {
+ const url = $('serverUrl').value.trim().replace(/\/$/, '');
+ if (!url) { ssoMsg('Bitte zuerst die Server-URL eingeben.', false); return; }
+ if (!isSecureServerUrl(url)) { ssoMsg('Bitte eine https://-Adresse verwenden.', false); return; }
+ if (!chrome.identity || !chrome.identity.launchWebAuthFlow) { ssoMsg('Anmeldung wird von diesem Browser nicht unterstützt.', false); return; }
+
+ const verifier = randB64(48);
+ const challenge = await pkceChallenge(verifier);
+ const state = randB64(16);
+ const redirectUri = chrome.identity.getRedirectURL();
+ const authUrl = url + '/vault/extension/authorize?' + new URLSearchParams({
+ client_id: 'opennit-vault-extension', redirect_uri: redirectUri, response_type: 'code',
+ code_challenge: challenge, code_challenge_method: 'S256', state: state, scope: 'vault',
+ }).toString();
+
+ $('btnSso').disabled = true;
+ ssoMsg('Anmeldung läuft…', null);
+ console.log('[OpenNIT Vault] Auth-URL:', authUrl, '| redirect_uri:', redirectUri);
+ chrome.identity.launchWebAuthFlow({ url: authUrl, interactive: true }, async (redirect) => {
+ $('btnSso').disabled = false;
+ const le = chrome.runtime.lastError ? (chrome.runtime.lastError.message || 'unbekannt') : null;
+ console.log('[OpenNIT Vault] launchWebAuthFlow zurück:', { lastError: le, redirect: redirect || null });
+ if (le || !redirect) {
+ ssoMsg('Anmeldung abgebrochen' + (le ? ' – ' + le : ' (keine Rückmeldung)') + '.', false);
+ return;
+ }
+ let params;
+ try { params = new URL(redirect).searchParams; } catch { ssoMsg('Ungültige Antwort.', false); return; }
+ if (params.get('error')) { ssoMsg('Abgelehnt (' + params.get('error') + ').', false); return; }
+ if (params.get('state') !== state) { ssoMsg('Sicherheitsprüfung fehlgeschlagen (state).', false); return; }
+ const code = params.get('code');
+ if (!code) { ssoMsg('Kein Autorisierungscode erhalten.', false); return; }
+ try {
+ const body = new URLSearchParams({ grant_type: 'authorization_code', code: code, code_verifier: verifier, redirect_uri: redirectUri });
+ const res = await fetch(url + '/api/vault/extension/oauth/token', {
+ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: body.toString(),
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok || !data.access_token) { ssoMsg('Token konnte nicht ausgestellt werden.', false); return; }
+ await ssoSet('local', { serverUrl: url, apiRefreshToken: data.refresh_token, apiRefreshExpiresAt: Date.now() + (data.refresh_expires_in || 0) * 1000 });
+ await ssoRemove('local', ['apiToken']);
+ await ssoSet('session', { accessToken: data.access_token, accessExpiresAt: Date.now() + (data.expires_in || 0) * 1000 });
+ chrome.runtime.sendMessage({ type: 'CLEAR_CACHE' });
+ ssoMsg('Angemeldet.', true);
+ reflectAuthState();
+ loadConnStatus();
+ } catch (e) { ssoMsg('Verbindungsfehler: ' + e.message, false); }
+ });
+}
+
+async function logoutSso() {
+ const url = $('serverUrl').value.trim().replace(/\/$/, '');
+ const cfg = await new Promise(r => chrome.storage.local.get(['apiRefreshToken'], r));
+ if (url && cfg.apiRefreshToken) {
+ try {
+ const b = new URLSearchParams({ token: cfg.apiRefreshToken });
+ await fetch(url + '/api/vault/extension/oauth/revoke', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: b.toString() });
+ } catch (e) { /* ignore */ }
+ }
+ await ssoRemove('local', ['apiRefreshToken', 'apiRefreshExpiresAt']);
+ await ssoRemove('session', ['accessToken', 'accessExpiresAt', 'unlock']);
+ chrome.runtime.sendMessage({ type: 'CLEAR_CACHE' });
+ reflectAuthState();
+ ssoMsg('Abgemeldet.', true);
+ $('headerStatus').style.display = 'none';
+}
+
+function reflectAuthState() {
+ chrome.storage.local.get(['apiRefreshToken'], cfg => {
+ const sso = !!cfg.apiRefreshToken;
+ $('btnLogout').style.display = sso ? '' : 'none';
+ $('btnSso').lastChild.textContent = sso ? ' Neu anmelden' : ' Mit OpenNIT anmelden';
+ });
+}
+
+// Verbindungsstatus über den Background (nutzt SSO-Access-Token oder manuellen Token)
+function loadConnStatus() {
+ chrome.runtime.sendMessage({ type: 'CHECK_STATUS' }, data => {
+ if (data && data.ok) {
+ if (data.app_name) { $('optTitle').textContent = 'OpenNIT Vault'; }
+ if (data.user) { $('headerUser').textContent = data.app_name ? (data.user + ' · ' + data.app_name) : data.user; $('headerStatus').style.display = ''; }
+ }
+ });
+}
+
+$('btnSso').addEventListener('click', loginWithSso);
+$('btnLogout').addEventListener('click', logoutSso);
+reflectAuthState();
+loadConnStatus();
+
+function showStatus(msg, ok) {
+ const el = $('statusMsg');
+ el.innerHTML = `
+
+
+
+
+
+ Server-Verbindung
+
+
+
+
+
+ Adresse Ihrer OpenNIT-Instanz – ohne abschließenden Slash.
+
+
+
+
+
+
+
+
+ Empfohlen: Anmeldung wie an OpenNIT (lokal + 2FA / Microsoft 365 / Keycloak). Der Zugang wird automatisch erneuert.
+
+
+
+
+
+ Erweitert: manueller Token
+
+
+
+
+
+ Alternative ohne SSO (z. B. Kiosk/Headless): Vault → „Extension“ → Token generieren.
+
+
+
+
+
+
+
+
+
+
+
+
+ Sicherheit
+
+
+
+
+
+ Ist im Web-Tresor ein Tresor-PIN aktiv, verlangt die Erweiterung diesen PIN – serverseitig erzwungen, damit ein gestohlener Token allein nichts nützt. Diese Einstellung legt nur fest, wie lange eine Entsperrung gilt. Ohne gesetzten Tresor-PIN entfällt die Sperre.
+
+
+
+ Kopierte Passwörter und 2FA-Codes werden nach kurzer Zeit automatisch aus der Zwischenablage entfernt.
+
+
+
+
+
+
+
+
+
+
+ Einrichtungsschritte
+
+
+ -
+
- 1Öffnen Sie den Passwort-Vault in Ihrer OpenNIT-Anwendung. +
- 2Klicken Sie auf „Extension“ in der Toolbar und generieren Sie einen API-Token. +
- 3Fügen Sie den Token oben in das Token-Feld ein und klicken Sie auf Speichern. +
- 4Fokussieren Sie ein Login-Feld auf einer Website – Vault-Vorschläge erscheinen automatisch. +
${msg}
`;
+ setTimeout(() => { el.innerHTML = ''; }, 5000);
+}
+
+function esc(s) { return String(s||'').replace(/&/g,'&').replace(//g,'>'); }
\ No newline at end of file
diff --git a/extension/popup.html b/extension/popup.html
new file mode 100644
index 0000000..c6f1a77
--- /dev/null
+++ b/extension/popup.html
@@ -0,0 +1,347 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+OpenNIT Vault
+
+
+
+
+
+
+
+
+
+
+
+ Neuen Eintrag anlegen
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Eintrag
+
+
+
+
+
+
+
+
+
+
+Tresor gesperrt
+ Mit deinem Tresor-PIN entsperren
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/extension/popup.js b/extension/popup.js
new file mode 100644
index 0000000..545e113
--- /dev/null
+++ b/extension/popup.js
@@ -0,0 +1,602 @@
+'use strict';
+
+let allEntries = null;
+let pageMatches = [];
+let entryIndex = {}; // id -> entry
+let detailState = null; // aktiver Eintrag im Detail-Panel
+let selIndex = -1; // Tastatur-Auswahl in der Liste
+
+function $(id) { return document.getElementById(id); }
+
+async function init() {
+ chrome.storage.local.get(['serverUrl'], cfg => {
+ if (cfg.serverUrl) $('btnOpen').href = cfg.serverUrl + '/vault';
+ });
+
+ $('search').addEventListener('input', onSearch);
+ $('search').addEventListener('keydown', onListKeydown);
+ $('btnOptions').addEventListener('click', () => chrome.runtime.openOptionsPage());
+ $('btnNew').addEventListener('click', openNewPanel);
+ $('btnCloseNew').addEventListener('click', closeNewPanel);
+ $('btnSaveNew').addEventListener('click', saveNewEntry);
+ $('btnGenPw').addEventListener('click', generatePassword);
+ $('btnRevealNewPw').addEventListener('click', () => {
+ const f = $('nePassword');
+ f.type = f.type === 'password' ? 'text' : 'password';
+ });
+
+ // Detail-Panel
+ $('btnDetailBack').addEventListener('click', closeDetail);
+ $('btnDetailClose').addEventListener('click', closeDetail);
+ $('btnRevealUser').addEventListener('click', toggleRevealUser);
+ $('btnCopyUser').addEventListener('click', () => copySecret($('detailUser').dataset.value || '', 'Benutzername kopiert'));
+ $('btnRevealPass').addEventListener('click', toggleRevealPass);
+ $('btnCopyPass').addEventListener('click', copyDetailPassword);
+ $('btnCopyTotp').addEventListener('click', () => { const c = $('detailTotp').dataset.code || ''; if (c) copySecret(c, 'TOTP kopiert'); });
+ $('btnCopyNotes').addEventListener('click', () => copyToClipboard($('detailNotes').dataset.value || '', 'Notiz kopiert'));
+ $('btnDetailFill').addEventListener('click', fillActiveTab);
+
+ // Lock-Screen
+ $('lockSubmit').addEventListener('click', submitPin);
+ $('lockPin').addEventListener('keydown', e => { if (e.key === 'Enter') submitPin(); });
+ $('btnLock').addEventListener('click', lockNow);
+
+ boot();
+}
+
+// Reihenfolge: Status (App/User/PIN) → Lock prüfen → Liste oder PIN-Schirm.
+function boot() {
+ chrome.runtime.sendMessage({ type: 'CHECK_STATUS' }, resp => {
+ if (resp?.ok) {
+ $('hdTitle').textContent = 'OpenNIT Vault';
+ // Untertitel: angemeldeter Nutzer und – zur Orientierung – die Instanz.
+ const parts = [];
+ if (resp.user) parts.push(resp.user);
+ if (resp.app_name) parts.push(resp.app_name);
+ $('hdUser').textContent = parts.join(' · ');
+ }
+ chrome.runtime.sendMessage({ type: 'GET_LOCK' }, lock => {
+ $('btnLock').style.display = lock?.required ? '' : 'none';
+ if (lock?.required && !lock.unlocked) {
+ showLockScreen();
+ } else {
+ hideLockScreen();
+ reload(true);
+ }
+ });
+ });
+}
+
+// ── Lock-Screen ────────────────────────────────────────────────────────────
+function showLockScreen() {
+ $('lockScreen').style.display = 'block';
+ $('listWrap').style.display = 'none';
+ $('newEntryPanel').style.display = 'none';
+ $('detailPanel').style.display = 'none';
+ $('search').closest('.search-wrap').style.display = 'none';
+ $('lockMsg').textContent = '';
+ $('lockPin').value = '';
+ setTimeout(() => $('lockPin').focus(), 50);
+}
+function hideLockScreen() {
+ $('lockScreen').style.display = 'none';
+ $('search').closest('.search-wrap').style.display = '';
+}
+function submitPin() {
+ const pin = $('lockPin').value;
+ if (!pin) { $('lockMsg').textContent = 'Bitte PIN eingeben.'; return; }
+ $('lockSubmit').disabled = true;
+ $('lockSubmit').textContent = '…';
+ $('lockMsg').textContent = '';
+ chrome.runtime.sendMessage({ type: 'DO_UNLOCK', pin }, resp => {
+ $('lockSubmit').disabled = false;
+ $('lockSubmit').textContent = 'Entsperren';
+ if (resp?.ok) {
+ hideLockScreen();
+ reload(true);
+ } else {
+ let m = resp?.error || 'PIN falsch.';
+ if (resp?.lockSecs > 0) m += ' (' + resp.lockSecs + 's gesperrt)';
+ $('lockMsg').textContent = m;
+ $('lockPin').value = '';
+ $('lockPin').focus();
+ }
+ });
+}
+function lockNow() {
+ chrome.runtime.sendMessage({ type: 'LOCK_NOW' }, () => showLockScreen());
+}
+
+function reload(force) {
+ closeDetailTimers();
+ detailState = null;
+ selIndex = -1;
+ $('search').value = '';
+ $('listWrap').innerHTML = '';
+ $('listWrap').style.display = '';
+ $('newEntryPanel').style.display = 'none';
+ $('detailPanel').style.display = 'none';
+ $('search').closest('.search-wrap').style.display = '';
+
+ chrome.runtime.sendMessage({ type: 'GET_ENTRIES', force }, resp => {
+ // Serverseitig gesperrt (Token-Härtung) → PIN-Schirm zeigen.
+ if (resp?.locked) { showLockScreen(); return; }
+ allEntries = resp?.entries ?? null;
+ entryIndex = {};
+ if (allEntries === null) {
+ $('listWrap').innerHTML = '
⚠ Nicht verbunden.
Einstellungen prüfen.
';
+ return;
+ }
+ indexEntries(allEntries);
+ chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+ const url = tabs[0]?.url;
+ if (url && !url.startsWith('chrome://') && !url.startsWith('chrome-extension://')) {
+ chrome.runtime.sendMessage({ type: 'GET_MATCHING_ENTRIES', url }, r2 => {
+ pageMatches = r2?.entries || [];
+ indexEntries(pageMatches);
+ renderDefault();
+ });
+ } else {
+ pageMatches = [];
+ renderDefault();
+ }
+ });
+ });
+}
+
+function indexEntries(list) {
+ (list || []).forEach(e => { entryIndex[String(e.id)] = e; });
+}
+
+function renderDefault() {
+ selIndex = -1;
+ if (pageMatches.length > 0) {
+ $('listWrap').innerHTML =
+ 'Einstellungen prüfen.
Passend für diese Seite
' +
+ '' + pageMatches.map(e => entryHtml(e)).join('') + '
';
+ } else {
+ $('listWrap').innerHTML =
+ 'Alle Einträge (' + allEntries.length + ')
' +
+ '' +
+ (allEntries.length ? allEntries.map(e => entryHtml(e)).join('') : '
';
+ }
+ const el = document.getElementById('eList');
+ if (el) attachHandlers(el);
+}
+
+function onSearch() {
+ selIndex = -1;
+ const q = ($('search').value || '').trim().toLowerCase();
+ if (!q) { renderDefault(); return; }
+ if (!allEntries) return;
+
+ const filtered = allEntries.filter(e =>
+ (e.title ||'').toLowerCase().includes(q) ||
+ (e.username ||'').toLowerCase().includes(q) ||
+ (e.url ||'').toLowerCase().includes(q) ||
+ (e.notes ||'').toLowerCase().includes(q) ||
+ (e.team_name||'').toLowerCase().includes(q)
+ );
+
+ $('listWrap').innerHTML =
+ 'Noch keine Einträge vorhanden.
') +
+ 'Suche (' + filtered.length + ')
' +
+ '' +
+ (filtered.length ? filtered.map(e => entryHtml(e)).join('') : '
';
+
+ const el = document.getElementById('eList');
+ if (el) attachHandlers(el);
+}
+
+// Tastatur-Navigation aus dem Suchfeld heraus (↑↓ wählt, Enter öffnet).
+function onListKeydown(e) {
+ if (detailState || $('newEntryPanel').style.display === 'block') return;
+ const items = [...document.querySelectorAll('#eList .entry')];
+ if (!items.length) return;
+ if (e.key === 'ArrowDown') { e.preventDefault(); setSel(items, selIndex + 1); }
+ else if (e.key === 'ArrowUp') { e.preventDefault(); setSel(items, selIndex - 1); }
+ else if (e.key === 'Enter') {
+ e.preventDefault();
+ const target = selIndex >= 0 ? items[selIndex] : items[0];
+ if (target) openDetail(target.dataset.id);
+ }
+}
+function setSel(items, idx) {
+ items.forEach(i => i.classList.remove('kbd-sel'));
+ selIndex = Math.max(0, Math.min(idx, items.length - 1));
+ const el = items[selIndex];
+ if (el) { el.classList.add('kbd-sel'); el.scrollIntoView({ block: 'nearest' }); }
+}
+
+// ── New Entry ─────────────────────────────────────────────────────────────
+function openNewPanel() {
+ $('listWrap').style.display = 'none';
+ $('search').closest('.search-wrap').style.display = 'none';
+ $('detailPanel').style.display = 'none';
+ $('newEntryPanel').style.display = 'block';
+ $('neTitle').value = '';
+ $('neUsername').value = '';
+ $('nePassword').value = '';
+ $('nePassword').type = 'password';
+ $('neUrl').value = '';
+ $('neNotes').value = '';
+ $('newEntryMsg').textContent = '';
+ chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+ const url = tabs[0]?.url;
+ if (url && !url.startsWith('chrome://') && !url.startsWith('chrome-extension://')) {
+ $('neUrl').value = url;
+ }
+ });
+ $('neTitle').focus();
+}
+
+function closeNewPanel() {
+ $('newEntryPanel').style.display = 'none';
+ $('listWrap').style.display = '';
+ $('search').closest('.search-wrap').style.display = '';
+}
+
+function generatePassword() {
+ const len = 20;
+ const sets = [
+ 'abcdefghijkmnopqrstuvwxyz',
+ 'ABCDEFGHJKLMNPQRSTUVWXYZ',
+ '23456789',
+ '!@#$%^&*()-_=+[]{}',
+ ];
+ const all = sets.join('');
+ const buf = new Uint32Array(len);
+ crypto.getRandomValues(buf);
+ let out = [];
+ // Mindestens ein Zeichen je Set
+ sets.forEach((s, i) => { out.push(s[buf[i] % s.length]); });
+ for (let i = sets.length; i < len; i++) out.push(all[buf[i] % all.length]);
+ // mischen
+ for (let i = out.length - 1; i > 0; i--) {
+ const j = buf[i] % (i + 1);
+ [out[i], out[j]] = [out[j], out[i]];
+ }
+ $('nePassword').value = out.join('');
+ $('nePassword').type = 'text';
+}
+
+async function saveNewEntry() {
+ const title = $('neTitle').value.trim();
+ if (!title) { $('newEntryMsg').textContent = 'Titel ist erforderlich.'; return; }
+
+ const cfg = await new Promise(r => chrome.storage.local.get(['serverUrl', 'apiToken'], r));
+ if (!cfg.serverUrl || !cfg.apiToken) { $('newEntryMsg').textContent = 'Nicht konfiguriert.'; return; }
+
+ $('btnSaveNew').disabled = true;
+ $('btnSaveNew').textContent = '...';
+ $('newEntryMsg').textContent = '';
+
+ const fd = new FormData();
+ fd.append('title', title);
+ fd.append('username', $('neUsername').value.trim());
+ fd.append('password', $('nePassword').value);
+ fd.append('url', $('neUrl').value.trim());
+ fd.append('notes', $('neNotes').value.trim());
+
+ try {
+ const res = await fetch(cfg.serverUrl + '/api/vault/extension/entries', {
+ method: 'POST',
+ headers: { 'Authorization': 'Bearer ' + cfg.apiToken },
+ body: fd,
+ });
+ const data = await res.json();
+ if (data.ok) {
+ chrome.runtime.sendMessage({ type: 'CLEAR_CACHE' });
+ closeNewPanel();
+ reload(true);
+ showToast('Eintrag gespeichert');
+ } else {
+ $('newEntryMsg').textContent = data.error || 'Fehler beim Speichern.';
+ }
+ } catch (e) {
+ $('newEntryMsg').textContent = 'Verbindungsfehler: ' + e.message;
+ }
+
+ $('btnSaveNew').disabled = false;
+ $('btnSaveNew').textContent = 'Speichern';
+}
+
+// ── Liste (Klick öffnet Detailansicht) ─────────────────────────────────────
+function monogram(title) {
+ const s = String(title || '?');
+ let h = 0;
+ for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360;
+ const ch = s.charAt(0).toUpperCase().replace(/[&<>]/g, '');
+ return { hue: h, ch: ch };
+}
+
+function entryHtml(e) {
+ const userText = esc(e.username) || 'Kein Benutzername';
+ const m = monogram(e.title);
+ const icon = `${m.ch}`;
+ const totpBadge = e.has_totp ? '2FA' : '';
+ return `
+ Keine Einträge gefunden.
') +
+ '
+
+
+ `;
+}
+
+function attachHandlers(container) {
+ container.querySelectorAll('.entry').forEach(row => {
+ row.addEventListener('click', () => openDetail(row.dataset.id));
+ });
+ loadFavicons(container);
+}
+
+function loadFavicons(container) {
+ container.querySelectorAll('.entry[data-domain]').forEach(row => {
+ if (!row.dataset.domain) return;
+ const id = row.dataset.id;
+ chrome.runtime.sendMessage({ type: 'GET_FAVICON', id }, resp => {
+ if (resp?.dataUrl) {
+ const ic = row.querySelector('.entry-icon');
+ if (ic) ic.innerHTML = '