nngo/PassKeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

04/19 Update extension: password generator in-place

Browse Source
This commit is contained in:
nngo
2026-04-19 18:38:08 -04:00
parent 66e0129994
commit fe270b133a
5 changed files with 1649 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/content/content.js
+212 -149
View File
@@ -8,33 +8,37 @@
* 4. Watches form submissions → shows save-credentials banner.
*/
(() => {
'use strict';
"use strict";
const PK_ATTR = 'data-pk-decorated';
const PK_BTN_CLASS = '__pk_autofill_btn__';
const PK_ATTR = "data-pk-decorated";
const PK_BTN_CLASS = "__pk_autofill_btn__";
let _bannerEl = null;
let _bannerEl = null;
let _hasNotifiedForm = false;
let _formObserver = null;
let _formObserver = null;
// ── Helpers ──────────────────────────────────────────────────────────────────
function escHtml(str) {
return String(str ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
return String(str ?? "")
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
}
function visiblePasswordFields() {
return Array.from(document.querySelectorAll('input[type="password"]'))
.filter(el => el.offsetParent !== null && !el.disabled);
return Array.from(
document.querySelectorAll('input[type="password"]'),
).filter((el) => el.offsetParent !== null && !el.disabled);
}
function findUsernameField(pwField) {
const all = Array.from(document.querySelectorAll('input'));
const all = Array.from(document.querySelectorAll("input"));
const idx = all.indexOf(pwField);
for (let i = idx - 1; i >= 0; i--) {
const el = all[i];
if (!el.offsetParent || el.disabled) continue;
if (['email', 'text', 'tel'].includes(el.type)) return el;
if (["email", "text", "tel"].includes(el.type)) return el;
}
return null;
}
@@ -42,24 +46,29 @@
// ── Framework-compatible fill ─────────────────────────────────────────────────
function fillField(el, value) {
const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
const setter = Object.getOwnPropertyDescriptor(
HTMLInputElement.prototype,
"value",
)?.set;
if (setter) setter.call(el, value);
else el.value = value;
el.dispatchEvent(new Event('input', { bubbles: true }));
el.dispatchEvent(new Event('change', { bubbles: true }));
el.dispatchEvent(new Event("input", { bubbles: true }));
el.dispatchEvent(new Event("change", { bubbles: true }));
}
function doAutofill(username, password) {
const pwFields = visiblePasswordFields();
if (!pwFields.length) return;
const pwField = pwFields[0];
const pwField = pwFields[0];
const usernameField = findUsernameField(pwField);
if (usernameField && username) fillField(usernameField, username);
if (password) fillField(pwField, password);
[usernameField, pwField].filter(Boolean).forEach(el => {
el.style.outline = '2px solid #1a73e8';
setTimeout(() => { el.style.outline = ''; }, 1500);
[usernameField, pwField].filter(Boolean).forEach((el) => {
el.style.outline = "2px solid #1a73e8";
setTimeout(() => {
el.style.outline = "";
}, 1500);
});
}
@@ -70,39 +79,39 @@
* password field. Clicking it opens a tiny dropdown listing matching items.
*/
function injectAutofillButtons(matchingItems) {
visiblePasswordFields().forEach(pwField => {
visiblePasswordFields().forEach((pwField) => {
if (pwField.getAttribute(PK_ATTR)) return; // already decorated
pwField.setAttribute(PK_ATTR, '1');
pwField.setAttribute(PK_ATTR, "1");
// Wrap the field if it isn't already positioned
const wrap = document.createElement('div');
wrap.style.cssText = 'position:relative;display:inline-block;width:100%;';
const wrap = document.createElement("div");
wrap.style.cssText = "position:relative;display:inline-block;width:100%;";
pwField.parentNode.insertBefore(wrap, pwField);
wrap.appendChild(pwField);
// Add right-side padding so text doesn't overlap the button
pwField.style.paddingRight = '32px';
pwField.style.paddingRight = "32px";
// The icon button
const btn = document.createElement('button');
btn.type = 'button';
const btn = document.createElement("button");
btn.type = "button";
btn.className = PK_BTN_CLASS;
btn.title = 'Autofill with PassKeeper';
btn.setAttribute('aria-label', 'Autofill with PassKeeper');
btn.title = "Autofill with PassKeeper";
btn.setAttribute("aria-label", "Autofill with PassKeeper");
btn.style.cssText = [
'position:absolute',
'right:6px',
'top:50%',
'transform:translateY(-50%)',
'background:none',
'border:none',
'cursor:pointer',
'padding:3px',
'display:flex',
'align-items:center',
'justify-content:center',
'z-index:2147483646',
].join(';');
"position:absolute",
"right:6px",
"top:50%",
"transform:translateY(-50%)",
"background:none",
"border:none",
"cursor:pointer",
"padding:3px",
"display:flex",
"align-items:center",
"justify-content:center",
"z-index:2147483646",
].join(";");
btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="9" width="18" height="12" rx="2" stroke="#1a73e8" stroke-width="1.8"/>
@@ -112,7 +121,7 @@
wrap.appendChild(btn);
btn.addEventListener('click', e => {
btn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
toggleDropdown(btn, pwField, matchingItems);
@@ -123,62 +132,73 @@
// Dropdown showing matching credentials
function toggleDropdown(btn, pwField, items) {
// Remove any existing dropdown
const existing = document.getElementById('__pk_dropdown__');
if (existing) { existing.remove(); return; }
const existing = document.getElementById("__pk_dropdown__");
if (existing) {
existing.remove();
return;
}
const usernameField = findUsernameField(pwField);
const dropdown = document.createElement('div');
dropdown.id = '__pk_dropdown__';
const dropdown = document.createElement("div");
dropdown.id = "__pk_dropdown__";
dropdown.style.cssText = [
'position:fixed',
'background:#fff',
'border:1px solid #e2e8f0',
'border-radius:10px',
'box-shadow:0 8px 30px rgba(0,0,0,0.15)',
'z-index:2147483647',
'min-width:240px',
'max-width:300px',
"position:fixed",
"background:#fff",
"border:1px solid #e2e8f0",
"border-radius:10px",
"box-shadow:0 8px 30px rgba(0,0,0,0.15)",
"z-index:2147483647",
"min-width:240px",
"max-width:300px",
'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
'font-size:13px',
'overflow:hidden',
].join(';');
"font-size:13px",
"overflow:hidden",
].join(";");
// Position below the button
const rect = btn.getBoundingClientRect();
dropdown.style.top = (rect.bottom + 6) + 'px';
dropdown.style.left = Math.max(8, rect.right - 260) + 'px';
dropdown.style.top = rect.bottom + 6 + "px";
dropdown.style.left = Math.max(8, rect.right - 260) + "px";
// Header
const header = document.createElement('div');
header.style.cssText = 'padding:9px 12px 8px;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:6px;';
const header = document.createElement("div");
header.style.cssText =
"padding:9px 12px 8px;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:6px;";
header.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="9" width="18" height="12" rx="2" stroke="#1a73e8" stroke-width="2"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/></svg><span style="font-weight:600;color:#1a1a2e;font-size:12px;">PassKeeper</span>`;
dropdown.appendChild(header);
if (!items.length) {
const empty = document.createElement('div');
empty.style.cssText = 'padding:14px 12px;color:#9ca3af;font-size:12px;text-align:center;';
empty.textContent = 'No matching credentials';
const empty = document.createElement("div");
empty.style.cssText =
"padding:14px 12px;color:#9ca3af;font-size:12px;text-align:center;";
empty.textContent = "No matching credentials";
dropdown.appendChild(empty);
} else {
items.forEach(item => {
const row = document.createElement('div');
row.style.cssText = 'display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;transition:background 0.1s;';
row.onmouseenter = () => { row.style.background = '#f9fafb'; };
row.onmouseleave = () => { row.style.background = ''; };
items.forEach((item) => {
const row = document.createElement("div");
row.style.cssText =
"display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;transition:background 0.1s;";
row.onmouseenter = () => {
row.style.background = "#f9fafb";
};
row.onmouseleave = () => {
row.style.background = "";
};
const username = escHtml(item.plain?.username || '');
const name = escHtml(item.name);
const username = escHtml(item.plain?.username || "");
const name = escHtml(item.name);
row.innerHTML = `
<div style="width:30px;height:30px;border-radius:7px;background:#1e2d5a;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;">🔑</div>
<div style="flex:1;min-width:0;">
<div style="font-weight:600;color:#111827;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${name}</div>
${username ? `<div style="font-size:11px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${username}</div>` : ''}
${username ? `<div style="font-size:11px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${username}</div>` : ""}
</div>`;
row.addEventListener('click', () => {
if (usernameField && item.plain?.username) fillField(usernameField, item.plain.username);
row.addEventListener("click", () => {
if (usernameField && item.plain?.username)
fillField(usernameField, item.plain.username);
if (item.plain?.password) fillField(pwField, item.plain.password);
dropdown.remove();
});
@@ -190,13 +210,13 @@
document.body.appendChild(dropdown);
// Close on outside click
const close = e => {
const close = (e) => {
if (!dropdown.contains(e.target) && e.target !== btn) {
dropdown.remove();
document.removeEventListener('click', close, true);
document.removeEventListener("click", close, true);
}
};
setTimeout(() => document.addEventListener('click', close, true), 0);
setTimeout(() => document.addEventListener("click", close, true), 0);
}
// ── Form detection ────────────────────────────────────────────────────────────
@@ -205,23 +225,27 @@
if (_hasNotifiedForm) return;
if (!visiblePasswordFields().length) return;
_hasNotifiedForm = true;
chrome.runtime.sendMessage({ type: 'FORMS_DETECTED' }).catch(() => {});
chrome.runtime.sendMessage({ type: "FORMS_DETECTED" }).catch(() => {});
}
async function decorateFields() {
if (!visiblePasswordFields().length) return;
// Get cached vault items from session storage
const { vault_items } = await chrome.storage.session.get('vault_items').catch(() => ({}));
const { vault_items } = await chrome.storage.session
.get("vault_items")
.catch(() => ({}));
if (!vault_items?.length) return;
const host = location.hostname.replace(/^www\./, '');
const matching = vault_items.filter(item => {
if (item.item_type !== 'password' || !item.plain?.url) return false;
const host = location.hostname.replace(/^www\./, "");
const matching = vault_items.filter((item) => {
if (item.item_type !== "password" || !item.plain?.url) return false;
try {
const h = new URL(item.plain.url).hostname.replace(/^www\./, '');
const h = new URL(item.plain.url).hostname.replace(/^www\./, "");
return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
} catch { return false; }
} catch {
return false;
}
});
injectAutofillButtons(matching);
@@ -241,33 +265,36 @@
async function classifyCredentials(username, password) {
let vault_items;
try {
({ vault_items } = await chrome.storage.session.get('vault_items'));
({ vault_items } = await chrome.storage.session.get("vault_items"));
} catch {
// If we can't read storage (e.g. extension context invalidated), show banner.
return 'new';
return "new";
}
if (!vault_items?.length) return 'new';
if (!vault_items?.length) return "new";
const host = location.hostname.replace(/^www\./, '');
const host = location.hostname.replace(/^www\./, "");
const siteItems = vault_items.filter(item => {
if (item.item_type !== 'password' || !item.plain?.url) return false;
const siteItems = vault_items.filter((item) => {
if (item.item_type !== "password" || !item.plain?.url) return false;
try {
const h = new URL(item.plain.url).hostname.replace(/^www\./, '');
const h = new URL(item.plain.url).hostname.replace(/^www\./, "");
return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
} catch { return false; }
} catch {
return false;
}
});
if (!siteItems.length) return 'new';
if (!siteItems.length) return "new";
// Check for exact match (same username AND same password).
const exactMatch = siteItems.some(
item => item.plain?.username === username && item.plain?.password === password
(item) =>
item.plain?.username === username && item.plain?.password === password,
);
if (exactMatch) return 'same';
if (exactMatch) return "same";
// Credentials differ → treat as updated.
return 'updated';
return "updated";
}
// ── Auto-save banner ──────────────────────────────────────────────────────────
@@ -283,30 +310,32 @@
function showSaveBanner(username, password, credentialState) {
if (_bannerEl) _bannerEl.remove();
const banner = document.createElement('div');
banner.id = '__pk_save_banner__';
const banner = document.createElement("div");
banner.id = "__pk_save_banner__";
Object.assign(banner.style, {
position: 'fixed',
top: '12px',
right: '12px',
zIndex: '2147483647',
background: '#ffffff',
border: '1px solid #e2e8f0',
borderRadius: '10px',
boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
padding: '14px 16px 12px',
fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
fontSize: '13px',
color: '#1a1a2e',
maxWidth: '300px',
minWidth: '240px',
position: "fixed",
top: "12px",
right: "12px",
zIndex: "2147483647",
background: "#ffffff",
border: "1px solid #e2e8f0",
borderRadius: "10px",
boxShadow: "0 8px 30px rgba(0,0,0,0.15)",
padding: "14px 16px 12px",
fontFamily:
"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
fontSize: "13px",
color: "#1a1a2e",
maxWidth: "300px",
minWidth: "240px",
});
const site = escHtml(location.hostname);
const user = escHtml(username);
const title = credentialState === 'updated'
? 'Update in PassKeeper?'
: 'Save to PassKeeper?';
const site = escHtml(location.hostname);
const user = escHtml(username);
const title =
credentialState === "updated"
? "Update in PassKeeper?"
: "Save to PassKeeper?";
banner.innerHTML = `
<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
@@ -326,15 +355,30 @@
_bannerEl = banner;
// No setTimeout — banner stays until the user makes an explicit choice.
const dismiss = () => { if (_bannerEl === banner) { banner.remove(); _bannerEl = null; } };
banner.querySelector('#__pk_close__').addEventListener('click', dismiss);
banner.querySelector('#__pk_skip__').addEventListener('click', dismiss);
banner.querySelector('#__pk_save__').addEventListener('click', () => {
console.log('[PassKeeper] User chose to save credentials for', location.hostname);
chrome.runtime.sendMessage({
type: 'SAVE_CREDENTIALS',
data: { url: location.href, siteName: document.title || location.hostname, username, password },
}).catch(() => {});
const dismiss = () => {
if (_bannerEl === banner) {
banner.remove();
_bannerEl = null;
}
};
banner.querySelector("#__pk_close__").addEventListener("click", dismiss);
banner.querySelector("#__pk_skip__").addEventListener("click", dismiss);
banner.querySelector("#__pk_save__").addEventListener("click", () => {
console.log(
"[PassKeeper] User chose to save credentials for",
location.hostname,
);
chrome.runtime
.sendMessage({
type: "SAVE_CREDENTIALS",
data: {
url: location.href,
siteName: document.title || location.hostname,
username,
password,
},
})
.catch(() => {});
dismiss();
});
}
@@ -342,44 +386,63 @@
// ── Form submission watch ─────────────────────────────────────────────────────
function watchSubmissions() {
document.addEventListener('submit', async e => {
const form = e.target;
const pwField = form.querySelector('input[type="password"]:not([disabled])');
if (!pwField?.value) return;
document.addEventListener(
"submit",
async (e) => {
const form = e.target;
const pwField = form.querySelector(
'input[type="password"]:not([disabled])',
);
if (!pwField?.value) return;
const userField = findUsernameField(pwField)
?? form.querySelector('input[type="email"]:not([disabled])')
?? form.querySelector('input[type="text"]:not([disabled])');
const userField =
findUsernameField(pwField) ??
form.querySelector('input[type="email"]:not([disabled])') ??
form.querySelector('input[type="text"]:not([disabled])');
const username = userField?.value?.trim() || '';
const password = pwField.value;
const username = userField?.value?.trim() || "";
const password = pwField.value;
if (!username || !password) return;
if (!username || !password) return;
// Run duplicate check before showing the banner.
const credentialState = await classifyCredentials(username, password);
console.log('[PassKeeper] Credential state for', location.hostname, '→', credentialState);
// Run duplicate check before showing the banner.
const credentialState = await classifyCredentials(username, password);
console.log(
"[PassKeeper] Credential state for",
location.hostname,
"→",
credentialState,
);
if (credentialState === 'same') {
// Credentials unchanged — silently skip.
return;
}
if (credentialState === "same") {
// Credentials unchanged — silently skip.
return;
}
setTimeout(() => showSaveBanner(username, password, credentialState), 500);
}, true);
setTimeout(
() => showSaveBanner(username, password, credentialState),
500,
);
},
true,
);
}
// ── Message listener ──────────────────────────────────────────────────────────
chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
if (msg.type === 'DO_AUTOFILL') {
if (msg.type === "DO_AUTOFILL") {
doAutofill(msg.username, msg.password);
sendResponse({ ok: true });
}
if (msg.type === 'VAULT_UPDATED') {
if (msg.type === "VAULT_UPDATED") {
// Re-decorate fields with fresh data
document.querySelectorAll(`[${PK_ATTR}]`).forEach(el => el.removeAttribute(PK_ATTR));
document.querySelectorAll(`.${PK_BTN_CLASS}`).forEach(el => el.remove());
document
.querySelectorAll(`[${PK_ATTR}]`)
.forEach((el) => el.removeAttribute(PK_ATTR));
document
.querySelectorAll(`.${PK_BTN_CLASS}`)
.forEach((el) => el.remove());
decorateFields();
}
return false;
@@ -400,8 +463,8 @@
_formObserver.observe(document.body, { childList: true, subtree: true });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}