04/19 Update extension: add item prompt exist until user clicks the button, fix All relevant tab content

extension/background.js

@@ -76,6 +76,13 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 // ── Message handler ──────────────────────────────────────────────────────────
 
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  // Content script requests opening the vault tab (from suggestion dropdown).
+  if (msg.type === "OPEN_VAULT") {
+    chrome.tabs.create({ url: "https://pwkeeper.ngodanguyen.tech/vault" });
+    sendResponse({ ok: true });
+    return false;
+  }
+
   // No-op ping from popup — keeps the service worker alive while the browser
   // is open so chrome.storage.session is not wiped between popup openings.
   if (msg.type === "KEEPALIVE") {

extension/content/content.js

@@ -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
+ * 2. Injects a PassKeeper icon button into username AND password fields.
- *    has matching credentials for the current site.
+ *    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,28 +75,275 @@
     });
   }
 
-  // ── Inline autofill button ────────────────────────────────────────────────────
+  // ── Suggestion dropdown ───────────────────────────────────────────────────────
+
+  function removeDropdown() {
+    const existing = document.getElementById(PK_DROPDOWN_ID);
+    if (existing) existing.remove();
+  }
 
   /**
-   * Inject a small PassKeeper icon button just inside the right edge of each
+   * Build and show the suggestion dropdown anchored directly below anchorField.
-   * password field. Clicking it opens a tiny dropdown listing matching items.
+   *
+   * @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 injectAutofillButtons(matchingItems) {
+  function showDropdown(anchorField, pwField, items, filterText) {
-    visiblePasswordFields().forEach((pwField) => {
+    removeDropdown();
-      if (pwField.getAttribute(PK_ATTR)) return; // already decorated
-      pwField.setAttribute(PK_ATTR, "1");
 
-      // Wrap the field if it isn't already positioned
+    // Filter by what the user has already typed.
-      const wrap = document.createElement("div");
+    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_ID;
+
+    // Anchor below the field, same left edge, at least 260 px wide.
+    const rect = anchorField.getBoundingClientRect();
+    const dropWidth = Math.max(260, rect.width);
+
+    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",
+    });
+
+    // 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");
+      Object.assign(empty.style, {
+        padding: "12px 14px",
+        color: "#5f6368",
+        fontSize: "12px",
+      });
+      empty.textContent = "No saved passwords for this site.";
+      dropdown.appendChild(empty);
+    } else {
+      filtered.forEach(function (item) {
+        const row = document.createElement("div");
+        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 = function () {
+          row.style.background = "";
+        };
+
+        // 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) {}
+        }
+
+        var username = escHtml((item.plain && item.plain.username) || "");
+        var site = escHtml(siteHost);
+
+        // 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 (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 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);
+      }
+    }
+    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%;";
-      pwField.parentNode.insertBefore(wrap, pwField);
+    field.parentNode.insertBefore(wrap, field);
-      wrap.appendChild(pwField);
+    wrap.appendChild(field);
 
-      // Add right-side padding so text doesn't overlap the button
+    // Prevent typed text from sliding under the icon.
-      pwField.style.paddingRight = "32px";
+    field.style.paddingRight = "34px";
 
-      // The icon button
+    // PassKeeper icon button inside the right edge of the field.
-      const btn = document.createElement("button");
+    var btn = document.createElement("button");
     btn.type = "button";
     btn.className = PK_BTN_CLASS;
     btn.title = "Autofill with PassKeeper";
@@ -113,204 +363,121 @@
       "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">
+    btn.innerHTML =
-        <rect x="3" y="9" width="18" height="12" rx="2" stroke="#1a73e8" stroke-width="1.8"/>
+      '<svg width="18" height="18" viewBox="0 0 24 24" fill="none">' +
-        <path d="M8 9V6a4 4 0 018 0v3" stroke="#1a73e8" stroke-width="1.8" stroke-linecap="round"/>
+      '<rect x="3" y="9" width="18" height="12" rx="2" stroke="#c0392b" stroke-width="1.8"/>' +
-        <circle cx="12" cy="15" r="1.5" fill="#1a73e8"/>
+      '<path d="M8 9V6a4 4 0 018 0v3" stroke="#c0392b" stroke-width="1.8" stroke-linecap="round"/>' +
-      </svg>`;
+      '<circle cx="12" cy="15" r="1.5" fill="#c0392b"/>' +
+      "</svg>";
 
     wrap.appendChild(btn);
 
-      btn.addEventListener("click", (e) => {
+    // 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();
-        toggleDropdown(btn, pwField, matchingItems);
+      var existing = document.getElementById(PK_DROPDOWN_ID);
-      });
+      if (existing) {
+        removeDropdown();
+      } else {
+        showDropdown(field, pwField, items, field.value);
+      }
     });
   }
 
-  // Dropdown showing matching credentials
+  async function decorateFields() {
-  function toggleDropdown(btn, pwField, items) {
+    // Get cached vault items from session storage.
-    // Remove any existing dropdown
+    var result;
-    const existing = document.getElementById("__pk_dropdown__");
+    try {
-    if (existing) {
+      result = await chrome.storage.session.get("vault_items");
-      existing.remove();
+    } catch (e) {
       return;
     }
+    var vault_items = result && result.vault_items;
+    if (!vault_items || !vault_items.length) return;
 
-    const usernameField = findUsernameField(pwField);
+    var host = location.hostname.replace(/^www\./, "");
-
+    _matchingItems = vault_items.filter(function (item) {
-    const dropdown = document.createElement("div");
+      if (item.item_type !== "password" || !(item.plain && item.plain.url))
-    dropdown.id = "__pk_dropdown__";
+        return false;
-    dropdown.style.cssText = [
+      try {
-      "position:fixed",
+        var h = new URL(item.plain.url).hostname.replace(/^www\./, "");
-      "background:#fff",
+        return h === host || h.endsWith("." + host) || host.endsWith("." + h);
-      "border:1px solid #e2e8f0",
+      } catch (e) {
-      "border-radius:10px",
+        return false;
-      "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(";");
-
-    // 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";
-
-    // 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);
-
-    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";
-      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 = "";
-        };
-
-        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>` : ""}
-          </div>`;
-
-        row.addEventListener("click", () => {
-          if (usernameField && item.plain?.username)
-            fillField(usernameField, item.plain.username);
-          if (item.plain?.password) fillField(pwField, item.plain.password);
-          dropdown.remove();
     });
 
-        dropdown.appendChild(row);
+    // 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);
     });
   }
 
-    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);
-      }
-    };
-    setTimeout(() => document.addEventListener("click", close, true), 0);
-  }
-
   // ── Form detection ────────────────────────────────────────────────────────────
 
   function notifyFormDetected() {
     if (_hasNotifiedForm) return;
     if (!visiblePasswordFields().length) return;
     _hasNotifiedForm = true;
-    chrome.runtime.sendMessage({ type: "FORMS_DETECTED" }).catch(() => {});
+    chrome.runtime
-  }
+      .sendMessage({ type: "FORMS_DETECTED" })
-
+      .catch(function () {});
-  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);
   }
 
   // ── 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"));
+      result = await chrome.storage.session.get("vault_items");
-    } catch {
+    } catch (e) {
-      // If we can't read storage (e.g. extension context invalidated), show banner.
       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\./, "");
+    var host = location.hostname.replace(/^www\./, "");
-
+    var siteItems = vault_items.filter(function (item) {
-    const siteItems = vault_items.filter((item) => {
+      if (item.item_type !== "password" || !(item.plain && item.plain.url))
-      if (item.item_type !== "password" || !item.plain?.url) return false;
+        return false;
       try {
-        const h = new URL(item.plain.url).hostname.replace(/^www\./, "");
+        var h = new URL(item.plain.url).hostname.replace(/^www\./, "");
-        return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
+        return h === host || h.endsWith("." + host) || host.endsWith("." + h);
-      } catch {
+      } catch (e) {
         return false;
       }
     });
 
     if (!siteItems.length) return "new";
-
+    var exactMatch = siteItems.some(function (item) {
-    // Check for exact match (same username AND same password).
+      return (
-    const exactMatch = siteItems.some(
+        item.plain &&
-      (item) =>
+        item.plain.username === username &&
-        item.plain?.username === username && item.plain?.password === password,
+        item.plain.password === password
       );
-    if (exactMatch) return "same";
+    });
-
+    return exactMatch ? "same" : "updated";
-    // Credentials differ → treat as updated.
-    return "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);
+    var site = escHtml(location.hostname);
-    const user = escHtml(username);
+    var user = escHtml(username);
-    const title =
+    var title =
       credentialState === "updated"
         ? "Update in PassKeeper?"
         : "Save to PassKeeper?";
 
-    banner.innerHTML = `
+    banner.innerHTML =
-      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
+      '<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>
+      '<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>
+      '<strong style="flex:1;font-size:13px;color:#111827;">' +
-        <button id="__pk_close__" style="background:none;border:none;cursor:pointer;font-size:18px;color:#9ca3af;line-height:1;padding:0;">×</button>
+      escHtml(title) +
-      </div>
+      "</strong>" +
-      <p style="color:#6b7280;font-size:12px;margin-bottom:10px;">
+      '<button id="__pk_close__" style="background:none;border:none;cursor:pointer;font-size:18px;color:#9ca3af;line-height:1;padding:0;">\xd7</button>' +
-        <strong style="color:#111827;">${user}</strong> on <strong style="color:#111827;">${site}</strong>
+      "</div>" +
-      </p>
+      '<p style="color:#6b7280;font-size:12px;margin-bottom:10px;">' +
-      <div style="display:flex;gap:8px;">
+      '<strong style="color:#111827;">' +
-        <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>
+      user +
-        <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>
+      '</strong> on <strong style="color:#111827;">' +
-      </div>`;
+      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.
+    var dismiss = function () {
-    const dismiss = () => {
       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,
+            username: username,
-            password,
+            password: password,
           },
         })
-        .catch(() => {});
+        .catch(function () {});
       dismiss();
     });
   }
@@ -388,41 +560,39 @@
   function watchSubmissions() {
     document.addEventListener(
       "submit",
-      async (e) => {
+      async function (e) {
-        const form = e.target;
+        var form = e.target;
-        const pwField = form.querySelector(
+        var pwField = form.querySelector(
           'input[type="password"]:not([disabled])',
         );
-        if (!pwField?.value) return;
+        if (!pwField || !pwField.value) return;
 
-        const userField =
+        var userField =
-          findUsernameField(pwField) ??
+          findUsernameField(pwField) ||
-          form.querySelector('input[type="email"]:not([disabled])') ??
+          form.querySelector('input[type="email"]:not([disabled])') ||
           form.querySelector('input[type="text"]:not([disabled])');
 
-        const username = userField?.value?.trim() || "";
+        var username =
-        const password = pwField.value;
+          (userField && userField.value && userField.value.trim()) || "";
+        var password = pwField.value;
 
         if (!username || !password) return;
 
-        // Run duplicate check before showing the banner.
+        removeDropdown();
-        const credentialState = await classifyCredentials(username, password);
+
+        var credentialState = await classifyCredentials(username, password);
         console.log(
           "[PassKeeper] Credential state for",
           location.hostname,
-          "→",
+          "\u2192",
           credentialState,
         );
 
-        if (credentialState === "same") {
+        if (credentialState === "same") return;
-          // Credentials unchanged — silently skip.
-          return;
-        }
 
-        setTimeout(
+        setTimeout(function () {
-          () => showSaveBanner(username, password, credentialState),
+          showSaveBanner(username, password, credentialState);
-          500,
+        }, 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(function (el) {
-      document
+        el.removeAttribute(PK_ATTR);
-        .querySelectorAll(`[${PK_ATTR}]`)
+      });
-        .forEach((el) => el.removeAttribute(PK_ATTR));
+      document.querySelectorAll("." + PK_BTN_CLASS).forEach(function (el) {
-      document
+        el.remove();
-        .querySelectorAll(`.${PK_BTN_CLASS}`)
+      });
-        .forEach((el) => el.remove());
+      removeDropdown();
       decorateFields();
     }
     return false;
@@ -455,7 +625,7 @@
     decorateFields();
     watchSubmissions();
 
-    _formObserver = new MutationObserver(() => {
+    _formObserver = new MutationObserver(function () {
       _hasNotifiedForm = false;
       notifyFormDetected();
       decorateFields();