04/19 Update extension: add item prompt exist until user clicks the button, fix All relevant tab content
This commit is contained in:
+403
-233
@@ -2,8 +2,9 @@
|
||||
* extension/content/content.js — PassKeeper content script.
|
||||
*
|
||||
* 1. Detects login forms → notifies background (badge count).
|
||||
* 2. Injects a small autofill button next to password fields when vault
|
||||
* has matching credentials for the current site.
|
||||
* 2. Injects a PassKeeper icon button into username AND password fields.
|
||||
* Focusing either field (or clicking the icon) shows a suggestion dropdown
|
||||
* anchored below the field, matching the browser-native autofill style.
|
||||
* 3. Listens for DO_AUTOFILL from the popup → fills fields.
|
||||
* 4. Watches form submissions → shows save-credentials banner.
|
||||
*/
|
||||
@@ -12,10 +13,12 @@
|
||||
|
||||
const PK_ATTR = "data-pk-decorated";
|
||||
const PK_BTN_CLASS = "__pk_autofill_btn__";
|
||||
const PK_DROPDOWN_ID = "__pk_dropdown__";
|
||||
|
||||
let _bannerEl = null;
|
||||
let _hasNotifiedForm = false;
|
||||
let _formObserver = null;
|
||||
let _matchingItems = []; // cached matching vault items for the current page
|
||||
|
||||
// ── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -72,151 +75,355 @@
|
||||
});
|
||||
}
|
||||
|
||||
// ── Inline autofill button ────────────────────────────────────────────────────
|
||||
// ── Suggestion dropdown ───────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Inject a small PassKeeper icon button just inside the right edge of each
|
||||
* password field. Clicking it opens a tiny dropdown listing matching items.
|
||||
*/
|
||||
function injectAutofillButtons(matchingItems) {
|
||||
visiblePasswordFields().forEach((pwField) => {
|
||||
if (pwField.getAttribute(PK_ATTR)) return; // already decorated
|
||||
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%;";
|
||||
pwField.parentNode.insertBefore(wrap, pwField);
|
||||
wrap.appendChild(pwField);
|
||||
|
||||
// Add right-side padding so text doesn't overlap the button
|
||||
pwField.style.paddingRight = "32px";
|
||||
|
||||
// The icon 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.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(";");
|
||||
|
||||
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"/>
|
||||
<path d="M8 9V6a4 4 0 018 0v3" stroke="#1a73e8" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="15" r="1.5" fill="#1a73e8"/>
|
||||
</svg>`;
|
||||
|
||||
wrap.appendChild(btn);
|
||||
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleDropdown(btn, pwField, matchingItems);
|
||||
});
|
||||
});
|
||||
function removeDropdown() {
|
||||
const existing = document.getElementById(PK_DROPDOWN_ID);
|
||||
if (existing) existing.remove();
|
||||
}
|
||||
|
||||
// Dropdown showing matching credentials
|
||||
function toggleDropdown(btn, pwField, items) {
|
||||
// Remove any existing dropdown
|
||||
const existing = document.getElementById("__pk_dropdown__");
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* Build and show the suggestion dropdown anchored directly below anchorField.
|
||||
*
|
||||
* @param {HTMLInputElement} anchorField - field the dropdown is anchored to
|
||||
* @param {HTMLInputElement} pwField - associated password field to fill
|
||||
* @param {object[]} items - matching vault items for this site
|
||||
* @param {string} filterText - current field value used to filter
|
||||
*/
|
||||
function showDropdown(anchorField, pwField, items, filterText) {
|
||||
removeDropdown();
|
||||
|
||||
const usernameField = findUsernameField(pwField);
|
||||
// Filter by what the user has already typed.
|
||||
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;
|
||||
|
||||
// Don't show an empty dropdown while the user is actively typing and nothing matches.
|
||||
if (!filtered.length && q) return;
|
||||
|
||||
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",
|
||||
'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
|
||||
"font-size:13px",
|
||||
"overflow:hidden",
|
||||
].join(";");
|
||||
dropdown.id = PK_DROPDOWN_ID;
|
||||
|
||||
// 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";
|
||||
// Anchor below the field, same left edge, at least 260 px wide.
|
||||
const rect = anchorField.getBoundingClientRect();
|
||||
const dropWidth = Math.max(260, rect.width);
|
||||
|
||||
// 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;";
|
||||
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);
|
||||
Object.assign(dropdown.style, {
|
||||
position: "fixed",
|
||||
top: rect.bottom + 2 + "px",
|
||||
left: rect.left + "px",
|
||||
width: dropWidth + "px",
|
||||
background: "#fff",
|
||||
border: "1px solid #dadce0",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.18)",
|
||||
zIndex: "2147483647",
|
||||
fontFamily:
|
||||
"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
|
||||
fontSize: "13px",
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
if (!items.length) {
|
||||
// The username field to fill.
|
||||
const usernameField =
|
||||
anchorField.type === "password"
|
||||
? findUsernameField(anchorField)
|
||||
: anchorField;
|
||||
|
||||
if (filtered.length === 0) {
|
||||
// No items at all for this site.
|
||||
const empty = document.createElement("div");
|
||||
empty.style.cssText =
|
||||
"padding:14px 12px;color:#9ca3af;font-size:12px;text-align:center;";
|
||||
empty.textContent = "No matching credentials";
|
||||
Object.assign(empty.style, {
|
||||
padding: "12px 14px",
|
||||
color: "#5f6368",
|
||||
fontSize: "12px",
|
||||
});
|
||||
empty.textContent = "No saved passwords for this site.";
|
||||
dropdown.appendChild(empty);
|
||||
} else {
|
||||
items.forEach((item) => {
|
||||
filtered.forEach(function (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";
|
||||
Object.assign(row.style, {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
padding: "9px 12px",
|
||||
cursor: "pointer",
|
||||
transition: "background 0.1s",
|
||||
});
|
||||
row.onmouseenter = function () {
|
||||
row.style.background = "#f1f3f4";
|
||||
};
|
||||
row.onmouseleave = () => {
|
||||
row.onmouseleave = function () {
|
||||
row.style.background = "";
|
||||
};
|
||||
|
||||
const username = escHtml(item.plain?.username || "");
|
||||
const name = escHtml(item.name);
|
||||
// Derive display hostname from stored URL.
|
||||
var siteHost = item.name;
|
||||
if (item.plain && item.plain.url) {
|
||||
try {
|
||||
siteHost = new URL(item.plain.url).hostname.replace(/^www\./, "");
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
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>` : ""}
|
||||
</div>`;
|
||||
var username = escHtml((item.plain && item.plain.username) || "");
|
||||
var site = escHtml(siteHost);
|
||||
|
||||
row.addEventListener("click", () => {
|
||||
if (usernameField && item.plain?.username)
|
||||
// Lock icon avatar.
|
||||
var avatar = document.createElement("div");
|
||||
Object.assign(avatar.style, {
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
borderRadius: "50%",
|
||||
background: "#e8eaed",
|
||||
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="#5f6368"/>' +
|
||||
'<path d="M8 10V7a4 4 0 018 0v3" stroke="#5f6368" stroke-width="2" stroke-linecap="round" fill="none"/>' +
|
||||
"</svg>";
|
||||
|
||||
// Text block: site name + username.
|
||||
var text = document.createElement("div");
|
||||
text.style.cssText = "flex:1;min-width:0;";
|
||||
text.innerHTML =
|
||||
'<div style="font-size:12px;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;">' +
|
||||
username +
|
||||
"</div>"
|
||||
: "");
|
||||
|
||||
// Edit (pencil) icon.
|
||||
var editBtn = document.createElement("button");
|
||||
Object.assign(editBtn.style, {
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
padding: "4px",
|
||||
color: "#1a73e8",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexShrink: "0",
|
||||
borderRadius: "4px",
|
||||
});
|
||||
editBtn.title = "Edit in PassKeeper";
|
||||
editBtn.innerHTML =
|
||||
'<svg width="15" height="15" 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="2" 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="2" 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);
|
||||
|
||||
// Clicking the row fills both fields.
|
||||
row.addEventListener("mousedown", function (e) {
|
||||
if (e.target === editBtn || editBtn.contains(e.target)) return;
|
||||
e.preventDefault();
|
||||
if (usernameField && item.plain && item.plain.username)
|
||||
fillField(usernameField, item.plain.username);
|
||||
if (item.plain?.password) fillField(pwField, item.plain.password);
|
||||
dropdown.remove();
|
||||
if (pwField && item.plain && item.plain.password)
|
||||
fillField(pwField, item.plain.password);
|
||||
removeDropdown();
|
||||
if (pwField && anchorField !== pwField) {
|
||||
setTimeout(function () {
|
||||
pwField.focus();
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
dropdown.appendChild(row);
|
||||
});
|
||||
|
||||
// "More options…" footer row.
|
||||
var divider = document.createElement("div");
|
||||
divider.style.cssText = "height:1px;background:#e8eaed;margin:0 12px;";
|
||||
dropdown.appendChild(divider);
|
||||
|
||||
var more = document.createElement("div");
|
||||
Object.assign(more.style, {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
padding: "9px 12px",
|
||||
cursor: "pointer",
|
||||
color: "#1a73e8",
|
||||
fontSize: "12px",
|
||||
fontWeight: "500",
|
||||
transition: "background 0.1s",
|
||||
});
|
||||
more.onmouseenter = function () {
|
||||
more.style.background = "#f1f3f4";
|
||||
};
|
||||
more.onmouseleave = function () {
|
||||
more.style.background = "";
|
||||
};
|
||||
more.innerHTML =
|
||||
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none">' +
|
||||
'<circle cx="5" cy="12" r="1.5" fill="#1a73e8"/>' +
|
||||
'<circle cx="12" cy="12" r="1.5" fill="#1a73e8"/>' +
|
||||
'<circle cx="19" cy="12" r="1.5" fill="#1a73e8"/>' +
|
||||
"</svg> More options\u2026";
|
||||
more.addEventListener("mousedown", function (e) {
|
||||
e.preventDefault();
|
||||
chrome.runtime
|
||||
.sendMessage({ type: "OPEN_VAULT" })
|
||||
.catch(function () {});
|
||||
removeDropdown();
|
||||
});
|
||||
dropdown.appendChild(more);
|
||||
}
|
||||
|
||||
document.body.appendChild(dropdown);
|
||||
|
||||
// Close on outside click
|
||||
const close = (e) => {
|
||||
if (!dropdown.contains(e.target) && e.target !== btn) {
|
||||
dropdown.remove();
|
||||
document.removeEventListener("click", close, true);
|
||||
// Close on outside mousedown or Escape key.
|
||||
function onOutside(e) {
|
||||
if (!dropdown.contains(e.target) && e.target !== anchorField) {
|
||||
removeDropdown();
|
||||
document.removeEventListener("mousedown", onOutside, true);
|
||||
document.removeEventListener("keydown", onEscape, true);
|
||||
}
|
||||
};
|
||||
setTimeout(() => document.addEventListener("click", close, true), 0);
|
||||
}
|
||||
function onEscape(e) {
|
||||
if (e.key === "Escape") {
|
||||
removeDropdown();
|
||||
document.removeEventListener("mousedown", onOutside, true);
|
||||
document.removeEventListener("keydown", onEscape, true);
|
||||
}
|
||||
}
|
||||
setTimeout(function () {
|
||||
document.addEventListener("mousedown", onOutside, true);
|
||||
document.addEventListener("keydown", onEscape, true);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// ── Field decoration ──────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Inject the PassKeeper icon button into a field and wire focus/input events.
|
||||
*
|
||||
* @param {HTMLInputElement} field - field to decorate (username OR password)
|
||||
* @param {HTMLInputElement} pwField - associated password field
|
||||
* @param {object[]} items - matching vault items for this site
|
||||
*/
|
||||
function decorateField(field, pwField, items) {
|
||||
if (field.getAttribute(PK_ATTR)) return; // already decorated
|
||||
field.setAttribute(PK_ATTR, "1");
|
||||
|
||||
// Wrap the field so the icon button can be positioned absolutely inside it.
|
||||
var wrap = document.createElement("div");
|
||||
wrap.style.cssText = "position:relative;display:inline-block;width:100%;";
|
||||
field.parentNode.insertBefore(wrap, field);
|
||||
wrap.appendChild(field);
|
||||
|
||||
// Prevent typed text from sliding under the icon.
|
||||
field.style.paddingRight = "34px";
|
||||
|
||||
// PassKeeper icon button inside the right edge of the field.
|
||||
var 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.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(";");
|
||||
|
||||
btn.innerHTML =
|
||||
'<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"/>' +
|
||||
'<circle cx="12" cy="15" r="1.5" fill="#c0392b"/>' +
|
||||
"</svg>";
|
||||
|
||||
wrap.appendChild(btn);
|
||||
|
||||
// Show dropdown when the field gains focus.
|
||||
field.addEventListener("focus", function () {
|
||||
showDropdown(field, pwField, items, field.value);
|
||||
});
|
||||
|
||||
// Re-filter as user types.
|
||||
field.addEventListener("input", function () {
|
||||
showDropdown(field, pwField, items, field.value);
|
||||
});
|
||||
|
||||
// Icon button toggles the dropdown.
|
||||
btn.addEventListener("mousedown", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var existing = document.getElementById(PK_DROPDOWN_ID);
|
||||
if (existing) {
|
||||
removeDropdown();
|
||||
} else {
|
||||
showDropdown(field, pwField, items, field.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function decorateFields() {
|
||||
// Get cached vault items from session storage.
|
||||
var result;
|
||||
try {
|
||||
result = await chrome.storage.session.get("vault_items");
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
var vault_items = result && result.vault_items;
|
||||
if (!vault_items || !vault_items.length) return;
|
||||
|
||||
var host = location.hostname.replace(/^www\./, "");
|
||||
_matchingItems = vault_items.filter(function (item) {
|
||||
if (item.item_type !== "password" || !(item.plain && item.plain.url))
|
||||
return false;
|
||||
try {
|
||||
var h = new URL(item.plain.url).hostname.replace(/^www\./, "");
|
||||
return h === host || h.endsWith("." + host) || host.endsWith("." + h);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Decorate every visible password field and its paired username field.
|
||||
visiblePasswordFields().forEach(function (pwField) {
|
||||
var usernameField = findUsernameField(pwField);
|
||||
if (usernameField) decorateField(usernameField, pwField, _matchingItems);
|
||||
decorateField(pwField, pwField, _matchingItems);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Form detection ────────────────────────────────────────────────────────────
|
||||
@@ -225,92 +432,52 @@
|
||||
if (_hasNotifiedForm) return;
|
||||
if (!visiblePasswordFields().length) return;
|
||||
_hasNotifiedForm = true;
|
||||
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(() => ({}));
|
||||
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;
|
||||
try {
|
||||
const h = new URL(item.plain.url).hostname.replace(/^www\./, "");
|
||||
return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
injectAutofillButtons(matching);
|
||||
chrome.runtime
|
||||
.sendMessage({ type: "FORMS_DETECTED" })
|
||||
.catch(function () {});
|
||||
}
|
||||
|
||||
// ── Duplicate detection ───────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Checks the cached vault to determine whether the submitted credentials are
|
||||
* new or have been updated since last saved.
|
||||
*
|
||||
* Returns:
|
||||
* 'new' — no item found for this site; definitely show the banner.
|
||||
* 'updated' — item exists but username/password differs; show update banner.
|
||||
* 'same' — credentials are identical to a stored item; suppress the banner.
|
||||
*/
|
||||
async function classifyCredentials(username, password) {
|
||||
let vault_items;
|
||||
var result;
|
||||
try {
|
||||
({ vault_items } = await chrome.storage.session.get("vault_items"));
|
||||
} catch {
|
||||
// If we can't read storage (e.g. extension context invalidated), show banner.
|
||||
result = await chrome.storage.session.get("vault_items");
|
||||
} catch (e) {
|
||||
return "new";
|
||||
}
|
||||
if (!vault_items?.length) return "new";
|
||||
var vault_items = result && result.vault_items;
|
||||
if (!vault_items || !vault_items.length) return "new";
|
||||
|
||||
const host = location.hostname.replace(/^www\./, "");
|
||||
|
||||
const siteItems = vault_items.filter((item) => {
|
||||
if (item.item_type !== "password" || !item.plain?.url) return false;
|
||||
var host = location.hostname.replace(/^www\./, "");
|
||||
var siteItems = vault_items.filter(function (item) {
|
||||
if (item.item_type !== "password" || !(item.plain && item.plain.url))
|
||||
return false;
|
||||
try {
|
||||
const h = new URL(item.plain.url).hostname.replace(/^www\./, "");
|
||||
return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
|
||||
} catch {
|
||||
var h = new URL(item.plain.url).hostname.replace(/^www\./, "");
|
||||
return h === host || h.endsWith("." + host) || host.endsWith("." + h);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
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,
|
||||
);
|
||||
if (exactMatch) return "same";
|
||||
|
||||
// Credentials differ → treat as updated.
|
||||
return "updated";
|
||||
var exactMatch = siteItems.some(function (item) {
|
||||
return (
|
||||
item.plain &&
|
||||
item.plain.username === username &&
|
||||
item.plain.password === password
|
||||
);
|
||||
});
|
||||
return exactMatch ? "same" : "updated";
|
||||
}
|
||||
|
||||
// ── Auto-save banner ──────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Shows the save/update banner. The banner stays visible until the user
|
||||
* explicitly clicks "Save" or "Not now" — there is NO auto-dismiss timeout.
|
||||
*
|
||||
* @param {string} username
|
||||
* @param {string} password
|
||||
* @param {'new'|'updated'} credentialState — controls the title copy.
|
||||
*/
|
||||
function showSaveBanner(username, password, credentialState) {
|
||||
if (_bannerEl) _bannerEl.remove();
|
||||
|
||||
const banner = document.createElement("div");
|
||||
var banner = document.createElement("div");
|
||||
banner.id = "__pk_save_banner__";
|
||||
Object.assign(banner.style, {
|
||||
position: "fixed",
|
||||
@@ -330,32 +497,37 @@
|
||||
minWidth: "240px",
|
||||
});
|
||||
|
||||
const site = escHtml(location.hostname);
|
||||
const user = escHtml(username);
|
||||
const title =
|
||||
var site = escHtml(location.hostname);
|
||||
var user = escHtml(username);
|
||||
var title =
|
||||
credentialState === "updated"
|
||||
? "Update in PassKeeper?"
|
||||
: "Save to PassKeeper?";
|
||||
|
||||
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="#1a73e8" stroke-width="1.8"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#1a73e8" 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;">×</button>
|
||||
</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;">
|
||||
<button id="__pk_save__" style="flex:1;padding:7px 0;background:#1a1a2e;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>`;
|
||||
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="#1a73e8" stroke-width="1.8"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#1a73e8" 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>" +
|
||||
'<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;">' +
|
||||
'<button id="__pk_save__" style="flex:1;padding:7px 0;background:#1a1a2e;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>";
|
||||
|
||||
document.body.appendChild(banner);
|
||||
_bannerEl = banner;
|
||||
|
||||
// No setTimeout — banner stays until the user makes an explicit choice.
|
||||
const dismiss = () => {
|
||||
var dismiss = function () {
|
||||
if (_bannerEl === banner) {
|
||||
banner.remove();
|
||||
_bannerEl = null;
|
||||
@@ -363,7 +535,7 @@
|
||||
};
|
||||
banner.querySelector("#__pk_close__").addEventListener("click", dismiss);
|
||||
banner.querySelector("#__pk_skip__").addEventListener("click", dismiss);
|
||||
banner.querySelector("#__pk_save__").addEventListener("click", () => {
|
||||
banner.querySelector("#__pk_save__").addEventListener("click", function () {
|
||||
console.log(
|
||||
"[PassKeeper] User chose to save credentials for",
|
||||
location.hostname,
|
||||
@@ -374,11 +546,11 @@
|
||||
data: {
|
||||
url: location.href,
|
||||
siteName: document.title || location.hostname,
|
||||
username,
|
||||
password,
|
||||
username: username,
|
||||
password: password,
|
||||
},
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(function () {});
|
||||
dismiss();
|
||||
});
|
||||
}
|
||||
@@ -388,41 +560,39 @@
|
||||
function watchSubmissions() {
|
||||
document.addEventListener(
|
||||
"submit",
|
||||
async (e) => {
|
||||
const form = e.target;
|
||||
const pwField = form.querySelector(
|
||||
async function (e) {
|
||||
var form = e.target;
|
||||
var pwField = form.querySelector(
|
||||
'input[type="password"]:not([disabled])',
|
||||
);
|
||||
if (!pwField?.value) return;
|
||||
if (!pwField || !pwField.value) return;
|
||||
|
||||
const userField =
|
||||
findUsernameField(pwField) ??
|
||||
form.querySelector('input[type="email"]:not([disabled])') ??
|
||||
var 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;
|
||||
var username =
|
||||
(userField && userField.value && userField.value.trim()) || "";
|
||||
var password = pwField.value;
|
||||
|
||||
if (!username || !password) return;
|
||||
|
||||
// Run duplicate check before showing the banner.
|
||||
const credentialState = await classifyCredentials(username, password);
|
||||
removeDropdown();
|
||||
|
||||
var credentialState = await classifyCredentials(username, password);
|
||||
console.log(
|
||||
"[PassKeeper] Credential state for",
|
||||
location.hostname,
|
||||
"→",
|
||||
"\u2192",
|
||||
credentialState,
|
||||
);
|
||||
|
||||
if (credentialState === "same") {
|
||||
// Credentials unchanged — silently skip.
|
||||
return;
|
||||
}
|
||||
if (credentialState === "same") return;
|
||||
|
||||
setTimeout(
|
||||
() => showSaveBanner(username, password, credentialState),
|
||||
500,
|
||||
);
|
||||
setTimeout(function () {
|
||||
showSaveBanner(username, password, credentialState);
|
||||
}, 500);
|
||||
},
|
||||
true,
|
||||
);
|
||||
@@ -430,19 +600,19 @@
|
||||
|
||||
// ── Message listener ──────────────────────────────────────────────────────────
|
||||
|
||||
chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
|
||||
chrome.runtime.onMessage.addListener(function (msg, _sender, sendResponse) {
|
||||
if (msg.type === "DO_AUTOFILL") {
|
||||
doAutofill(msg.username, msg.password);
|
||||
sendResponse({ ok: true });
|
||||
}
|
||||
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(function (el) {
|
||||
el.removeAttribute(PK_ATTR);
|
||||
});
|
||||
document.querySelectorAll("." + PK_BTN_CLASS).forEach(function (el) {
|
||||
el.remove();
|
||||
});
|
||||
removeDropdown();
|
||||
decorateFields();
|
||||
}
|
||||
return false;
|
||||
@@ -455,7 +625,7 @@
|
||||
decorateFields();
|
||||
watchSubmissions();
|
||||
|
||||
_formObserver = new MutationObserver(() => {
|
||||
_formObserver = new MutationObserver(function () {
|
||||
_hasNotifiedForm = false;
|
||||
notifyFormDetected();
|
||||
decorateFields();
|
||||
|
||||
Reference in New Issue
Block a user