1287 lines
46 KiB
JavaScript
1287 lines
46 KiB
JavaScript
/**
|
|
* extension/content/content.js — PassKeeper content script.
|
|
*
|
|
* 1. Detects login forms → notifies background (badge count).
|
|
* 2. Injects a PassKeeper icon button OUTSIDE the DOM (position:fixed, tracked
|
|
* to the field via scroll/resize) into username AND password fields.
|
|
* This avoids breaking site layouts (flex/grid parents, React-controlled inputs).
|
|
* 3. Clicking the icon OR focusing a decorated field shows a suggestion dropdown.
|
|
* 4. "More options…" shows a second panel with vault/generator actions.
|
|
* 5. Listens for DO_AUTOFILL from the popup → fills fields.
|
|
* 6. Watches form submissions → shows save-credentials banner.
|
|
*/
|
|
(() => {
|
|
"use strict";
|
|
|
|
const PK_ATTR = "data-pk-decorated";
|
|
const PK_BTN_CLASS = "__pk_btn__";
|
|
const PK_DROPDOWN_ID = "__pk_dropdown__";
|
|
const VAULT_URL = "https://pwkeeper.ngodanguyen.tech/vault";
|
|
|
|
// Never inject on the PassKeeper vault itself — our own inputs would get decorated.
|
|
const OWN_ORIGINS = ["pwkeeper.ngodanguyen.tech"];
|
|
if (OWN_ORIGINS.includes(location.hostname)) return;
|
|
|
|
let _bannerEl = null;
|
|
let _hasNotifiedForm = false;
|
|
let _formObserver = null;
|
|
let _matchingItems = [];
|
|
// Map from field element → its fixed-position icon button element
|
|
const _fieldBtnMap = new WeakMap();
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
function escHtml(str) {
|
|
return String(str ?? "")
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">");
|
|
}
|
|
|
|
/**
|
|
* More robust visibility check than offsetParent (which fails for
|
|
* position:fixed elements and some modern layouts).
|
|
*/
|
|
function isVisible(el) {
|
|
if (!el || !el.getBoundingClientRect) return false;
|
|
if (el.disabled) return false;
|
|
const rect = el.getBoundingClientRect();
|
|
if (rect.width === 0 && rect.height === 0) return false;
|
|
const style = window.getComputedStyle(el);
|
|
if (
|
|
style.display === "none" ||
|
|
style.visibility === "hidden" ||
|
|
style.opacity === "0"
|
|
)
|
|
return false;
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Returns a debounced version of `fn` that waits `ms` milliseconds after
|
|
* the last call before firing. Used to avoid re-rendering the dropdown on
|
|
* every keystroke.
|
|
*/
|
|
function _debounce(fn, ms) {
|
|
var timer;
|
|
return function () {
|
|
var args = arguments;
|
|
var ctx = this;
|
|
clearTimeout(timer);
|
|
timer = setTimeout(function () {
|
|
fn.apply(ctx, args);
|
|
}, ms);
|
|
};
|
|
}
|
|
|
|
function visiblePasswordFields() {
|
|
return Array.from(
|
|
document.querySelectorAll('input[type="password"]'),
|
|
).filter((el) => isVisible(el) && !el.disabled);
|
|
}
|
|
|
|
/**
|
|
* Returns true only if the input field carries signals suggesting it
|
|
* collects a credential (username / email / phone) — not a generic
|
|
* text field such as a search box, full-name field, or address field.
|
|
*
|
|
* Scoring precedence:
|
|
* 1. autocomplete="username"|"email"|"tel" → definite YES
|
|
* 2. Non-credential autocomplete value → definite NO
|
|
* 3. name / id / placeholder / aria-label contain a credential keyword → YES
|
|
* 4. Otherwise → NO (do not decorate)
|
|
*/
|
|
function _isLikelyUsernameField(el) {
|
|
const CRED_HINTS = /user|email|mail|login|phone|tel|mobile|account/i;
|
|
const ac = (el.getAttribute("autocomplete") || "").toLowerCase().trim();
|
|
|
|
// Strongest positive signal.
|
|
if (["username", "email", "tel"].includes(ac)) return true;
|
|
|
|
// Definite negative signals (Chrome's autocomplete token set).
|
|
const NON_CRED_AC =
|
|
/^(name|given-name|family-name|additional-name|honorific-prefix|honorific-suffix|organization|street-address|address-line[123]|address-level[1234]|country|country-name|postal-code|cc-|transaction-|language|bday|sex|url|photo|search|new-password|current-password|one-time-code|off)$/i;
|
|
if (ac && NON_CRED_AC.test(ac)) return false;
|
|
|
|
// Check name, id, placeholder, and aria-label for credential keywords.
|
|
const attrs = [
|
|
el.getAttribute("name") || "",
|
|
el.getAttribute("id") || "",
|
|
el.getAttribute("placeholder") || "",
|
|
el.getAttribute("aria-label") || "",
|
|
].join(" ");
|
|
|
|
if (!CRED_HINTS.test(attrs)) return false;
|
|
|
|
// Final gate: require a password field to be nearby (same form, or within
|
|
// 5 ancestor levels) — this prevents hooking standalone search / filter
|
|
// inputs that happen to carry a name like "user" or "email".
|
|
return _hasPasswordSibling(el);
|
|
}
|
|
|
|
/**
|
|
* Returns true when `el` shares a form (or close ancestor) with at least one
|
|
* visible password input. This is the key signal that we are on a login form,
|
|
* not a generic site-search or profile page.
|
|
*/
|
|
function _hasPasswordSibling(el) {
|
|
// 1. Prefer the explicit <form> ancestor.
|
|
const form =
|
|
el.closest("form") || el.closest('[role="form"]');
|
|
if (form) {
|
|
return !!form.querySelector(
|
|
'input[type="password"]:not([disabled])',
|
|
);
|
|
}
|
|
// 2. No <form>? Walk up to 5 ancestor elements looking for a password input
|
|
// in any subtree (covers React/Vue apps that render outside <form>).
|
|
let node = el.parentElement;
|
|
for (let i = 0; i < 5 && node; i++, node = node.parentElement) {
|
|
if (node.querySelector('input[type="password"]:not([disabled])')) {
|
|
return true;
|
|
}
|
|
}
|
|
// 3. Last resort: any visible password field on the entire page.
|
|
// Only accept this if there is exactly one password field — avoids
|
|
// false-positives on complex pages (account settings, checkout, etc.).
|
|
const pwFields = visiblePasswordFields();
|
|
return pwFields.length === 1;
|
|
}
|
|
|
|
function findUsernameField(pwField) {
|
|
// Helper: accept email/tel inputs unconditionally; text inputs only when
|
|
// they look like a genuine credential field.
|
|
function isCredentialType(el) {
|
|
if (el.type === "email" || el.type === "tel") return true;
|
|
if (el.type === "text") return _isLikelyUsernameField(el);
|
|
return false;
|
|
}
|
|
|
|
// 1. Walk backwards through all inputs in DOM order.
|
|
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 (!isVisible(el) || el.disabled) continue;
|
|
if (isCredentialType(el)) return el;
|
|
}
|
|
|
|
// 2. Fallback: search within the same form / ancestor container.
|
|
// Prefer email inputs first, then scored text/tel inputs.
|
|
const container =
|
|
pwField.closest("form") ||
|
|
pwField.closest('[role="form"]') ||
|
|
pwField.parentElement;
|
|
if (container) {
|
|
const emailCandidate = container.querySelector(
|
|
'input[type="email"]:not([disabled])',
|
|
);
|
|
if (emailCandidate && isVisible(emailCandidate)) return emailCandidate;
|
|
|
|
const textTelInputs = Array.from(
|
|
container.querySelectorAll(
|
|
'input[type="text"]:not([disabled]), input[type="tel"]:not([disabled])',
|
|
),
|
|
);
|
|
const scored = textTelInputs.filter(
|
|
(el) => isVisible(el) && _isLikelyUsernameField(el),
|
|
);
|
|
if (scored.length) return scored[0];
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
// ── Framework-compatible fill ─────────────────────────────────────────────────
|
|
|
|
function fillField(el, value) {
|
|
const nativeSet = Object.getOwnPropertyDescriptor(
|
|
HTMLInputElement.prototype,
|
|
"value",
|
|
)?.set;
|
|
if (nativeSet) nativeSet.call(el, value);
|
|
else el.value = value;
|
|
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
el.dispatchEvent(new Event("change", { bubbles: true }));
|
|
}
|
|
|
|
function doAutofill(username, password, autologin) {
|
|
const pwFields = visiblePasswordFields();
|
|
if (!pwFields.length) return;
|
|
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 #c0392b";
|
|
setTimeout(() => {
|
|
el.style.outline = "";
|
|
}, 1500);
|
|
});
|
|
// Autologin: submit the form automatically after filling.
|
|
if (autologin) {
|
|
const form = pwField.closest("form");
|
|
if (form) {
|
|
setTimeout(function () {
|
|
// Prefer clicking a visible submit button so site-specific submit
|
|
// handlers (React, Vue, etc.) fire correctly.
|
|
var submitBtn = form.querySelector(
|
|
'[type="submit"]:not([disabled])',
|
|
);
|
|
if (submitBtn) {
|
|
submitBtn.click();
|
|
} else {
|
|
form.submit();
|
|
}
|
|
}, 400);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Icon button (fixed-position, outside the DOM tree of the field) ───────────
|
|
|
|
/**
|
|
* Position the icon button over the right edge of `field` using fixed coords.
|
|
* This never touches the field's parent, so it can't break any layout.
|
|
*/
|
|
function positionBtn(btn, field) {
|
|
const rect = field.getBoundingClientRect();
|
|
if (rect.width === 0) {
|
|
btn.style.display = "none";
|
|
return;
|
|
}
|
|
btn.style.display = "flex";
|
|
btn.style.top = rect.top + rect.height / 2 - 13 + "px";
|
|
btn.style.left = rect.right - 30 + "px";
|
|
}
|
|
|
|
// createIconBtn is defined in the Field decoration section below.
|
|
|
|
// ── Suggestion dropdown ───────────────────────────────────────────────────────
|
|
|
|
function removeDropdown() {
|
|
const el = document.getElementById(PK_DROPDOWN_ID);
|
|
if (el) el.remove();
|
|
}
|
|
|
|
/**
|
|
* Build the dropdown anchored below `anchorField`.
|
|
* Uses _matchingItems which is kept fresh via storage.onChanged listener.
|
|
* `panel` is either 'credentials' (main list) or 'more' (options menu).
|
|
*/
|
|
async function showDropdown(anchorField, pwField, filterText, panel) {
|
|
removeDropdown();
|
|
|
|
// Use module-level _matchingItems (kept fresh by storage.onChanged).
|
|
// If still empty, try a direct storage read as last resort.
|
|
var freshItems = _matchingItems;
|
|
if (!freshItems.length) {
|
|
try {
|
|
var result = await chrome.storage.session.get("vault_items_cs");
|
|
var all = (result && result.vault_items_cs) || [];
|
|
freshItems = _filterForHost(all);
|
|
if (freshItems.length) _matchingItems = freshItems;
|
|
} catch (e) {}
|
|
}
|
|
|
|
const rect = anchorField.getBoundingClientRect();
|
|
const dropWidth = Math.max(260, rect.width);
|
|
|
|
const dropdown = document.createElement("div");
|
|
dropdown.id = PK_DROPDOWN_ID;
|
|
Object.assign(dropdown.style, {
|
|
position: "fixed",
|
|
top: rect.bottom + 4 + "px",
|
|
left: rect.left + "px",
|
|
width: dropWidth + "px",
|
|
background: "#fff",
|
|
border: "1px solid #dadce0",
|
|
borderRadius: "10px",
|
|
boxShadow: "0 6px 24px rgba(0,0,0,0.18)",
|
|
zIndex: "2147483647",
|
|
fontFamily:
|
|
"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
|
|
fontSize: "13px",
|
|
overflow: "hidden",
|
|
});
|
|
|
|
if (panel === "more") {
|
|
buildMorePanel(dropdown, anchorField, pwField, freshItems, filterText);
|
|
} else {
|
|
buildCredentialsPanel(
|
|
dropdown,
|
|
anchorField,
|
|
pwField,
|
|
freshItems,
|
|
filterText,
|
|
);
|
|
}
|
|
|
|
document.body.appendChild(dropdown);
|
|
|
|
// Reposition on scroll/resize so it stays under the field.
|
|
function reposition() {
|
|
const r = anchorField.getBoundingClientRect();
|
|
dropdown.style.top = r.bottom + 4 + "px";
|
|
dropdown.style.left = r.left + "px";
|
|
}
|
|
window.addEventListener("scroll", reposition, {
|
|
passive: true,
|
|
capture: true,
|
|
});
|
|
window.addEventListener("resize", reposition, { passive: true });
|
|
|
|
// Close on outside mousedown or keyboard navigation.
|
|
function onOutside(e) {
|
|
const btn = _fieldBtnMap.get(anchorField);
|
|
if (
|
|
dropdown.contains(e.target) ||
|
|
e.target === anchorField ||
|
|
(btn && btn.contains(e.target))
|
|
)
|
|
return;
|
|
removeDropdown();
|
|
document.removeEventListener("mousedown", onOutside, true);
|
|
document.removeEventListener("keydown", onKeydown, true);
|
|
}
|
|
|
|
// Keyboard navigation: Arrow keys move focus between rows; Enter selects; Escape closes.
|
|
function onKeydown(e) {
|
|
if (e.key === "Escape") {
|
|
removeDropdown();
|
|
document.removeEventListener("mousedown", onOutside, true);
|
|
document.removeEventListener("keydown", onKeydown, true);
|
|
return;
|
|
}
|
|
if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Enter")
|
|
return;
|
|
|
|
// Only navigate credential rows (divs with data-pk-row attribute).
|
|
var rows = Array.from(dropdown.querySelectorAll("[data-pk-row]"));
|
|
if (!rows.length) return;
|
|
|
|
e.preventDefault(); // prevent the field from scrolling the page
|
|
|
|
if (e.key === "Enter") {
|
|
var focused = dropdown.querySelector("[data-pk-row].pk-row-focused");
|
|
if (focused && focused._pkFill) focused._pkFill();
|
|
return;
|
|
}
|
|
|
|
var currentIdx = rows.findIndex(function (r) {
|
|
return r.classList.contains("pk-row-focused");
|
|
});
|
|
var nextIdx;
|
|
if (e.key === "ArrowDown") {
|
|
nextIdx = currentIdx < rows.length - 1 ? currentIdx + 1 : 0;
|
|
} else {
|
|
nextIdx = currentIdx > 0 ? currentIdx - 1 : rows.length - 1;
|
|
}
|
|
|
|
rows.forEach(function (r) {
|
|
r.classList.remove("pk-row-focused");
|
|
r.style.background = "";
|
|
});
|
|
rows[nextIdx].classList.add("pk-row-focused");
|
|
rows[nextIdx].style.background = "#e8f0fe";
|
|
rows[nextIdx].scrollIntoView({ block: "nearest" });
|
|
}
|
|
|
|
setTimeout(function () {
|
|
document.addEventListener("mousedown", onOutside, true);
|
|
document.addEventListener("keydown", onKeydown, true);
|
|
}, 0);
|
|
}
|
|
|
|
// ── Credentials panel (main list) ────────────────────────────────────────────
|
|
|
|
function buildCredentialsPanel(
|
|
dropdown,
|
|
anchorField,
|
|
pwField,
|
|
items,
|
|
filterText,
|
|
) {
|
|
const q = (filterText || "").trim().toLowerCase();
|
|
const filtered = q
|
|
? items.filter(function (item) {
|
|
return (
|
|
((item.plain && item.plain.username) || "")
|
|
.toLowerCase()
|
|
.includes(q) || item.name.toLowerCase().includes(q)
|
|
);
|
|
})
|
|
: items;
|
|
|
|
const usernameField =
|
|
anchorField.type === "password"
|
|
? findUsernameField(anchorField)
|
|
: anchorField;
|
|
|
|
if (filtered.length === 0) {
|
|
// No saved passwords — show a minimal "no items" row + More options.
|
|
const empty = document.createElement("div");
|
|
Object.assign(empty.style, {
|
|
padding: "12px 14px",
|
|
color: "#5f6368",
|
|
fontSize: "12px",
|
|
});
|
|
empty.textContent = q
|
|
? "No matches found."
|
|
: "No saved passwords for this site.";
|
|
dropdown.appendChild(empty);
|
|
} else {
|
|
filtered.forEach(function (item) {
|
|
const row = document.createElement("div");
|
|
row.setAttribute("data-pk-row", "1"); // enables keyboard navigation
|
|
Object.assign(row.style, {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "10px",
|
|
padding: "10px 14px",
|
|
cursor: "pointer",
|
|
transition: "background 0.1s",
|
|
});
|
|
row.onmouseenter = function () {
|
|
if (!row.classList.contains("pk-row-focused"))
|
|
row.style.background = "#f1f3f4";
|
|
};
|
|
row.onmouseleave = function () {
|
|
if (!row.classList.contains("pk-row-focused"))
|
|
row.style.background = "";
|
|
};
|
|
|
|
// Derive display hostname.
|
|
var siteHost = item.name;
|
|
if (item.plain && item.plain.url) {
|
|
try {
|
|
siteHost = new URL(item.plain.url).hostname.replace(/^www\./, "");
|
|
} catch (e) {}
|
|
}
|
|
|
|
var username = escHtml((item.plain && item.plain.username) || "");
|
|
var site = escHtml(siteHost);
|
|
|
|
// Lock icon avatar — filled dark circle like the screenshot.
|
|
var avatar = document.createElement("div");
|
|
Object.assign(avatar.style, {
|
|
width: "34px",
|
|
height: "34px",
|
|
borderRadius: "50%",
|
|
background: "#1a1a2e",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexShrink: "0",
|
|
});
|
|
avatar.innerHTML =
|
|
'<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
|
|
'<rect x="3" y="10" width="18" height="12" rx="2" fill="#fff"/>' +
|
|
'<path d="M8 10V7a4 4 0 018 0v3" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>' +
|
|
"</svg>";
|
|
|
|
// Text.
|
|
var text = document.createElement("div");
|
|
text.style.cssText = "flex:1;min-width:0;";
|
|
text.innerHTML =
|
|
'<div style="font-size:13px;color:#202124;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' +
|
|
site +
|
|
"</div>" +
|
|
(username
|
|
? '<div style="font-size:11px;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;">' +
|
|
username +
|
|
"</div>"
|
|
: "");
|
|
|
|
// Edit pencil.
|
|
var editBtn = document.createElement("button");
|
|
Object.assign(editBtn.style, {
|
|
background: "none",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
padding: "5px",
|
|
color: "#1a73e8",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexShrink: "0",
|
|
borderRadius: "4px",
|
|
});
|
|
editBtn.title = "Edit in PassKeeper";
|
|
editBtn.innerHTML =
|
|
'<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
|
|
'<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="#1a73e8" stroke-width="1.8" stroke-linecap="round"/>' +
|
|
'<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="#1a73e8" stroke-width="1.8" stroke-linejoin="round"/>' +
|
|
"</svg>";
|
|
editBtn.addEventListener("mousedown", function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
chrome.runtime
|
|
.sendMessage({ type: "OPEN_VAULT" })
|
|
.catch(function () {});
|
|
removeDropdown();
|
|
});
|
|
|
|
row.appendChild(avatar);
|
|
row.appendChild(text);
|
|
row.appendChild(editBtn);
|
|
|
|
// Shared fill action — used by both mousedown and keyboard Enter.
|
|
function doFill() {
|
|
if (usernameField && item.plain && item.plain.username)
|
|
fillField(usernameField, item.plain.username);
|
|
if (pwField && item.plain && item.plain.password)
|
|
fillField(pwField, item.plain.password);
|
|
|
|
// ✓ Filled flash: replace row content briefly before closing.
|
|
row.innerHTML =
|
|
'<div style="display:flex;align-items:center;gap:8px;color:#16a34a;font-size:13px;font-weight:600;padding:0 4px;">' +
|
|
'<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
|
|
'<path d="M5 13l4 4L19 7" stroke="#16a34a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>' +
|
|
"</svg>Filled</div>";
|
|
row.style.background = "#f0fdf4";
|
|
|
|
setTimeout(function () {
|
|
removeDropdown();
|
|
if (pwField && anchorField !== pwField) pwField.focus();
|
|
}, 600);
|
|
}
|
|
|
|
row.addEventListener("mousedown", function (e) {
|
|
if (e.target === editBtn || editBtn.contains(e.target)) return;
|
|
e.preventDefault();
|
|
doFill();
|
|
});
|
|
|
|
// Expose doFill for the keyboard Enter handler via a custom property.
|
|
row._pkFill = doFill;
|
|
|
|
dropdown.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// Divider + "More options…" footer — always shown.
|
|
var divider = document.createElement("div");
|
|
divider.style.cssText = "height:1px;background:#e8eaed;";
|
|
dropdown.appendChild(divider);
|
|
|
|
var more = document.createElement("div");
|
|
Object.assign(more.style, {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "10px",
|
|
padding: "10px 14px",
|
|
cursor: "pointer",
|
|
color: "#202124",
|
|
fontSize: "13px",
|
|
transition: "background 0.1s",
|
|
});
|
|
more.onmouseenter = function () {
|
|
more.style.background = "#f1f3f4";
|
|
};
|
|
more.onmouseleave = function () {
|
|
more.style.background = "";
|
|
};
|
|
more.innerHTML =
|
|
'<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
|
|
'<circle cx="5" cy="12" r="1.8" fill="#5f6368"/>' +
|
|
'<circle cx="12" cy="12" r="1.8" fill="#5f6368"/>' +
|
|
'<circle cx="19" cy="12" r="1.8" fill="#5f6368"/>' +
|
|
"</svg>" +
|
|
'<span style="flex:1;">More options\u2026</span>';
|
|
more.addEventListener("mousedown", function (e) {
|
|
e.preventDefault();
|
|
showDropdown(anchorField, pwField, filterText, "more");
|
|
});
|
|
dropdown.appendChild(more);
|
|
}
|
|
|
|
// ── More options panel ────────────────────────────────────────────────────────
|
|
|
|
function buildMorePanel(dropdown, anchorField, pwField, items, filterText) {
|
|
// Back header.
|
|
var backRow = document.createElement("div");
|
|
Object.assign(backRow.style, {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "6px",
|
|
padding: "10px 14px",
|
|
cursor: "pointer",
|
|
color: "#1a73e8",
|
|
fontSize: "13px",
|
|
fontWeight: "600",
|
|
borderBottom: "1px solid #e8eaed",
|
|
transition: "background 0.1s",
|
|
});
|
|
backRow.onmouseenter = function () {
|
|
backRow.style.background = "#f1f3f4";
|
|
};
|
|
backRow.onmouseleave = function () {
|
|
backRow.style.background = "";
|
|
};
|
|
backRow.innerHTML =
|
|
'<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
|
|
'<path d="M15 18l-6-6 6-6" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
|
|
"</svg> Back";
|
|
backRow.addEventListener("mousedown", function (e) {
|
|
e.preventDefault();
|
|
showDropdown(anchorField, pwField, filterText, "credentials");
|
|
});
|
|
dropdown.appendChild(backRow);
|
|
|
|
// Menu items matching the screenshot.
|
|
var menuItems = [
|
|
{
|
|
icon: '<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="#5f6368" stroke-width="1.8" fill="none"/><line x1="12" y1="9" x2="12" y2="13" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round"/><line x1="12" y1="17" x2="12.01" y2="17" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>',
|
|
label: "Report a problem",
|
|
action: function () {
|
|
chrome.runtime
|
|
.sendMessage({ type: "OPEN_VAULT" })
|
|
.catch(function () {});
|
|
removeDropdown();
|
|
},
|
|
},
|
|
{
|
|
icon: '<rect x="3" y="9" width="18" height="12" rx="2" stroke="#5f6368" stroke-width="1.8" fill="none"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round" fill="none"/><circle cx="12" cy="15" r="1.5" fill="#5f6368"/>',
|
|
label: "Generate a password",
|
|
chevron: true,
|
|
action: function () {
|
|
chrome.runtime
|
|
.sendMessage({ type: "OPEN_GENERATOR" })
|
|
.catch(function () {});
|
|
removeDropdown();
|
|
},
|
|
},
|
|
{
|
|
icon: '<rect x="2" y="3" width="20" height="14" rx="2" stroke="#5f6368" stroke-width="1.8" fill="none"/><path d="M8 21h8M12 17v4" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round"/>',
|
|
label: "Open my vault",
|
|
action: function () {
|
|
chrome.runtime
|
|
.sendMessage({ type: "OPEN_VAULT" })
|
|
.catch(function () {});
|
|
removeDropdown();
|
|
},
|
|
},
|
|
];
|
|
|
|
menuItems.forEach(function (item) {
|
|
var row = document.createElement("div");
|
|
Object.assign(row.style, {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "12px",
|
|
padding: "11px 14px",
|
|
cursor: "pointer",
|
|
color: "#202124",
|
|
fontSize: "13px",
|
|
transition: "background 0.1s",
|
|
borderBottom: "1px solid #f3f4f6",
|
|
});
|
|
row.onmouseenter = function () {
|
|
row.style.background = "#f1f3f4";
|
|
};
|
|
row.onmouseleave = function () {
|
|
row.style.background = "";
|
|
};
|
|
|
|
var iconWrap = document.createElement("div");
|
|
iconWrap.style.cssText =
|
|
"width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;";
|
|
iconWrap.innerHTML =
|
|
'<svg width="18" height="18" viewBox="0 0 24 24">' +
|
|
item.icon +
|
|
"</svg>";
|
|
|
|
var label = document.createElement("span");
|
|
label.style.cssText = "flex:1;";
|
|
label.textContent = item.label;
|
|
|
|
row.appendChild(iconWrap);
|
|
row.appendChild(label);
|
|
|
|
if (item.chevron) {
|
|
var chev = document.createElement("div");
|
|
chev.innerHTML =
|
|
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none">' +
|
|
'<path d="M9 18l6-6-6-6" stroke="#5f6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
|
|
"</svg>";
|
|
row.appendChild(chev);
|
|
} else {
|
|
var extIcon = document.createElement("div");
|
|
extIcon.innerHTML =
|
|
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none">' +
|
|
'<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round"/>' +
|
|
'<path d="M15 3h6v6M10 14L21 3" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>' +
|
|
"</svg>";
|
|
row.appendChild(extIcon);
|
|
}
|
|
|
|
row.addEventListener("mousedown", function (e) {
|
|
e.preventDefault();
|
|
item.action();
|
|
});
|
|
|
|
dropdown.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// ── Field decoration ──────────────────────────────────────────────────────────
|
|
|
|
// Map from field element → AbortController so we can cancel its listeners on re-decoration.
|
|
const _fieldAbortMap = new WeakMap();
|
|
|
|
function decorateField(field, pwField) {
|
|
if (field.getAttribute(PK_ATTR)) return;
|
|
field.setAttribute(PK_ATTR, "1");
|
|
|
|
// Cancel any previous listeners on this field.
|
|
const prevAC = _fieldAbortMap.get(field);
|
|
if (prevAC) prevAC.abort();
|
|
const ac = new AbortController();
|
|
_fieldAbortMap.set(field, ac);
|
|
const sig = ac.signal;
|
|
|
|
createIconBtn(field, pwField, sig);
|
|
}
|
|
|
|
function createIconBtn(field, pwField, abortSignal) {
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = PK_BTN_CLASS;
|
|
btn.title = "PassKeeper autofill";
|
|
btn.setAttribute("aria-label", "Autofill with PassKeeper");
|
|
btn.style.cssText = [
|
|
"position:fixed",
|
|
"width:26px",
|
|
"height:26px",
|
|
"background:#c0392b",
|
|
"border:none",
|
|
"border-radius:5px",
|
|
"cursor:pointer",
|
|
"display:flex",
|
|
"align-items:center",
|
|
"justify-content:center",
|
|
"z-index:2147483646",
|
|
"padding:0",
|
|
"box-shadow:0 1px 4px rgba(0,0,0,0.3)",
|
|
"transition:background 0.15s",
|
|
].join(";");
|
|
|
|
btn.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="#fff" stroke-width="2"/>' +
|
|
'<path d="M8 9V6a4 4 0 018 0v3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>' +
|
|
'<circle cx="12" cy="15" r="1.5" fill="#fff"/>' +
|
|
"</svg>";
|
|
|
|
btn.addEventListener("mouseenter", function () {
|
|
btn.style.background = "#a93226";
|
|
});
|
|
btn.addEventListener("mouseleave", function () {
|
|
btn.style.background = "#c0392b";
|
|
});
|
|
|
|
positionBtn(btn, field);
|
|
document.body.appendChild(btn);
|
|
_fieldBtnMap.set(field, btn);
|
|
|
|
// Remove the button when the AbortController fires (re-decoration).
|
|
abortSignal.addEventListener("abort", function () {
|
|
btn.remove();
|
|
_fieldBtnMap.delete(field);
|
|
});
|
|
|
|
// Keep button tracked as page scrolls/resizes.
|
|
function reposition() {
|
|
if (document.body.contains(btn)) positionBtn(btn, field);
|
|
}
|
|
window.addEventListener("scroll", reposition, {
|
|
passive: true,
|
|
signal: abortSignal,
|
|
});
|
|
window.addEventListener("resize", reposition, {
|
|
passive: true,
|
|
signal: abortSignal,
|
|
});
|
|
|
|
// ── All event handlers read _matchingItems at call time, never from closure ──
|
|
|
|
// Show dropdown on focus — reads vault_items fresh from storage each time.
|
|
field.addEventListener(
|
|
"focus",
|
|
function () {
|
|
showDropdown(field, pwField, field.value, "credentials");
|
|
},
|
|
{ signal: abortSignal },
|
|
);
|
|
|
|
// Re-filter as user types — debounced to avoid rebuilding the dropdown
|
|
// on every single keystroke (noticeable on large vaults or slow machines).
|
|
var _debouncedShow = _debounce(function () {
|
|
showDropdown(field, pwField, field.value, "credentials");
|
|
}, 150);
|
|
field.addEventListener("input", _debouncedShow, { signal: abortSignal });
|
|
|
|
// Dim button when field loses focus and no dropdown is open.
|
|
field.addEventListener(
|
|
"blur",
|
|
function () {
|
|
setTimeout(function () {
|
|
if (!document.getElementById(PK_DROPDOWN_ID))
|
|
btn.style.opacity = "0.4";
|
|
}, 150);
|
|
},
|
|
{ signal: abortSignal },
|
|
);
|
|
|
|
field.addEventListener(
|
|
"focus",
|
|
function () {
|
|
btn.style.opacity = "1";
|
|
},
|
|
{ signal: abortSignal },
|
|
);
|
|
|
|
// Icon click: toggle dropdown.
|
|
btn.addEventListener("mousedown", function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (document.getElementById(PK_DROPDOWN_ID)) {
|
|
removeDropdown();
|
|
} else {
|
|
showDropdown(field, pwField, field.value, "credentials");
|
|
}
|
|
});
|
|
|
|
return btn;
|
|
}
|
|
|
|
/**
|
|
* Decorate all visible password (and paired username) fields with the PassKeeper
|
|
* icon button.
|
|
*
|
|
* @param {Array|null} knownItems When the caller already holds the correct
|
|
* filtered item list (e.g. from a storage.onChanged newValue or a VAULT_UPDATED
|
|
* message payload), pass it here to skip the redundant storage read.
|
|
* Pass nothing/undefined to let this function read storage itself.
|
|
*/
|
|
async function decorateFields(knownItems) {
|
|
// Fast-path: if there are no password fields anywhere on the page, there is
|
|
// nothing to decorate. This prevents false-positive hooks on pages with
|
|
// standalone text inputs (search bars, filter fields, etc.).
|
|
if (!visiblePasswordFields().length) return;
|
|
|
|
if (knownItems != null) {
|
|
// Caller supplied pre-filtered items — trust them, skip the storage read.
|
|
_matchingItems = knownItems;
|
|
console.log(
|
|
"[PassKeeper] decorateFields (inline): host=" +
|
|
location.hostname.replace(/^www\./, "") +
|
|
", matched=" +
|
|
_matchingItems.length,
|
|
);
|
|
} else {
|
|
// Read from chrome.storage.session — memory-only, cleared on browser close.
|
|
// Decrypted vault data must never be written to persistent (local) storage.
|
|
var all = [];
|
|
try {
|
|
var result = await chrome.storage.session.get("vault_items_cs");
|
|
all = (result && result.vault_items_cs) || [];
|
|
} catch (e) {}
|
|
_matchingItems = _filterForHost(all);
|
|
console.log(
|
|
"[PassKeeper] decorateFields (storage): host=" +
|
|
location.hostname.replace(/^www\./, "") +
|
|
", matched=" +
|
|
_matchingItems.length +
|
|
" of " +
|
|
all.length +
|
|
" items",
|
|
);
|
|
}
|
|
|
|
// Decorate every visible password field and its paired username field.
|
|
visiblePasswordFields().forEach(function (pwField) {
|
|
var usernameField = findUsernameField(pwField);
|
|
if (usernameField) decorateField(usernameField, pwField);
|
|
decorateField(pwField, pwField);
|
|
});
|
|
}
|
|
|
|
// ── Vault item helpers ────────────────────────────────────────────────────────
|
|
|
|
/**
|
|
* Normalise a stored URL string so it is always parseable by `new URL()`.
|
|
* Handles bare domains ("github.com"), protocol-relative ("//github.com"),
|
|
* and fully-formed URLs ("https://github.com") identically.
|
|
*/
|
|
function _normaliseUrl(raw) {
|
|
if (!raw) return null;
|
|
var s = raw.trim();
|
|
if (/^https?:\/\//i.test(s)) return s; // already has a scheme
|
|
if (s.startsWith("//")) return "https:" + s; // protocol-relative
|
|
return "https://" + s; // bare domain or path
|
|
}
|
|
|
|
function _filterForHost(items) {
|
|
var host = location.hostname.replace(/^www\./, "");
|
|
return (items || []).filter(function (item) {
|
|
if (item.item_type !== "password" || !(item.plain && item.plain.url))
|
|
return false;
|
|
try {
|
|
var normalised = _normaliseUrl(item.plain.url);
|
|
if (!normalised) return false;
|
|
var h = new URL(normalised).hostname.replace(/^www\./, "");
|
|
// Match exact domain or any subdomain relationship.
|
|
return h === host || h.endsWith("." + host) || host.endsWith("." + h);
|
|
} catch (e) {
|
|
console.warn(
|
|
"[PassKeeper] _filterForHost: could not parse URL:",
|
|
item.plain.url,
|
|
e.message,
|
|
);
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Form detection ────────────────────────────────────────────────────────────
|
|
|
|
function notifyFormDetected() {
|
|
if (_hasNotifiedForm) return;
|
|
if (!visiblePasswordFields().length) return;
|
|
_hasNotifiedForm = true;
|
|
chrome.runtime
|
|
.sendMessage({ type: "FORMS_DETECTED" })
|
|
.catch(function () {});
|
|
}
|
|
|
|
// ── Duplicate detection ───────────────────────────────────────────────────────
|
|
|
|
async function classifyCredentials(username, password) {
|
|
var all = [];
|
|
try {
|
|
var result = await chrome.storage.session.get("vault_items_cs");
|
|
all = (result && result.vault_items_cs) || [];
|
|
} catch (e) {
|
|
return "new";
|
|
}
|
|
if (!all.length) return "new";
|
|
|
|
var siteItems = _filterForHost(all);
|
|
if (!siteItems.length) return "new";
|
|
var exactMatch = siteItems.some(function (item) {
|
|
return (
|
|
item.plain &&
|
|
item.plain.username === username &&
|
|
item.plain.password === password
|
|
);
|
|
});
|
|
return exactMatch ? "same" : "updated";
|
|
}
|
|
|
|
// ── Save blocklist ────────────────────────────────────────────────────────────
|
|
|
|
const BLOCKLIST_KEY = "save_blocklist";
|
|
|
|
async function isBlocked(hostname) {
|
|
try {
|
|
var result = await chrome.storage.local.get(BLOCKLIST_KEY);
|
|
var list = (result && result[BLOCKLIST_KEY]) || [];
|
|
return list.indexOf(hostname) !== -1;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
async function addToBlocklist(hostname) {
|
|
try {
|
|
var result = await chrome.storage.local.get(BLOCKLIST_KEY);
|
|
var list = (result && result[BLOCKLIST_KEY]) || [];
|
|
if (list.indexOf(hostname) === -1) {
|
|
list.push(hostname);
|
|
await chrome.storage.local.set({ [BLOCKLIST_KEY]: list });
|
|
console.log("[PassKeeper] Added to save blocklist:", hostname);
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
// ── Auto-save banner ──────────────────────────────────────────────────────────
|
|
|
|
function showSaveBanner(username, password, credentialState) {
|
|
if (_bannerEl) _bannerEl.remove();
|
|
|
|
var 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",
|
|
});
|
|
|
|
var site = escHtml(location.hostname);
|
|
var user = escHtml(username);
|
|
var title =
|
|
credentialState === "updated"
|
|
? "Update in PassKeeper?"
|
|
: "Save to PassKeeper?";
|
|
// Default site name: prefer page title (trimmed to 60 chars), fall back to hostname.
|
|
var defaultSiteName =
|
|
(document.title || "").trim().slice(0, 60) || location.hostname;
|
|
|
|
banner.innerHTML =
|
|
'<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">' +
|
|
'<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="9" width="18" height="12" rx="2" stroke="#c0392b" stroke-width="1.8"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#c0392b" stroke-width="1.8" stroke-linecap="round"/></svg>' +
|
|
'<strong style="flex:1;font-size:13px;color:#111827;">' +
|
|
escHtml(title) +
|
|
"</strong>" +
|
|
'<button id="__pk_close__" style="background:none;border:none;cursor:pointer;font-size:18px;color:#9ca3af;line-height:1;padding:0;">\xd7</button>' +
|
|
"</div>" +
|
|
'<div style="margin-bottom:8px;">' +
|
|
'<label style="display:block;font-size:11px;color:#6b7280;margin-bottom:3px;">Site name</label>' +
|
|
'<input id="__pk_site_name__" type="text" value="' +
|
|
escHtml(defaultSiteName) +
|
|
'"' +
|
|
' style="width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;color:#111827;outline:none;">' +
|
|
"</div>" +
|
|
'<p style="color:#6b7280;font-size:12px;margin-bottom:10px;">' +
|
|
'<strong style="color:#111827;">' +
|
|
user +
|
|
'</strong> on <strong style="color:#111827;">' +
|
|
site +
|
|
"</strong>" +
|
|
"</p>" +
|
|
'<div style="display:flex;gap:8px;margin-bottom:8px;">' +
|
|
'<button id="__pk_save__" style="flex:1;padding:7px 0;background:#c0392b;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;">Save</button>' +
|
|
'<button id="__pk_skip__" style="flex:1;padding:7px 0;background:transparent;color:#374151;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:12px;">Not now</button>' +
|
|
"</div>" +
|
|
'<button id="__pk_never__" style="width:100%;padding:5px 0;background:transparent;color:#9ca3af;border:none;cursor:pointer;font-size:11px;text-align:center;">Never ask for ' +
|
|
site +
|
|
"</button>";
|
|
|
|
document.body.appendChild(banner);
|
|
_bannerEl = banner;
|
|
|
|
var dismiss = function () {
|
|
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", function () {
|
|
var siteName =
|
|
(banner.querySelector("#__pk_site_name__").value || "").trim() ||
|
|
location.hostname;
|
|
console.log(
|
|
"[PassKeeper] User chose to save credentials for",
|
|
location.hostname,
|
|
"— site name:",
|
|
siteName,
|
|
);
|
|
chrome.runtime
|
|
.sendMessage({
|
|
type: "SAVE_CREDENTIALS",
|
|
data: {
|
|
url: location.href,
|
|
siteName: siteName,
|
|
username: username,
|
|
password: password,
|
|
},
|
|
})
|
|
.catch(function () {});
|
|
dismiss();
|
|
});
|
|
banner
|
|
.querySelector("#__pk_never__")
|
|
.addEventListener("click", function () {
|
|
addToBlocklist(location.hostname);
|
|
dismiss();
|
|
});
|
|
}
|
|
|
|
// ── Form submission watch ─────────────────────────────────────────────────────
|
|
|
|
function watchSubmissions() {
|
|
document.addEventListener(
|
|
"submit",
|
|
async function (e) {
|
|
var form = e.target;
|
|
var pwField = form.querySelector(
|
|
'input[type="password"]:not([disabled])',
|
|
);
|
|
if (!pwField || !pwField.value) return;
|
|
|
|
var userField =
|
|
findUsernameField(pwField) ||
|
|
form.querySelector('input[type="email"]:not([disabled])') ||
|
|
form.querySelector('input[type="text"]:not([disabled])');
|
|
|
|
var username =
|
|
(userField && userField.value && userField.value.trim()) || "";
|
|
var password = pwField.value;
|
|
if (!username || !password) return;
|
|
|
|
removeDropdown();
|
|
|
|
// Check blocklist before doing anything else.
|
|
if (await isBlocked(location.hostname)) {
|
|
console.log(
|
|
"[PassKeeper] Site is blocklisted, skipping save banner:",
|
|
location.hostname,
|
|
);
|
|
return;
|
|
}
|
|
|
|
var credentialState = await classifyCredentials(username, password);
|
|
console.log(
|
|
"[PassKeeper] Credential state for",
|
|
location.hostname,
|
|
"\u2192",
|
|
credentialState,
|
|
);
|
|
if (credentialState === "same") return;
|
|
|
|
setTimeout(function () {
|
|
showSaveBanner(username, password, credentialState);
|
|
}, 500);
|
|
},
|
|
true,
|
|
);
|
|
}
|
|
|
|
// ── Message listener ──────────────────────────────────────────────────────────
|
|
|
|
chrome.runtime.onMessage.addListener(function (msg, _sender, sendResponse) {
|
|
if (msg.type === "DO_AUTOFILL") {
|
|
doAutofill(msg.username, msg.password, !!msg.autologin);
|
|
sendResponse({ ok: true });
|
|
}
|
|
if (msg.type === "VAULT_UPDATED") {
|
|
// Items arrive in the message payload. The source of truth is
|
|
// chrome.storage.session (vault_items_cs), which was already written by
|
|
// the popup before this message was sent.
|
|
var allItems = msg.vault_items || [];
|
|
var matched = allItems.length ? _filterForHost(allItems) : null;
|
|
if (matched !== null) {
|
|
_matchingItems = matched;
|
|
console.log(
|
|
"[PassKeeper] VAULT_UPDATED (message): matched=" +
|
|
_matchingItems.length +
|
|
" of " +
|
|
allItems.length,
|
|
);
|
|
}
|
|
// Re-decorate, passing pre-filtered items so decorateFields skips the
|
|
// storage read when the message payload was non-empty.
|
|
document.querySelectorAll("[" + PK_ATTR + "]").forEach(function (el) {
|
|
var ac = _fieldAbortMap.get(el);
|
|
if (ac) ac.abort();
|
|
el.removeAttribute(PK_ATTR);
|
|
});
|
|
document.querySelectorAll("." + PK_BTN_CLASS).forEach(function (el) {
|
|
el.remove();
|
|
});
|
|
removeDropdown();
|
|
decorateFields(matched);
|
|
}
|
|
return false;
|
|
});
|
|
|
|
// ── Init ──────────────────────────────────────────────────────────────────────
|
|
|
|
function init() {
|
|
notifyFormDetected();
|
|
decorateFields();
|
|
watchSubmissions();
|
|
|
|
// React instantly when the popup writes fresh vault data to session storage.
|
|
// This fires in the same tick as the write — no message delivery required.
|
|
chrome.storage.onChanged.addListener(function (changes, area) {
|
|
if (area === "session" && changes.vault_items_cs) {
|
|
var allItems = changes.vault_items_cs.newValue || [];
|
|
var matched = _filterForHost(allItems);
|
|
_matchingItems = matched;
|
|
console.log(
|
|
"[PassKeeper] storage.onChanged: matched=" +
|
|
matched.length +
|
|
" of " +
|
|
allItems.length +
|
|
" items",
|
|
);
|
|
// Re-decorate, passing the already-filtered list so decorateFields
|
|
// skips a redundant storage.session.get() call.
|
|
document.querySelectorAll("[" + PK_ATTR + "]").forEach(function (el) {
|
|
var ac = _fieldAbortMap.get(el);
|
|
if (ac) ac.abort();
|
|
el.removeAttribute(PK_ATTR);
|
|
});
|
|
document.querySelectorAll("." + PK_BTN_CLASS).forEach(function (el) {
|
|
el.remove();
|
|
});
|
|
removeDropdown();
|
|
decorateFields(matched);
|
|
}
|
|
});
|
|
|
|
// Debounce + narrow the MutationObserver: only re-scan when something that
|
|
// looks like a form input or a whole subtree with inputs was added/removed.
|
|
// This prevents constant re-scanning on SPA re-renders (tooltip shows,
|
|
// React state updates, etc.) that don't touch login form elements.
|
|
var _mutationTimer = null;
|
|
_formObserver = new MutationObserver(function (mutations) {
|
|
// Ignore mutations caused by the extension's own injected elements.
|
|
var hasRelevantChange = mutations.some(function (m) {
|
|
// addedNodes contains an <input>, <form>, or a subtree with either.
|
|
return Array.from(m.addedNodes).some(function (node) {
|
|
if (!node || node.nodeType !== 1) return false;
|
|
// Skip our own injected nodes.
|
|
var cls = node.className || "";
|
|
var id = node.id || "";
|
|
if (cls.indexOf("__pk") !== -1 || id.indexOf("__pk") !== -1)
|
|
return false;
|
|
// A new <input> or <form> element, or a container with one inside.
|
|
var tag = node.tagName;
|
|
if (tag === "INPUT" || tag === "FORM") return true;
|
|
if (
|
|
node.querySelector &&
|
|
(node.querySelector('input[type="password"]') ||
|
|
node.querySelector("input") ||
|
|
node.querySelector("form"))
|
|
)
|
|
return true;
|
|
return false;
|
|
});
|
|
});
|
|
if (!hasRelevantChange) return;
|
|
|
|
// Debounce: wait 300 ms after the last relevant mutation before scanning.
|
|
clearTimeout(_mutationTimer);
|
|
_mutationTimer = setTimeout(function () {
|
|
_hasNotifiedForm = false;
|
|
notifyFormDetected();
|
|
decorateFields();
|
|
}, 300);
|
|
});
|
|
_formObserver.observe(document.body, { childList: true, subtree: true });
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|