+ listEl.innerHTML = keys
+ .map((groupName) => {
+ if (!groups[groupName]) return "";
+ const isCollapsed = _collapsedFolders.has(groupName);
+ const count = groups[groupName].length;
+ const chevron = isCollapsed ? "›" : "⌄";
+ const itemsHtml = isCollapsed
+ ? ""
+ : groups[groupName].map(buildItemHtml).join("");
+ return `
`;
- }).join('');
+ })
+ .join("");
// Wire collapse toggle on group headers.
- listEl.querySelectorAll('.pk-group-header').forEach(hdr => {
- hdr.addEventListener('click', () => {
- const groupName = hdr.closest('.pk-group').dataset.group;
- if (_collapsedFolders.has(groupName)) _collapsedFolders.delete(groupName);
+ listEl.querySelectorAll(".pk-group-header").forEach((hdr) => {
+ hdr.addEventListener("click", () => {
+ const groupName = hdr.closest(".pk-group").dataset.group;
+ if (_collapsedFolders.has(groupName))
+ _collapsedFolders.delete(groupName);
else _collapsedFolders.add(groupName);
renderList();
});
});
} else {
- listEl.innerHTML = items.map(buildItemHtml).join('');
+ listEl.innerHTML = items.map(buildItemHtml).join("");
}
// Start TOTP tickers for items that have a totp_uri.
- items.forEach(item => {
- if (item.item_type !== 'password' || !_extractTotpSecret(item.plain?.totp_uri)) return;
+ items.forEach((item) => {
+ if (
+ item.item_type !== "password" ||
+ !_extractTotpSecret(item.plain?.totp_uri)
+ )
+ return;
const codeEl = $(`totp-${item.id}`);
const timerEl = $(`totp-t-${item.id}`);
if (!codeEl) return;
@@ -595,10 +744,10 @@ function renderList() {
async function tick() {
const code = await getTotpCode(item.plain.totp_uri).catch(() => null);
if (!code || !codeEl.isConnected) return;
- codeEl.textContent = code.slice(0, 3) + ' ' + code.slice(3);
+ codeEl.textContent = code.slice(0, 3) + " " + code.slice(3);
const secs = _totpSecondsLeft();
- timerEl.textContent = ' ' + secs + 's';
- timerEl.style.color = secs <= 5 ? '#dc2626' : '#9ca3af';
+ timerEl.textContent = " " + secs + "s";
+ timerEl.style.color = secs <= 5 ? "#dc2626" : "#9ca3af";
}
tick();
const id = setInterval(tick, 1000);
@@ -606,126 +755,158 @@ function renderList() {
});
// Copy password
- listEl.querySelectorAll('[data-copy-pass]').forEach(btn =>
- btn.addEventListener('click', e => {
+ listEl.querySelectorAll("[data-copy-pass]").forEach((btn) =>
+ btn.addEventListener("click", (e) => {
e.stopPropagation();
- const item = _items.find(i => i.id === parseInt(btn.dataset.copyPass));
+ const item = _items.find((i) => i.id === parseInt(btn.dataset.copyPass));
if (item?.plain?.password) {
_copyWithAutoClear(item.plain.password);
- btn.title = 'Copied!';
- setTimeout(() => { btn.title = 'Copy password'; }, 1500);
+ btn.title = "Copied!";
+ setTimeout(() => {
+ btn.title = "Copy password";
+ }, 1500);
}
- })
+ }),
);
// Copy TOTP code
- listEl.querySelectorAll('[data-copy-totp]').forEach(btn =>
- btn.addEventListener('click', async e => {
+ listEl.querySelectorAll("[data-copy-totp]").forEach((btn) =>
+ btn.addEventListener("click", async (e) => {
e.stopPropagation();
- const item = _items.find(i => i.id === parseInt(btn.dataset.copyTotp));
+ const item = _items.find((i) => i.id === parseInt(btn.dataset.copyTotp));
if (!item?.plain?.totp_uri) return;
const code = await getTotpCode(item.plain.totp_uri).catch(() => null);
if (code) {
navigator.clipboard.writeText(code);
- btn.title = 'Copied!';
- btn.style.color = '#16a34a';
- setTimeout(() => { btn.title = 'Copy 2FA code'; btn.style.color = ''; }, 1500);
+ btn.title = "Copied!";
+ btn.style.color = "#16a34a";
+ setTimeout(() => {
+ btn.title = "Copy 2FA code";
+ btn.style.color = "";
+ }, 1500);
}
- })
+ }),
);
// Autofill
- listEl.querySelectorAll('[data-autofill]').forEach(btn =>
- btn.addEventListener('click', async e => {
+ listEl.querySelectorAll("[data-autofill]").forEach((btn) =>
+ btn.addEventListener("click", async (e) => {
e.stopPropagation();
- const item = _items.find(i => i.id === parseInt(btn.dataset.autofill));
+ 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 });
+ 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(() => { });
+ chrome.tabs
+ .sendMessage(tab.id, {
+ type: "DO_AUTOFILL",
+ username: item.plain.username || "",
+ password: item.plain.password || "",
+ })
+ .catch(() => {});
}
window.close();
- })
+ }),
);
// Copy username (dedicated button)
- listEl.querySelectorAll('[data-copy-user]').forEach(btn =>
- btn.addEventListener('click', e => {
+ listEl.querySelectorAll("[data-copy-user]").forEach((btn) =>
+ btn.addEventListener("click", (e) => {
e.stopPropagation();
- const item = _items.find(i => i.id === parseInt(btn.dataset.copyUser));
+ const item = _items.find((i) => i.id === parseInt(btn.dataset.copyUser));
if (item?.plain?.username) {
_copyWithAutoClear(item.plain.username);
- btn.title = 'Copied!';
- setTimeout(() => { btn.title = 'Copy username'; }, 1500);
+ btn.title = "Copied!";
+ setTimeout(() => {
+ btn.title = "Copy username";
+ }, 1500);
}
- })
+ }),
);
// Three-dot menu: proper flyout with contextual actions
- listEl.querySelectorAll('[data-menu]').forEach(btn =>
- btn.addEventListener('click', e => {
+ listEl.querySelectorAll("[data-menu]").forEach((btn) =>
+ btn.addEventListener("click", (e) => {
e.stopPropagation();
// Close any already-open flyout first.
- document.querySelectorAll('.pk-flyout').forEach(el => el.remove());
+ document.querySelectorAll(".pk-flyout").forEach((el) => el.remove());
- const item = _items.find(i => i.id === parseInt(btn.dataset.menu));
+ const item = _items.find((i) => i.id === parseInt(btn.dataset.menu));
if (!item) return;
- const flyout = document.createElement('div');
- flyout.className = 'pk-flyout';
+ const flyout = document.createElement("div");
+ flyout.className = "pk-flyout";
const menuItems = [
- item.plain?.url ? {
- label: 'Open URL',
- icon: '
',
- action: () => { chrome.tabs.create({ url: item.plain.url }); flyout.remove(); },
- } : null,
- item.plain?.username ? {
- label: 'Copy username',
- icon: '
',
- action: () => { _copyWithAutoClear(item.plain.username); flyout.remove(); },
- } : null,
- item.plain?.password ? {
- label: 'Copy password',
- icon: '
',
- action: () => { _copyWithAutoClear(item.plain.password); flyout.remove(); },
- } : null,
+ item.plain?.url
+ ? {
+ label: "Open URL",
+ icon: '
',
+ action: () => {
+ chrome.tabs.create({ url: item.plain.url });
+ flyout.remove();
+ },
+ }
+ : null,
+ item.plain?.username
+ ? {
+ label: "Copy username",
+ icon: '
',
+ action: () => {
+ _copyWithAutoClear(item.plain.username);
+ flyout.remove();
+ },
+ }
+ : null,
+ item.plain?.password
+ ? {
+ label: "Copy password",
+ icon: '
',
+ action: () => {
+ _copyWithAutoClear(item.plain.password);
+ flyout.remove();
+ },
+ }
+ : null,
].filter(Boolean);
- menuItems.forEach(mi => {
- const row = document.createElement('button');
- row.className = 'pk-flyout-item';
- row.innerHTML = mi.icon + '
' + escHtml(mi.label) + '';
- row.addEventListener('click', e => { e.stopPropagation(); mi.action(); });
+ menuItems.forEach((mi) => {
+ const row = document.createElement("button");
+ row.className = "pk-flyout-item";
+ row.innerHTML = mi.icon + "
" + escHtml(mi.label) + "";
+ row.addEventListener("click", (e) => {
+ e.stopPropagation();
+ mi.action();
+ });
flyout.appendChild(row);
});
// Position flyout below the button, right-aligned.
- btn.style.position = 'relative';
+ btn.style.position = "relative";
btn.appendChild(flyout);
// Close on any outside click.
setTimeout(() => {
- document.addEventListener('click', function handler() {
+ document.addEventListener("click", function handler() {
flyout.remove();
- document.removeEventListener('click', handler);
+ document.removeEventListener("click", handler);
});
}, 0);
- })
+ }),
);
}
// ── Tabs ──────────────────────────────────────────────────────────────────────
function initTabs() {
- document.querySelectorAll('.tab-btn').forEach(btn => {
- btn.addEventListener('click', () => {
+ 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));
+ document
+ .querySelectorAll(".tab-btn")
+ .forEach((b) => b.classList.toggle("active", b === btn));
renderList();
});
});
@@ -739,21 +920,21 @@ function initTabs() {
* The first option ("— No folder —") with value "" is always kept.
*/
async function loadFoldersIntoSaveModal() {
- const select = $('save-folder');
+ const select = $("save-folder");
// Reset to just the placeholder option.
select.innerHTML = '
';
try {
- const res = await apiFetch('/api/folders');
+ const res = await apiFetch("/api/folders");
if (!res?.ok) return;
const folders = await res.json();
- folders.forEach(f => {
- const opt = document.createElement('option');
+ folders.forEach((f) => {
+ const opt = document.createElement("option");
opt.value = f.id;
opt.textContent = f.name;
select.appendChild(opt);
});
} catch (err) {
- console.error('[PassKeeper] loadFoldersIntoSaveModal failed:', err);
+ console.error("[PassKeeper] loadFoldersIntoSaveModal failed:", err);
}
}
@@ -766,73 +947,100 @@ async function loadFoldersIntoSaveModal() {
* service worker restarts and is reliably present when the popup re-opens.
*/
async function checkPendingSave() {
- const { pending_save } = await chrome.storage.local.get('pending_save');
+ const { pending_save } = await chrome.storage.local.get("pending_save");
if (!pending_save) return;
// Populate fields.
- $('save-name').value = pending_save.siteName || '';
- $('save-username').value = pending_save.username || '';
- $('save-prompt-subtitle').textContent =
- `${pending_save.username || '(no username)'} on ${pending_save.siteName || pending_save.url || 'unknown site'}`;
- $('save-prompt-title').textContent =
- pending_save._isUpdate ? 'Update in PassKeeper?' : 'Save to PassKeeper?';
+ $("save-name").value = pending_save.siteName || "";
+ $("save-username").value = pending_save.username || "";
+ $("save-prompt-subtitle").textContent =
+ `${pending_save.username || "(no username)"} on ${pending_save.siteName || pending_save.url || "unknown site"}`;
+ $("save-prompt-title").textContent = pending_save._isUpdate
+ ? "Update in PassKeeper?"
+ : "Save to PassKeeper?";
// Load folders (non-blocking — modal shows immediately, folders populate async).
- $('save-folder').value = '';
+ $("save-folder").value = "";
loadFoldersIntoSaveModal();
// Show the overlay.
- $('save-prompt-overlay').classList.remove('hidden');
- $('save-name').focus();
+ $("save-prompt-overlay").classList.remove("hidden");
+ $("save-name").focus();
// Wire buttons — use onclick so re-running checkPendingSave never double-binds.
// Helper to dismiss the overlay, clear storage, and remove the toolbar badge.
function _clearPendingSave() {
- $('save-prompt-overlay').classList.add('hidden');
- chrome.storage.local.remove('pending_save');
- chrome.runtime.sendMessage({ type: 'CLEAR_SAVE_BADGE' }).catch(() => {});
+ $("save-prompt-overlay").classList.add("hidden");
+ chrome.storage.local.remove("pending_save");
+ chrome.runtime.sendMessage({ type: "CLEAR_SAVE_BADGE" }).catch(() => {});
}
- $('btn-save-yes').onclick = async () => {
- console.log('[PassKeeper] User saved credential for', pending_save.siteName);
+ $("btn-save-yes").onclick = async () => {
+ console.log(
+ "[PassKeeper] User saved credential for",
+ pending_save.siteName,
+ );
await saveCredential(pending_save);
_clearPendingSave();
};
- $('btn-save-no').onclick = () => {
- console.log('[PassKeeper] User dismissed save prompt for', pending_save.siteName);
+ $("btn-save-no").onclick = () => {
+ console.log(
+ "[PassKeeper] User dismissed save prompt for",
+ pending_save.siteName,
+ );
_clearPendingSave();
};
}
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 plain = {
+ url: data.url || "",
+ username: data.username || "",
+ password: data.password || "",
+ notes: "",
+ };
+ const name = $("save-name").value.trim() || data.siteName || "Untitled";
// Read selected folder — empty string means no folder (null).
- const folderVal = $('save-folder').value;
+ const folderVal = $("save-folder").value;
const folder_id = folderVal ? parseInt(folderVal, 10) : null;
const { enc_data, iv } = await ExtCrypto.encryptItem(_vaultKey, plain);
const { enc_name, iv_name } = await ExtCrypto.encryptName(_vaultKey, name);
try {
- const res = await apiFetch('/api/vault', {
- method: 'POST',
- body: JSON.stringify({ name: 'password', item_type: 'password', folder_id, enc_data, iv, enc_name, iv_name }),
+ const res = await apiFetch("/api/vault", {
+ method: "POST",
+ body: JSON.stringify({
+ name: "password",
+ item_type: "password",
+ folder_id,
+ enc_data,
+ iv,
+ enc_name,
+ iv_name,
+ }),
});
if (res?.ok) {
- console.log('[PassKeeper] Credential saved to vault:', name, '(name encrypted), folder_id:', folder_id);
+ console.log(
+ "[PassKeeper] Credential saved to vault:",
+ name,
+ "(name encrypted), folder_id:",
+ folder_id,
+ );
await fetchAndDecryptVault();
renderList();
}
- } catch (err) { console.error('saveCredential failed:', err); }
+ } catch (err) {
+ console.error("saveCredential failed:", err);
+ }
}
// ── Password Generator ────────────────────────────────────────────────────────
const GEN_SETS = {
- lower: 'abcdefghijklmnopqrstuvwxyz',
- upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
- numbers: '0123456789',
- symbols: '!@#$%^&*()-_=+[]{}|;:,.<>?',
+ lower: "abcdefghijklmnopqrstuvwxyz",
+ upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+ numbers: "0123456789",
+ symbols: "!@#$%^&*()-_=+[]{}|;:,.<>?",
};
/**
@@ -843,45 +1051,53 @@ function _cryptoRandInt(max) {
// Rejection sampling to eliminate modulo bias.
const limit = Math.floor(0x100000000 / max) * max;
const buf = new Uint32Array(1);
- do { crypto.getRandomValues(buf); } while (buf[0] >= limit);
+ do {
+ crypto.getRandomValues(buf);
+ } while (buf[0] >= limit);
return buf[0] % max;
}
function generatePassword(length, useLower, useUpper, useNumbers, useSymbols) {
// Always fall back to lower if nothing selected, preventing infinite loop.
const pool = [
- useLower ? GEN_SETS.lower : '',
- useUpper ? GEN_SETS.upper : '',
- useNumbers ? GEN_SETS.numbers : '',
- useSymbols ? GEN_SETS.symbols : '',
- ].join('');
- if (!pool) return '';
+ useLower ? GEN_SETS.lower : "",
+ useUpper ? GEN_SETS.upper : "",
+ useNumbers ? GEN_SETS.numbers : "",
+ useSymbols ? GEN_SETS.symbols : "",
+ ].join("");
+ if (!pool) return "";
// Guarantee at least one character from each selected charset
// using cryptographically secure random selection.
const required = [];
- if (useLower) required.push(GEN_SETS.lower[_cryptoRandInt(GEN_SETS.lower.length)]);
- if (useUpper) required.push(GEN_SETS.upper[_cryptoRandInt(GEN_SETS.upper.length)]);
- if (useNumbers) required.push(GEN_SETS.numbers[_cryptoRandInt(GEN_SETS.numbers.length)]);
- if (useSymbols) required.push(GEN_SETS.symbols[_cryptoRandInt(GEN_SETS.symbols.length)]);
+ if (useLower)
+ required.push(GEN_SETS.lower[_cryptoRandInt(GEN_SETS.lower.length)]);
+ if (useUpper)
+ required.push(GEN_SETS.upper[_cryptoRandInt(GEN_SETS.upper.length)]);
+ if (useNumbers)
+ required.push(GEN_SETS.numbers[_cryptoRandInt(GEN_SETS.numbers.length)]);
+ if (useSymbols)
+ required.push(GEN_SETS.symbols[_cryptoRandInt(GEN_SETS.symbols.length)]);
const arr = new Uint32Array(length);
crypto.getRandomValues(arr);
- const rest = Array.from(arr).map(n => pool[n % pool.length]);
+ const rest = Array.from(arr).map((n) => pool[n % pool.length]);
// Splice required chars into random positions and trim to length.
const combined = [...rest];
- required.forEach((ch, i) => { combined[i] = ch; });
+ required.forEach((ch, i) => {
+ combined[i] = ch;
+ });
// Fisher-Yates shuffle — fully CSPRNG, no Math.random().
for (let i = combined.length - 1; i > 0; i--) {
const j = _cryptoRandInt(i + 1);
[combined[i], combined[j]] = [combined[j], combined[i]];
}
- return combined.slice(0, length).join('');
+ return combined.slice(0, length).join("");
}
function passwordStrength(pw) {
- if (!pw) return { label: '', color: '' };
+ if (!pw) return { label: "", color: "" };
let score = 0;
if (pw.length >= 8) score++;
if (pw.length >= 12) score++;
@@ -890,11 +1106,11 @@ function passwordStrength(pw) {
if (/[A-Z]/.test(pw)) score++;
if (/[0-9]/.test(pw)) score++;
if (/[^a-zA-Z0-9]/.test(pw)) score++;
- if (score <= 2) return { label: 'Weak', color: '#dc2626' };
- if (score <= 4) return { label: 'Fair', color: '#d97706' };
- if (score <= 5) return { label: 'Good', color: '#2563eb' };
- if (score <= 6) return { label: 'Strong', color: '#16a34a' };
- return { label: 'Very Strong', color: '#15803d' };
+ if (score <= 2) return { label: "Weak", color: "#dc2626" };
+ if (score <= 4) return { label: "Fair", color: "#d97706" };
+ if (score <= 5) return { label: "Good", color: "#2563eb" };
+ if (score <= 6) return { label: "Strong", color: "#16a34a" };
+ return { label: "Very Strong", color: "#15803d" };
}
let _genInitialised = false;
@@ -904,33 +1120,35 @@ function initGenerator() {
if (!_genInitialised) {
_genInitialised = true;
- const slider = $('gen-length');
- const numInput = $('gen-length-num');
+ const slider = $("gen-length");
+ const numInput = $("gen-length-num");
// Keep slider and number input in sync.
- slider.addEventListener('input', () => {
+ slider.addEventListener("input", () => {
numInput.value = slider.value;
refreshGen();
});
- numInput.addEventListener('input', () => {
+ numInput.addEventListener("input", () => {
const v = Math.min(64, Math.max(8, parseInt(numInput.value) || 16));
slider.value = v;
numInput.value = v;
refreshGen();
});
- ['gen-lower', 'gen-upper', 'gen-numbers', 'gen-symbols'].forEach(id => {
- $(id).addEventListener('change', refreshGen);
+ ["gen-lower", "gen-upper", "gen-numbers", "gen-symbols"].forEach((id) => {
+ $(id).addEventListener("change", refreshGen);
});
- $('btn-gen-refresh').addEventListener('click', refreshGen);
+ $("btn-gen-refresh").addEventListener("click", refreshGen);
- $('btn-gen-copy').addEventListener('click', () => {
- const pw = $('gen-output').textContent;
- if (!pw || pw === 'Click refresh to generate') return;
+ $("btn-gen-copy").addEventListener("click", () => {
+ const pw = $("gen-output").textContent;
+ if (!pw || pw === "Click refresh to generate") return;
navigator.clipboard.writeText(pw).then(() => {
- $('btn-gen-copy').title = 'Copied!';
- setTimeout(() => { $('btn-gen-copy').title = 'Copy password'; }, 1500);
+ $("btn-gen-copy").title = "Copied!";
+ setTimeout(() => {
+ $("btn-gen-copy").title = "Copy password";
+ }, 1500);
});
});
}
@@ -940,24 +1158,33 @@ function initGenerator() {
}
function refreshGen() {
- const length = Math.min(64, Math.max(8, parseInt($('gen-length').value) || 16));
- const useLower = $('gen-lower').checked;
- const useUpper = $('gen-upper').checked;
- const useNumbers = $('gen-numbers').checked;
- const useSymbols = $('gen-symbols').checked;
+ const length = Math.min(
+ 64,
+ Math.max(8, parseInt($("gen-length").value) || 16),
+ );
+ const useLower = $("gen-lower").checked;
+ const useUpper = $("gen-upper").checked;
+ const useNumbers = $("gen-numbers").checked;
+ const useSymbols = $("gen-symbols").checked;
// Require at least one charset.
if (!useLower && !useUpper && !useNumbers && !useSymbols) {
- $('gen-output').textContent = 'Select at least one character type';
- $('gen-strength-label').textContent = '';
+ $("gen-output").textContent = "Select at least one character type";
+ $("gen-strength-label").textContent = "";
return;
}
- const pw = generatePassword(length, useLower, useUpper, useNumbers, useSymbols);
- $('gen-output').textContent = pw;
+ const pw = generatePassword(
+ length,
+ useLower,
+ useUpper,
+ useNumbers,
+ useSymbols,
+ );
+ $("gen-output").textContent = pw;
const { label, color } = passwordStrength(pw);
- const strengthEl = $('gen-strength-label');
+ const strengthEl = $("gen-strength-label");
strengthEl.textContent = label;
strengthEl.style.color = color;
}
@@ -969,180 +1196,211 @@ let _addViewInitialised = false;
async function initAddView() {
// Pre-fill URL from the current active tab.
try {
- const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
- if (tab?.url?.startsWith('http')) {
- $('add-url').value = tab.url;
+ const [tab] = await chrome.tabs.query({
+ active: true,
+ currentWindow: true,
+ });
+ if (tab?.url?.startsWith("http")) {
+ $("add-url").value = tab.url;
// Derive a human-friendly site name from the tab title or hostname.
- if (!$('add-name').value) {
- $('add-name').value = tab.title
- ? tab.title.replace(/[-|–].*$/, '').trim() // strip " - Login" suffixes
- : new URL(tab.url).hostname.replace(/^www\./, '');
+ if (!$("add-name").value) {
+ $("add-name").value = tab.title
+ ? tab.title.replace(/[-|–].*$/, "").trim() // strip " - Login" suffixes
+ : new URL(tab.url).hostname.replace(/^www\./, "");
}
}
- } catch (e) { }
+ } catch (e) {}
// Load folders into the add-folder select.
- const addFolderSel = $('add-folder');
+ const addFolderSel = $("add-folder");
addFolderSel.innerHTML = '
';
try {
- const res = await apiFetch('/api/folders');
+ const res = await apiFetch("/api/folders");
if (res?.ok) {
const folders = await res.json();
- folders.forEach(f => {
- const opt = document.createElement('option');
+ folders.forEach((f) => {
+ const opt = document.createElement("option");
opt.value = f.id;
opt.textContent = f.name;
addFolderSel.appendChild(opt);
});
}
- } catch (e) { }
+ } catch (e) {}
// Wire one-time event listeners.
if (!_addViewInitialised) {
_addViewInitialised = true;
// Back button.
- $('btn-add-back').addEventListener('click', () => {
- showView('vault');
- hideError('add-error');
+ $("btn-add-back").addEventListener("click", () => {
+ showView("vault");
+ hideError("add-error");
});
// Show/hide password toggle.
- $('btn-add-toggle-pw').addEventListener('click', () => {
- const pw = $('add-password');
- pw.type = pw.type === 'password' ? 'text' : 'password';
+ $("btn-add-toggle-pw").addEventListener("click", () => {
+ const pw = $("add-password");
+ pw.type = pw.type === "password" ? "text" : "password";
});
// Generate password — generates via the generator logic and pastes into field.
- $('btn-add-generate').addEventListener('click', () => {
+ $("btn-add-generate").addEventListener("click", () => {
const pw = generatePassword(16, true, true, true, true);
- $('add-password').value = pw;
- $('add-password').type = 'text'; // show it so the user can see what was generated
+ $("add-password").value = pw;
+ $("add-password").type = "text"; // show it so the user can see what was generated
});
// Save button.
- $('btn-add-save').addEventListener('click', addItemToVault);
+ $("btn-add-save").addEventListener("click", addItemToVault);
// Allow Enter in any text field to submit.
- ['add-name', 'add-url', 'add-username', 'add-password'].forEach(id => {
- $(id).addEventListener('keydown', e => { if (e.key === 'Enter') addItemToVault(); });
+ ["add-name", "add-url", "add-username", "add-password"].forEach((id) => {
+ $(id).addEventListener("keydown", (e) => {
+ if (e.key === "Enter") addItemToVault();
+ });
});
}
// Clear fields and error each time the view opens.
- ['add-name', 'add-url', 'add-username', 'add-password', 'add-notes'].forEach(id => {
- // Don't reset url/name — already pre-filled above.
- if (id === 'add-url' || id === 'add-name') return;
- $(id).value = '';
- });
- $('add-password').type = 'password';
- hideError('add-error');
- $('add-name').focus();
+ ["add-name", "add-url", "add-username", "add-password", "add-notes"].forEach(
+ (id) => {
+ // Don't reset url/name — already pre-filled above.
+ if (id === "add-url" || id === "add-name") return;
+ $(id).value = "";
+ },
+ );
+ $("add-password").type = "password";
+ hideError("add-error");
+ $("add-name").focus();
}
async function addItemToVault() {
- const name = $('add-name').value.trim();
- const url = $('add-url').value.trim();
- const username = $('add-username').value.trim();
- const password = $('add-password').value;
- const notes = $('add-notes').value.trim();
- const folderVal = $('add-folder').value;
+ const name = $("add-name").value.trim();
+ const url = $("add-url").value.trim();
+ const username = $("add-username").value.trim();
+ const password = $("add-password").value;
+ const notes = $("add-notes").value.trim();
+ const folderVal = $("add-folder").value;
const folder_id = folderVal ? parseInt(folderVal, 10) : null;
- hideError('add-error');
+ hideError("add-error");
- if (!name) { showError('add-error', 'Site name is required.'); return; }
- if (!password) { showError('add-error', 'Password is required.'); return; }
- if (!_vaultKey) { showError('add-error', 'Vault is locked. Please unlock first.'); return; }
+ if (!name) {
+ showError("add-error", "Site name is required.");
+ return;
+ }
+ if (!password) {
+ showError("add-error", "Password is required.");
+ return;
+ }
+ if (!_vaultKey) {
+ showError("add-error", "Vault is locked. Please unlock first.");
+ return;
+ }
- const btn = $('btn-add-save');
+ const btn = $("btn-add-save");
btn.disabled = true;
- btn.textContent = 'Saving…';
+ btn.textContent = "Saving…";
try {
const plain = { url, username, password, notes };
const { enc_data, iv } = await ExtCrypto.encryptItem(_vaultKey, plain);
const { enc_name, iv_name } = await ExtCrypto.encryptName(_vaultKey, name);
- const res = await apiFetch('/api/vault', {
- method: 'POST',
- body: JSON.stringify({ name: 'password', item_type: 'password', folder_id, enc_data, iv, enc_name, iv_name }),
+ const res = await apiFetch("/api/vault", {
+ method: "POST",
+ body: JSON.stringify({
+ name: "password",
+ item_type: "password",
+ folder_id,
+ enc_data,
+ iv,
+ enc_name,
+ iv_name,
+ }),
});
if (!res?.ok) {
const data = await res.json().catch(() => ({}));
- showError('add-error', data.error || 'Failed to save. Please try again.');
+ showError("add-error", data.error || "Failed to save. Please try again.");
return;
}
- console.log('[PassKeeper] Item added to vault:', name, '(name encrypted)');
+ console.log("[PassKeeper] Item added to vault:", name, "(name encrypted)");
// Refresh vault and go back.
await fetchAndDecryptVault();
renderList();
- showView('vault');
+ showView("vault");
} catch (err) {
- showError('add-error', 'Network error: ' + err.message);
+ showError("add-error", "Network error: " + err.message);
} finally {
btn.disabled = false;
- btn.textContent = 'Save to Vault';
+ btn.textContent = "Save to Vault";
}
}
// ── Account view ──────────────────────────────────────────────────────────────
-const IDLE_TIMEOUT_KEY = 'idle_lock_seconds';
+const IDLE_TIMEOUT_KEY = "idle_lock_seconds";
async function initAccountView() {
// Load saved timeout value and reflect it in the select.
const stored = await chrome.storage.local.get(IDLE_TIMEOUT_KEY);
const saved = stored[IDLE_TIMEOUT_KEY];
if (saved !== undefined) {
- const sel = $('acct-idle-timeout');
+ const sel = $("acct-idle-timeout");
// Find the matching option; fall back to 600 if not found.
- const opt = Array.from(sel.options).find(o => parseInt(o.value) === saved);
+ const opt = Array.from(sel.options).find(
+ (o) => parseInt(o.value) === saved,
+ );
if (opt) sel.value = String(saved);
}
// Save on change and notify the background to apply immediately.
- $('acct-idle-timeout').addEventListener('change', async () => {
- const val = parseInt($('acct-idle-timeout').value);
+ $("acct-idle-timeout").addEventListener("change", async () => {
+ const val = parseInt($("acct-idle-timeout").value);
await chrome.storage.local.set({ [IDLE_TIMEOUT_KEY]: val });
// Tell background to re-apply the new interval.
- chrome.runtime.sendMessage({ type: 'SET_IDLE_TIMEOUT', seconds: val }).catch(() => { });
+ chrome.runtime
+ .sendMessage({ type: "SET_IDLE_TIMEOUT", seconds: val })
+ .catch(() => {});
// Brief "Saved" confirmation.
- const saved = $('acct-idle-saved');
- saved.classList.remove('hidden');
- setTimeout(() => saved.classList.add('hidden'), 2000);
- console.log('[PassKeeper] Idle lock timeout set to', val, 'seconds');
+ const saved = $("acct-idle-saved");
+ saved.classList.remove("hidden");
+ setTimeout(() => saved.classList.add("hidden"), 2000);
+ console.log("[PassKeeper] Idle lock timeout set to", val, "seconds");
});
- $('acct-open-vault').href = VAULT_URL;
- $('acct-signout').addEventListener('click', signOut);
+ $("acct-open-vault").href = VAULT_URL;
+ $("acct-signout").addEventListener("click", signOut);
}
// ── Init ──────────────────────────────────────────────────────────────────────
async function init() {
try {
- const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
- _currentUrl = tab?.url || '';
- } catch { }
+ const [tab] = await chrome.tabs.query({
+ active: true,
+ currentWindow: true,
+ });
+ _currentUrl = tab?.url || "";
+ } catch {}
// Set vault link
- $('btn-open-vault').href = VAULT_URL;
+ $("btn-open-vault").href = VAULT_URL;
const sessionState = await restoreSessionIfAvailable();
- if (sessionState === 'vault') {
+ if (sessionState === "vault") {
// Check whether the content script requested a specific view (e.g. generator).
- const { popup_nav } = await chrome.storage.session.get('popup_nav');
+ const { popup_nav } = await chrome.storage.session.get("popup_nav");
if (popup_nav) {
- await chrome.storage.session.remove('popup_nav');
- if (popup_nav === 'generator') {
- showView('generator');
+ await chrome.storage.session.remove("popup_nav");
+ if (popup_nav === "generator") {
+ showView("generator");
initGenerator();
// Still load vault data in background so the Vault tab is ready.
- fetchAndDecryptVault().then(() => { });
+ fetchAndDecryptVault().then(() => {});
// Wire event listeners below, then return early from vault-specific setup.
} else {
- showView('vault');
+ showView("vault");
await checkPendingSave();
if (_items.length) {
renderList();
@@ -1153,7 +1411,7 @@ async function init() {
}
}
} else {
- showView('vault');
+ showView("vault");
await checkPendingSave();
if (_items.length) {
renderList();
@@ -1163,46 +1421,70 @@ async function init() {
renderList();
}
}
- } else if (sessionState === 'unlock') {
- showView('unlock');
- $('unlock-password').focus();
+ } else if (sessionState === "unlock") {
+ showView("unlock");
+ $("unlock-password").focus();
} else {
- showView('login');
+ 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(); });
+ $("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(); });
+ $("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);
+ $("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', () => { showView('add'); initAddView(); });
- $('nav-vault').addEventListener('click', () => { showView('vault'); });
- $('nav-generator').addEventListener('click', () => { showView('generator'); initGenerator(); });
- $('nav-alerts').addEventListener('click', () => { chrome.tabs.create({ url: ALERTS_URL }); });
- $('nav-account').addEventListener('click', () => { showView('account'); initAccountView(); });
+ $("btn-add-item").addEventListener("click", () => {
+ showView("add");
+ initAddView();
+ });
+ $("nav-vault").addEventListener("click", () => {
+ showView("vault");
+ });
+ $("nav-generator").addEventListener("click", () => {
+ showView("generator");
+ initGenerator();
+ });
+ $("nav-alerts").addEventListener("click", () => {
+ chrome.tabs.create({ url: ALERTS_URL });
+ });
+ $("nav-account").addEventListener("click", () => {
+ showView("account");
+ initAccountView();
+ });
// 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(() => { });
+ chrome.runtime.sendMessage({ type: "KEEPALIVE" }).catch(() => {});
}, 20_000);
// Search
- $('vault-search').addEventListener('input', () => renderList());
+ $("vault-search").addEventListener("input", () => renderList());
// Tabs
initTabs();
}
-document.addEventListener('DOMContentLoaded', init);
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", init);