${emoji}
${canCopy ? `` : ''}
${canFill ? `` : ''}
`;
}).join('');
// Copy password
listEl.querySelectorAll('[data-copy-pass]').forEach(btn =>
btn.addEventListener('click', e => {
e.stopPropagation();
const item = _items.find(i => i.id === parseInt(btn.dataset.copyPass));
if (item?.plain?.password) {
navigator.clipboard.writeText(item.plain.password);
btn.title = 'Copied!';
setTimeout(() => { btn.title = 'Copy password'; }, 1500);
}
})
);
// Autofill
listEl.querySelectorAll('[data-autofill]').forEach(btn =>
btn.addEventListener('click', async e => {
e.stopPropagation();
const item = _items.find(i => i.id === parseInt(btn.dataset.autofill));
if (!item?.plain) return;
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (tab?.id) {
chrome.tabs.sendMessage(tab.id, {
type: 'DO_AUTOFILL',
username: item.plain.username || '',
password: item.plain.password || '',
}).catch(() => {});
}
window.close();
})
);
// Three-dot menu: copy username
listEl.querySelectorAll('[data-menu]').forEach(btn =>
btn.addEventListener('click', e => {
e.stopPropagation();
const item = _items.find(i => i.id === parseInt(btn.dataset.menu));
if (!item?.plain) return;
// Simple: copy username on dots click (could be a dropdown in future)
if (item.plain.username) {
navigator.clipboard.writeText(item.plain.username);
btn.title = 'Username copied!';
setTimeout(() => { btn.title = 'More'; }, 1500);
}
})
);
}
// ── Tabs ──────────────────────────────────────────────────────────────────────
function initTabs() {
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
_activeTab = btn.dataset.tab;
document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b === btn));
renderList();
});
});
}
// ── Auto-save prompt ──────────────────────────────────────────────────────────
async function checkPendingSave() {
const { pending_save } = await chrome.storage.session.get('pending_save');
if (!pending_save) return;
const prompt = $('save-prompt');
$('save-name').value = pending_save.siteName || '';
$('save-username').value = pending_save.username || '';
prompt.classList.remove('hidden');
$('btn-save-yes').onclick = async () => {
prompt.classList.add('hidden');
await saveCredential(pending_save);
await chrome.storage.session.remove('pending_save');
};
$('btn-save-no').onclick = async () => {
prompt.classList.add('hidden');
await chrome.storage.session.remove('pending_save');
};
}
async function saveCredential(data) {
if (!_vaultKey) return;
const plain = { url: data.url || '', username: data.username || '', password: data.password || '', notes: '' };
const name = $('save-name').value.trim() || data.siteName || 'Untitled';
const { enc_data, iv } = await ExtCrypto.encryptItem(_vaultKey, plain);
try {
const res = await apiFetch('/api/vault', {
method: 'POST',
body: JSON.stringify({ name, item_type: 'password', folder_id: null, enc_data, iv }),
});
if (res?.ok) { await fetchAndDecryptVault(); renderList(); }
} catch (err) { console.error('saveCredential failed:', err); }
}
// ── Init ──────────────────────────────────────────────────────────────────────
async function init() {
try {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
_currentUrl = tab?.url || '';
} catch {}
// Set vault link
$('btn-open-vault').href = VAULT_URL;
const sessionState = await restoreSessionIfAvailable();
if (sessionState === 'vault') {
showView('vault');
await checkPendingSave();
if (_items.length) {
renderList();
fetchAndDecryptVault().then(() => renderList());
} else {
await fetchAndDecryptVault();
renderList();
}
} else if (sessionState === 'unlock') {
showView('unlock');
$('unlock-password').focus();
} else {
showView('login');
}
// Login
$('btn-login').addEventListener('click', handleLogin);
$('login-password').addEventListener('keydown', e => { if (e.key === 'Enter') handleLogin(); });
$('login-email').addEventListener('keydown', e => { if (e.key === 'Enter') $('login-password').focus(); });
// MFA
$('btn-mfa-back').addEventListener('click', () => { _mfaToken = null; showView('login'); });
$('mfa-code').addEventListener('keydown', e => { if (e.key === 'Enter') $('btn-mfa-verify')?.click(); });
// Unlock-only
$('btn-unlock').addEventListener('click', handleUnlockOnly);
$('unlock-password').addEventListener('keydown', e => { if (e.key === 'Enter') handleUnlockOnly(); });
$('btn-unlock-signout').addEventListener('click', signOut);
// Vault actions
$('btn-add-item').addEventListener('click', () => { chrome.tabs.create({ url: VAULT_URL }); });
$('nav-account').addEventListener('click', signOut);
$('nav-generator').addEventListener('click', () => { chrome.tabs.create({ url: GEN_URL }); });
$('nav-alerts').addEventListener('click', () => { chrome.tabs.create({ url: ALERTS_URL }); });
// Keep the service worker alive so chrome.storage.session survives while the
// browser is open. We ping it every 20 s; the ping itself is a no-op but
// prevents the SW from being killed between popup openings.
const _keepalive = setInterval(() => {
chrome.runtime.sendMessage({ type: 'KEEPALIVE' }).catch(() => {});
}, 20_000);
// Search
$('vault-search').addEventListener('input', () => renderList());
// Tabs
initTabs();
}
document.addEventListener('DOMContentLoaded', init);