${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();
});
});
}
// ── Save-prompt modal ─────────────────────────────────────────────────────────
/**
* Show the save-prompt overlay. It is a blocking modal — no backdrop click,
* no ✕ button — so the user MUST click "Save" or "Not now".
* Called every time the popup opens while a pending_save is stored.
*/
async function checkPendingSave() {
const { pending_save } = await chrome.storage.session.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?";
// Show the overlay.
$("save-prompt-overlay").classList.remove("hidden");
$("save-name").focus();
// Wire buttons — use onclick so re-running checkPendingSave never double-binds.
$("btn-save-yes").onclick = async () => {
$("save-prompt-overlay").classList.add("hidden");
console.log(
"[PassKeeper] User saved credential for",
pending_save.siteName,
);
await saveCredential(pending_save);
await chrome.storage.session.remove("pending_save");
};
$("btn-save-no").onclick = async () => {
$("save-prompt-overlay").classList.add("hidden");
console.log(
"[PassKeeper] User dismissed save prompt for",
pending_save.siteName,
);
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);
}
}
// ── Password Generator ────────────────────────────────────────────────────────
const GEN_SETS = {
lower: "abcdefghijklmnopqrstuvwxyz",
upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
numbers: "0123456789",
symbols: "!@#$%^&*()-_=+[]{}|;:,.<>?",
};
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 "";
// Guarantee at least one character from each selected charset.
const required = [];
if (useLower)
required.push(
GEN_SETS.lower[Math.floor(Math.random() * GEN_SETS.lower.length)],
);
if (useUpper)
required.push(
GEN_SETS.upper[Math.floor(Math.random() * GEN_SETS.upper.length)],
);
if (useNumbers)
required.push(
GEN_SETS.numbers[Math.floor(Math.random() * GEN_SETS.numbers.length)],
);
if (useSymbols)
required.push(
GEN_SETS.symbols[Math.floor(Math.random() * GEN_SETS.symbols.length)],
);
const arr = new Uint32Array(length);
crypto.getRandomValues(arr);
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;
});
// Fisher-Yates shuffle for uniform distribution.
for (let i = combined.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[combined[i], combined[j]] = [combined[j], combined[i]];
}
return combined.slice(0, length).join("");
}
function passwordStrength(pw) {
if (!pw) return { label: "", color: "" };
let score = 0;
if (pw.length >= 8) score++;
if (pw.length >= 12) score++;
if (pw.length >= 16) score++;
if (/[a-z]/.test(pw)) score++;
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" };
}
let _genInitialised = false;
function initGenerator() {
// Only bind events once — subsequent calls just re-generate a password.
if (!_genInitialised) {
_genInitialised = true;
const slider = $("gen-length");
const numInput = $("gen-length-num");
// Keep slider and number input in sync.
slider.addEventListener("input", () => {
numInput.value = slider.value;
refreshGen();
});
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);
});
$("btn-gen-refresh").addEventListener("click", refreshGen);
$("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);
});
});
}
// Always generate a fresh password when the view opens.
refreshGen();
}
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;
// Require at least one charset.
if (!useLower && !useUpper && !useNumbers && !useSymbols) {
$("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 { label, color } = passwordStrength(pw);
const strengthEl = $("gen-strength-label");
strengthEl.textContent = label;
strengthEl.style.color = color;
}
// ── 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-vault").addEventListener("click", () => {
showView("vault");
});
$("nav-generator").addEventListener("click", () => {
showView("generator");
initGenerator();
});
$("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);