@protontech/autofill 0.0.22991789 → 0.0.33835493

package/utils/credit-card.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/credit-card.spec.js

@@ -0,0 +1,296 @@
+import { formatExpirationDate, getExpirationFormat, getInputExpirationMonthFormat, getSelectExpirationMonthFormat, getSelectExpirationYearFormat } from "./credit-card";
+Object.defineProperty(HTMLElement.prototype, "innerText", {
+    get() {
+        return this.textContent;
+    },
+});
+describe("CC Expiration Detection", () => {
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+    describe("Pattern Detection", () => {
+        test.each([
+            { pattern: "\\d{2}/\\d{2}", expected: { separator: "/", fullYear: false, monthFirst: true } },
+            { pattern: "[0-9]{2}/[0-9]{2}", expected: { separator: "/", fullYear: false, monthFirst: true } },
+            { pattern: "(0[1-9]|1[0-2])\\/[0-9]{2}", expected: { separator: "/", fullYear: false, monthFirst: true } },
+            { pattern: "\\d{2}/\\d{4}", expected: { separator: "/", fullYear: true, monthFirst: true } },
+            { pattern: "[0-9]{2}/[0-9]{4}", expected: { separator: "/", fullYear: true, monthFirst: true } },
+            { pattern: "(0[1-9]|1[0-2])\\/[0-9]{4}", expected: { separator: "/", fullYear: true, monthFirst: true } },
+            { pattern: "\\d{2}-\\d{2}", expected: { separator: "-", fullYear: false, monthFirst: true } },
+            { pattern: "[0-9]{2}-[0-9]{2}", expected: { separator: "-", fullYear: false, monthFirst: true } },
+            { pattern: "\\d{2}-\\d{4}", expected: { separator: "-", fullYear: true, monthFirst: true } },
+            { pattern: "[0-9]{2}-[0-9]{4}", expected: { separator: "-", fullYear: true, monthFirst: true } },
+            { pattern: "\\d{4}", expected: { separator: "", fullYear: false, monthFirst: true } },
+            { pattern: "[0-9]{4}", expected: { separator: "", fullYear: false, monthFirst: true } },
+            { pattern: "\\d{6}", expected: { separator: "", fullYear: true, monthFirst: true } },
+            { pattern: "[0-9]{6}", expected: { separator: "", fullYear: true, monthFirst: true } },
+            { pattern: "\\d{2}/\\d{2}", expected: { separator: "/", fullYear: false, monthFirst: true } },
+        ])("should detect pattern $pattern", ({ pattern, expected }) => {
+            const input = document.createElement("input");
+            input.pattern = pattern;
+            expect(getExpirationFormat(input)).toEqual(expected);
+        });
+        test.each([{ pattern: "[invalid regex" }, { pattern: "*+?" }, { pattern: "(" }, { pattern: "[" }])("should handle invalid regex pattern: $pattern", ({ pattern }) => {
+            const input = document.createElement("input");
+            input.pattern = pattern;
+            expect(getExpirationFormat(input)).toEqual({ separator: "/", fullYear: false, monthFirst: true });
+        });
+    });
+    describe("MaxLength Detection", () => {
+        test.each([
+            { maxLength: 4, expected: { separator: "", fullYear: false, monthFirst: true } },
+            { maxLength: 5, expected: { separator: "/", fullYear: false, monthFirst: true } },
+            { maxLength: 6, expected: { separator: "", fullYear: true, monthFirst: true } },
+            { maxLength: 7, expected: { separator: "/", fullYear: true, monthFirst: true } },
+        ])("should detect maxLength $maxLength", ({ maxLength, expected }) => {
+            const input = document.createElement("input");
+            input.maxLength = maxLength;
+            const result = getExpirationFormat(input);
+            expect(result).toEqual(expected);
+        });
+        test.each([{ maxLength: 1 }, { maxLength: 2 }, { maxLength: 3 }, { maxLength: 8 }, { maxLength: 10 }])("should return default for unmapped maxLength: $maxLength", ({ maxLength }) => {
+            const input = document.createElement("input");
+            input.maxLength = maxLength;
+            expect(getExpirationFormat(input)).toEqual({ separator: "/", fullYear: false, monthFirst: true });
+        });
+    });
+    describe("Attribute Detection", () => {
+        test.each([
+            { attr: "placeholder", value: "MM/YY", expected: { separator: "/", fullYear: false, monthFirst: true } },
+            { attr: "placeholder", value: "MM/YYYY", expected: { separator: "/", fullYear: true, monthFirst: true } },
+            { attr: "placeholder", value: "MM-YY", expected: { separator: "-", fullYear: false, monthFirst: true } },
+            { attr: "placeholder", value: "MM-YYYY", expected: { separator: "-", fullYear: true, monthFirst: true } },
+            { attr: "placeholder", value: "MM YY", expected: { separator: "", fullYear: false, monthFirst: true } },
+            { attr: "placeholder", value: "MM YYYY", expected: { separator: "", fullYear: true, monthFirst: true } },
+            { attr: "placeholder", value: "MMYY", expected: { separator: "", fullYear: false, monthFirst: true } },
+            { attr: "placeholder", value: "MMYYYY", expected: { separator: "", fullYear: true, monthFirst: true } },
+            { attr: "placeholder", value: "YY/MM", expected: { separator: "/", fullYear: false, monthFirst: false } },
+            { attr: "placeholder", value: "YYYY/MM", expected: { separator: "/", fullYear: true, monthFirst: false } },
+            { attr: "placeholder", value: "YY-MM", expected: { separator: "-", fullYear: false, monthFirst: false } },
+            { attr: "placeholder", value: "YYYY-MM", expected: { separator: "-", fullYear: true, monthFirst: false } },
+            { attr: "placeholder", value: "YY MM", expected: { separator: "", fullYear: false, monthFirst: false } },
+            { attr: "placeholder", value: "YYYY MM", expected: { separator: "", fullYear: true, monthFirst: false } },
+            { attr: "placeholder", value: "YYMM", expected: { separator: "", fullYear: false, monthFirst: false } },
+            { attr: "placeholder", value: "YYYYMM", expected: { separator: "", fullYear: true, monthFirst: false } },
+            { attr: "placeholder", value: "MM/AA", expected: { separator: "/", fullYear: false, monthFirst: true } },
+            { attr: "placeholder", value: "MM/AAAA", expected: { separator: "/", fullYear: true, monthFirst: true } },
+            { attr: "placeholder", value: "AA/MM", expected: { separator: "/", fullYear: false, monthFirst: false } },
+            { attr: "placeholder", value: "AAAA/MM", expected: { separator: "/", fullYear: true, monthFirst: false } },
+            { attr: "name", value: "exp-mm-yyyy", expected: { separator: "-", fullYear: true, monthFirst: true } },
+            { attr: "id", value: "cardExpMmYy", expected: { separator: "", fullYear: false, monthFirst: true } },
+            { attr: "className", value: "exp-field mm/yyyy-format", expected: { separator: "/", fullYear: true, monthFirst: true } },
+        ])('should detect $attr="$value"', ({ attr, value, expected }) => {
+            const input = document.createElement("input");
+            if (attr === "className")
+                input.className = value;
+            else
+                input.setAttribute(attr, value);
+            expect(getExpirationFormat(input)).toEqual(expected);
+        });
+        test.each([{ value: "Enter expiration MM/YY date" }, { value: "Card expires MM/YYYY" }, { value: "exp_field_mm_yyyy_format" }, { value: "EXPIRY DATE (MM/YY)" }, { value: "Please enter MM-YYYY" }])('should detect format in mixed text: "$value"', ({ value }) => {
+            const input = document.createElement("input");
+            input.placeholder = value;
+            const result = getExpirationFormat(input);
+            expect(result === null || result === void 0 ? void 0 : result.separator).toBeDefined();
+            expect(result === null || result === void 0 ? void 0 : result.fullYear).toBeDefined();
+            expect(result === null || result === void 0 ? void 0 : result.monthFirst).toBeDefined();
+        });
+        test.each([{ value: "email@example.com" }, { value: "Enter your name" }, { value: "Phone number" }, { value: "Address line 1" }, { value: "" }, { value: "XYZZYX" }])('should return default for non-expiry text: "$value"', ({ value }) => {
+            const input = document.createElement("input");
+            input.placeholder = value;
+            const result = getExpirationFormat(input);
+            expect(result).toEqual({ separator: "/", fullYear: false, monthFirst: true });
+        });
+    });
+    describe("getExpirationFormat - Priority Order", () => {
+        test("should prioritize attributes over pattern", () => {
+            const input = document.createElement("input");
+            input.placeholder = "MM-YYYY";
+            input.pattern = "\\d{2}/\\d{2}";
+            const result = getExpirationFormat(input);
+            expect(result).toEqual({ separator: "-", fullYear: true, monthFirst: true });
+        });
+        test("should prioritize pattern over maxLength", () => {
+            const input = document.createElement("input");
+            input.pattern = "\\d{2}-\\d{4}";
+            input.maxLength = 5;
+            const result = getExpirationFormat(input);
+            expect(result).toEqual({ separator: "-", fullYear: true, monthFirst: true });
+        });
+        test("should use maxLength when no attributes or pattern", () => {
+            const input = document.createElement("input");
+            input.maxLength = 7;
+            const result = getExpirationFormat(input);
+            expect(result).toEqual({ separator: "/", fullYear: true, monthFirst: true });
+        });
+        test("should use default when no indicators present", () => {
+            const input = document.createElement("input");
+            const result = getExpirationFormat(input);
+            expect(result).toEqual({ separator: "/", fullYear: false, monthFirst: true });
+        });
+        test("should handle outliers", () => {
+            const input = document.createElement("input");
+            input.pattern = "[-+]?[0-9]*[.,]?[0-9]+";
+            input.maxLength = 2;
+            input.autocomplete = "cc-exp-month";
+            input.ariaLabel = "month";
+            const result = getExpirationFormat(input, false);
+            expect(result).toEqual(undefined);
+        });
+        test("coursera.org > cc-exp format", () => {
+            document.body.innerHTML = `<div data-field="expiry" class="p-Field"><label class="p-FieldLabel Label Label--empty" for="Field-expiryInput">Expiration date<span class="FadeWrapper"></span><span class="u-visually-hidden"> MM / YY</span></label><div><div><div class="p-Input"><input dir="ltr" type="text" inputmode="numeric" name="expiry" id="Field-expiryInput" placeholder="MM / YY" autocomplete="cc-exp" aria-invalid="false" aria-describedby="Field-expiryError" aria-required="true" class="p-Input-input p-Fieldset-input Input Input--empty p-Input-input--textRight" value=""></div></div></div><div class="AnimateSinglePresence"></div></div>`;
+            const field = document.querySelector("select, input");
+            expect(getExpirationFormat(field, true)).toEqual({ fullYear: false, monthFirst: true, separator: "/" });
+        });
+    });
+    describe("getInputExpirationMonthFormat", () => {
+        test("tesco.com > padded cc-exp-month", () => {
+            document.body.innerHTML = `<fieldset class="Form__Fieldset-sc-1rpc86b-1 fKhXDo"><legend class="Label-sc-1wdkkfu-0 cEywXb ddl-label has-error">Expiry date</legend><label for="card-expiry-month" hidden="" class="Label-sc-1wdkkfu-0 mZWly sf-hidden">month</label><input type="tel" data-auto="card-expiry-month" name="expiryMonth" id="card-expiry-month" placeholder="MM" maxlength="2" aria-required="true" data-rule="expiryMonthRule" class="Input-sc-gj7hrn-1 expiry-date__ExpiryInput-sc-m6yl5f-0 bSmREw eDVddD has-error" data-errored="true" value="1"><span aria-hidden="true" class="expiry-date__ExpirySeparator-sc-m6yl5f-1 huzqtm">/</span></div></fieldset>`;
+            const field = document.querySelector("select, input");
+            expect(getInputExpirationMonthFormat(field)).toEqual({ padding: true });
+        });
+        test("orange.md > padded cc-exp-month", () => {
+            document.body.innerHTML = `<input name="validMONTH" id="expmonth" class="exp-input numberOnly" maxlength="2" tabindex="1" type="tel" placeholder="LL" required="" style="margin-right:10px" value="">`;
+            const field = document.querySelector("select, input");
+            expect(getInputExpirationMonthFormat(field)).toEqual({ padding: true });
+        });
+        test("iticket.md > padded cc-exp-month", () => {
+            document.body.innerHTML = `<div class="col-xs-6"><input name="validMONTH" id="expmonth" type="text" size="7" maxlength="2" autocomplete="off" pattern="\d*" value="1" placeholder="LL"><div class="image-help" style="display:none"></div></div>`;
+            const field = document.querySelector("select, input");
+            expect(getInputExpirationMonthFormat(field)).toEqual({ padding: true });
+        });
+    });
+    describe("formatExpirationDate", () => {
+        test.each([
+            { month: "01", year: "2025", format: { separator: "/", fullYear: false, monthFirst: true }, expected: "01/25" },
+            { month: "12", year: "2025", format: { separator: "-", fullYear: false, monthFirst: true }, expected: "12-25" },
+            { month: "03", year: "2025", format: { separator: "", fullYear: false, monthFirst: true }, expected: "0325" },
+            { month: "01", year: "2025", format: { separator: "/", fullYear: true, monthFirst: true }, expected: "01/2025" },
+            { month: "12", year: "2025", format: { separator: "-", fullYear: true, monthFirst: true }, expected: "12-2025" },
+            { month: "03", year: "2025", format: { separator: "", fullYear: true, monthFirst: true }, expected: "032025" },
+            { month: "01", year: "2025", format: { separator: "/", fullYear: false, monthFirst: false }, expected: "25/01" },
+            { month: "12", year: "2025", format: { separator: "-", fullYear: false, monthFirst: false }, expected: "25-12" },
+            { month: "03", year: "2025", format: { separator: "", fullYear: false, monthFirst: false }, expected: "2503" },
+            { month: "01", year: "2025", format: { separator: "/", fullYear: true, monthFirst: false }, expected: "2025/01" },
+            { month: "12", year: "2025", format: { separator: "-", fullYear: true, monthFirst: false }, expected: "2025-12" },
+            { month: "03", year: "2025", format: { separator: "", fullYear: true, monthFirst: false }, expected: "202503" },
+        ])('should format month="$month" year="$year" with format=$format.separator$format.yearDigits$format.monthFirst to "$expected"', ({ month, year, format, expected }) => {
+            const result = formatExpirationDate(month, year, format);
+            expect(result).toBe(expected);
+        });
+        test.each([
+            { month: "1", year: "2025", format: { separator: "/", fullYear: false, monthFirst: true }, expected: "01/25" },
+            { month: "2", year: "2025", format: { separator: "/", fullYear: false, monthFirst: true }, expected: "02/25" },
+            { month: "9", year: "2025", format: { separator: "/", fullYear: false, monthFirst: true }, expected: "09/25" },
+            { month: "10", year: "2025", format: { separator: "/", fullYear: false, monthFirst: true }, expected: "10/25" },
+            { month: "11", year: "2025", format: { separator: "/", fullYear: false, monthFirst: true }, expected: "11/25" },
+            { month: "12", year: "2025", format: { separator: "/", fullYear: false, monthFirst: true }, expected: "12/25" },
+        ])('should pad single digit month "$month" to two digits', ({ month, year, format, expected }) => {
+            const result = formatExpirationDate(month, year, format);
+            expect(result).toBe(expected);
+        });
+        test.each([
+            { year: "2020", expected: "20" },
+            { year: "2025", expected: "25" },
+            { year: "2030", expected: "30" },
+            { year: "2099", expected: "99" },
+            { year: "2000", expected: "00" },
+            { year: "2001", expected: "01" },
+        ])('should extract last 2 digits from 4-digit year "$year"', ({ year, expected }) => {
+            const format = { separator: "/", fullYear: false, monthFirst: true };
+            const result = formatExpirationDate("01", year, format);
+            expect(result).toBe(`01/${expected}`);
+        });
+        test.each([
+            { year: "2020", expected: "2020" },
+            { year: "2025", expected: "2025" },
+            { year: "2030", expected: "2030" },
+            { year: "2099", expected: "2099" },
+        ])('should keep all 4 digits for 4-digit year format "$year"', ({ year, expected }) => {
+            const format = { separator: "/", fullYear: true, monthFirst: true };
+            const result = formatExpirationDate("01", year, format);
+            expect(result).toBe(`01/${expected}`);
+        });
+    });
+    describe("Edge Cases and Integration", () => {
+        test("should handle case-insensitive attribute detection", () => {
+            const input = document.createElement("input");
+            input.placeholder = "mm/yyyy";
+            const result = getExpirationFormat(input);
+            expect(result).toEqual({ separator: "/", fullYear: true, monthFirst: true });
+        });
+        test("should combine multiple attributes", () => {
+            const input = document.createElement("input");
+            input.name = "expiry";
+            input.className = "mm-yyyy-format";
+            input.placeholder = "Enter MM-YYYY";
+            const result = getExpirationFormat(input);
+            expect(result === null || result === void 0 ? void 0 : result.separator).toBe("-");
+            expect(result === null || result === void 0 ? void 0 : result.fullYear).toBe(true);
+            expect(result === null || result === void 0 ? void 0 : result.monthFirst).toBe(true);
+        });
+        test("should handle whitespace in attributes", () => {
+            const input = document.createElement("input");
+            input.placeholder = "  MM / YYYY  ";
+            const result = getExpirationFormat(input);
+            expect(result === null || result === void 0 ? void 0 : result.separator).toBe("/");
+        });
+        test("should prefer first match when multiple formats present", () => {
+            const input = document.createElement("input");
+            input.placeholder = "MM/YY or MM-YYYY";
+            const result = getExpirationFormat(input);
+            expect(result === null || result === void 0 ? void 0 : result.separator).toBe("/");
+            expect(result === null || result === void 0 ? void 0 : result.fullYear).toBe(false);
+        });
+    });
+    describe("getSelectExpirationYearFormat", () => {
+        test.each([
+            { options: ["2024", "2025", "2026"], expected: { fullYear: true } },
+            { options: ["2023", "2024", "2025", "2026", "2027"], expected: { fullYear: true } },
+            { options: ["24", "25", "26"], expected: { fullYear: false } },
+            { options: ["23", "24", "25", "26", "27"], expected: { fullYear: false } },
+        ])("should detect format from options $options", ({ options, expected }) => {
+            const select = document.createElement("select");
+            options.forEach((value) => {
+                const option = document.createElement("option");
+                option.value = value;
+                select.appendChild(option);
+            });
+            expect(getSelectExpirationYearFormat(select)).toEqual(expected);
+        });
+        test.each([{ options: [] }, { options: ["", ""] }, { options: ["Select year", "Choose..."] }, { options: ["abc", "def"] }])("should noop for invalid options $options", ({ options }) => {
+            const select = document.createElement("select");
+            options.forEach((value) => {
+                const option = document.createElement("option");
+                option.value = value;
+                select.appendChild(option);
+            });
+            expect(getSelectExpirationYearFormat(select)).toBeUndefined();
+        });
+    });
+    describe("getSelectExpirationMonthFormat", () => {
+        test.each([
+            { options: ["01", "02", "03", "04", "05", "06"], expected: { padding: true } },
+            { options: ["01", "09", "10", "11", "12"], expected: { padding: true } },
+            { options: ["1", "2", "3", "4", "5", "6"], expected: { padding: false } },
+            { options: ["1", "9", "10", "11", "12"], expected: { padding: false } },
+        ])("should detect format from options $options", ({ options, expected }) => {
+            const select = document.createElement("select");
+            options.forEach((value) => {
+                const option = document.createElement("option");
+                option.value = value;
+                select.appendChild(option);
+            });
+            expect(getSelectExpirationMonthFormat(select)).toEqual(expected);
+        });
+        test.each([{ options: [] }, { options: ["", ""] }, { options: ["Select month", "Choose..."] }, { options: ["abc", "def"] }])("should return noop for invalid options $options", ({ options }) => {
+            const select = document.createElement("select");
+            options.forEach((value) => {
+                const option = document.createElement("option");
+                option.value = value;
+                select.appendChild(option);
+            });
+            expect(getSelectExpirationMonthFormat(select)).toBeUndefined();
+        });
+    });
+});

package/utils/dom.d.ts

@@ -1,5 +1,5 @@
 export declare const closestParent: (start: HTMLElement, match: (el: HTMLElement) => boolean) => HTMLElement | null;
-export declare const closest: (start: HTMLElement, match: (parent: HTMLElement) => HTMLElement | null, maxIterations?: number) => HTMLElement | null;
+export declare const parentQuery: (start: HTMLElement, match: (parent: HTMLElement) => HTMLElement | null, maxIterations?: number) => HTMLElement | null;
 export declare const walkUpWhile: (start: HTMLElement, maxIterations: number) => (check: (parent: HTMLElement, candidate: HTMLElement) => boolean) => HTMLElement;
 export declare const getNthParent: (el: HTMLElement) => (n: number) => HTMLElement;
 export declare const uniqueNodes: (...nodes: HTMLElement[][]) => HTMLElement[];
@@ -10,7 +10,8 @@ export declare const getNodeRect: (el: HTMLElement) => {
     bottom: number;
     area: number;
 };
-export declare const getSiblingWith: (el: Element, match: (el: Element) => boolean) => Element | null;
+export declare const matchPreviousSibling: (el: Element, match: (el: Element) => boolean) => Element | null;
+export declare const matchPreviousNonEmptySibling: (el: Element) => Element | null;
 export declare const getLabelFor: (el: HTMLElement) => HTMLElement | null;
 export declare const getRectCenter: (rect: DOMRect) => {
     x: number;

package/utils/dom.js

@@ -1,15 +1,16 @@
+import { kFieldLabelSelector } from "@protontech/autofill/constants/selectors";
 export const closestParent = (start, match) => {
     const parent = start.parentElement;
     if (!parent)
         return null;
     return match(parent) ? parent : closestParent(parent, match);
 };
-export const closest = (start, match, maxIterations = 1) => {
+export const parentQuery = (start, match, maxIterations = 1) => {
     const parent = start === null || start === void 0 ? void 0 : start.parentElement;
     if (!parent)
         return null;
     const result = match(parent);
-    return result || maxIterations <= 0 ? result : closest(parent, match, maxIterations - 1);
+    return result || maxIterations <= 0 ? result : parentQuery(parent, match, maxIterations - 1);
 };
 export const walkUpWhile = (start, maxIterations) => (check) => {
     const parent = start.parentElement;
@@ -27,14 +28,15 @@ export const getNodeRect = (el) => {
     const area = height * width;
     return { height, width, top, bottom, area };
 };
-export const getSiblingWith = (el, match) => {
+export const matchPreviousSibling = (el, match) => {
     const prevEl = el.previousElementSibling;
     if (prevEl === null)
         return null;
     if (match(prevEl))
         return prevEl;
-    return getSiblingWith(prevEl, match);
+    return matchPreviousSibling(prevEl, match);
 };
+export const matchPreviousNonEmptySibling = (el) => matchPreviousSibling(el, (el) => el instanceof HTMLElement && el.innerText.trim().length > 0);
 export const getLabelFor = (el) => {
     var _a;
     const forId = (_a = el.getAttribute("id")) !== null && _a !== void 0 ? _a : el.getAttribute("name");
@@ -44,10 +46,13 @@ export const getLabelFor = (el) => {
     const parentLabel = el.closest("label");
     if (parentLabel)
         return parentLabel;
-    const closestLabel = closest(el, (parent) => parent.querySelector("label, [class*=\"label\"]"), 1);
+    const closestLabel = parentQuery(el, (parent) => parent.querySelector("label:not([for])"), 1);
     if (closestLabel)
         return closestLabel;
-    const textNodeAbove = getSiblingWith(el, (el) => el instanceof HTMLElement && el.innerText.trim().length > 0);
+    const labelLike = parentQuery(el, (parent) => parent.querySelector(kFieldLabelSelector), 1);
+    if (labelLike)
+        return labelLike;
+    const textNodeAbove = matchPreviousNonEmptySibling(el);
     if (textNodeAbove)
         return textNodeAbove;
     return null;
@@ -100,5 +105,5 @@ const findStackedParent = (el, cache = [], maxIterations) => {
 };
 export const findStackedParents = (els, maxIterations) => {
     const cache = [];
-    return els.map((input) => findStackedParent(input, cache, maxIterations)).filter((el) => Boolean(el));
+    return els.map((input) => findStackedParent(input, cache, maxIterations)).filter((el) => Boolean(el && el !== document.body));
 };

package/utils/exclusion.d.ts

@@ -1,3 +1,4 @@
+export declare const isTopFrame: () => boolean;
 export declare const excludeForms: (doc?: Document) => void;
 export declare const excludeClusterableNodes: (doc?: Document) => void;
 export declare const excludeFields: (doc?: Document) => void;

package/utils/exclusion.js

@@ -1,9 +1,18 @@
-import { HIDDEN_FIELD_IGNORE_VALUES, MAX_FIELDS_PER_FORM, MAX_HIDDEN_FIELD_VALUE_LENGTH, MAX_INPUTS_PER_FORM, VALID_INPUT_TYPES, } from "../constants/heuristics";
-import { inputCandidateSelector, kEditorSelector, kFieldSelector, kHiddenUsernameSelector } from "../constants/selectors";
-import { getNodeRect } from "../utils/dom";
-import { flagAsIgnored, flagSubtreeAsIgnored, isClassifiable } from "../utils/flags";
+import { HIDDEN_FIELD_IGNORE_VALUES, MAX_FIELDS_PER_FORM, MAX_HIDDEN_FIELD_VALUE_LENGTH, MAX_INPUTS_PER_FORM, VALID_INPUT_TYPES } from "@protontech/autofill/constants/heuristics";
+import { inputCandidateSelector, kEditorSelector, kFieldSelector, kHiddenUsernameSelector } from "@protontech/autofill/constants/selectors";
+import { getNodeRect } from "./dom";
+import { flagAsIgnored, flagSubtreeAsIgnored, isClassifiable } from "./flags";
 const TABLE_MAX_COLS = 3;
 const TABLE_MAX_AREA = 150000;
+const PAGE_FORM_RATIO = 0.7;
+export const isTopFrame = () => {
+    try {
+        return window.self === window.top;
+    }
+    catch (_a) {
+        return false;
+    }
+};
 const nodeOfInterest = (el) => isClassifiable(el) && el.querySelector("input") !== null;
 export const excludeForms = (doc = document) => {
     const bodyElCount = document.body.querySelectorAll("*").length;
@@ -11,14 +20,17 @@ export const excludeForms = (doc = document) => {
         if (nodeOfInterest(form)) {
             const fieldCount = form.querySelectorAll(kFieldSelector).length;
             const inputCount = form.querySelectorAll(inputCandidateSelector).length;
-            const invalidFieldCount = inputCount === 0 || inputCount > MAX_INPUTS_PER_FORM || fieldCount > MAX_FIELDS_PER_FORM;
-            const pageForm = form.matches("body > form");
+            const iframeCount = form.querySelectorAll("iframe").length;
+            const invalidFieldCount = inputCount + iframeCount === 0 || inputCount > MAX_INPUTS_PER_FORM || fieldCount > MAX_FIELDS_PER_FORM;
+            const topFrame = isTopFrame();
             const formElCount = form.querySelectorAll("*").length;
-            const invalidPageForm = pageForm && formElCount >= bodyElCount * 0.8;
-            const invalidCount = invalidFieldCount || invalidPageForm;
-            if (invalidCount && !pageForm)
+            const pageFormMatch = topFrame && form.matches("body > form");
+            const pageFormSignal = topFrame && invalidFieldCount;
+            const pageForm = (pageFormMatch || pageFormSignal) && formElCount / bodyElCount >= PAGE_FORM_RATIO;
+            const invalidSignal = invalidFieldCount || pageForm;
+            if (invalidSignal && !pageForm)
                 return flagSubtreeAsIgnored(form);
-            if (invalidCount && pageForm)
+            if (invalidSignal && pageForm)
                 return flagAsIgnored(form);
             if (form.matches("table form") && form.closest("table").querySelectorAll("form").length > 2)
                 return flagAsIgnored(form);

package/utils/extract.d.ts

@@ -1,3 +1,4 @@
+export declare const getAutocompletes: (field: HTMLElement | HTMLSelectElement) => string[];
 export declare const getPageDescriptionText: (doc: Document) => string;
 export declare const getNodeText: (node: HTMLElement) => string;
 export declare const getNodeAttributes: (node: HTMLElement) => string;

package/utils/extract.js

@@ -1,8 +1,9 @@
+import { MAX_FORM_HEADING_WALK_UP, MAX_HEADING_HORIZONTAL_DIST, MAX_HEADING_VERTICAL_DIST } from "@protontech/autofill/constants/heuristics";
+import { kDomGroupSelector, kHeadingSelector } from "@protontech/autofill/constants/selectors";
 import { getBaseAttributes, getFieldAttributes, getTextAttributes } from "./attributes";
-import { MAX_FORM_HEADING_WALK_UP, MAX_HEADING_HORIZONTAL_DIST, MAX_HEADING_VERTICAL_DIST } from "../constants/heuristics";
-import { kDomGroupSelector, kHeadingSelector } from "../constants/selectors";
-import { getLabelFor, getRectMinDistance, getSiblingWith, walkUpWhile } from "./dom";
+import { getLabelFor, getRectMinDistance, matchPreviousNonEmptySibling, walkUpWhile } from "./dom";
 import { sanitizeString, sanitizeStringWithSpaces } from "./text";
+export const getAutocompletes = (field) => { var _a; return ((_a = field.getAttribute("autocomplete")) !== null && _a !== void 0 ? _a : "").split(/\s+/); };
 export const getPageDescriptionText = (doc) => {
     var _a;
     const pageTitle = doc.title;
@@ -35,10 +36,19 @@ export const getFieldHaystacks = (field) => {
 };
 export const getAllFieldHaystacks = (field) => {
     const { fieldAttrs, fieldText, labelText } = getFieldHaystacks(field);
-    return [fieldText, labelText, ...fieldAttrs];
+    if (field instanceof HTMLInputElement && ["checkbox", "submit", "button", "image"].includes(field.type)) {
+        if (field.value)
+            fieldAttrs.push(sanitizeString(field.value));
+        if (field.type === "image" && field.alt)
+            fieldAttrs.push(sanitizeString(field.alt));
+    }
+    const haystacks = [fieldText, labelText, ...fieldAttrs];
+    const autocomplete = field.getAttribute("autocomplete");
+    if (autocomplete)
+        haystacks.push(sanitizeString(autocomplete));
+    return haystacks;
 };
 export const getNearestHeadingsText = (el) => {
-    var _a, _b;
     const originRect = el.getBoundingClientRect();
     const parent = walkUpWhile(el, MAX_FORM_HEADING_WALK_UP)((parentEl, candidate) => {
         if (parentEl === document.body)
@@ -54,6 +64,15 @@ export const getNearestHeadingsText = (el) => {
         const { dx, dy } = getRectMinDistance(originRect, headingRect);
         return dx < MAX_HEADING_HORIZONTAL_DIST && dy < MAX_HEADING_VERTICAL_DIST;
     });
-    const textAbove = (_b = (_a = (headings.length === 0 ? getSiblingWith(el, (el) => el instanceof HTMLElement && el.innerText.trim().length > 0) : null)) === null || _a === void 0 ? void 0 : _a.innerText) !== null && _b !== void 0 ? _b : "";
-    return sanitizeString(textAbove + headings.map((el) => el.innerText).join(""));
+    const textAbove = (() => {
+        var _a, _b, _c;
+        if (headings.length > 0)
+            return headings.map((el) => el.innerText).join();
+        const prevSibling = matchPreviousNonEmptySibling(el);
+        const parentFirstChild = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        const prevSiblingText = (_b = prevSibling === null || prevSibling === void 0 ? void 0 : prevSibling.innerText) !== null && _b !== void 0 ? _b : "";
+        const parentFirstChildText = (_c = parentFirstChild === null || parentFirstChild === void 0 ? void 0 : parentFirstChild.innerText) !== null && _c !== void 0 ? _c : "";
+        return prevSibling === parentFirstChild ? prevSiblingText : prevSiblingText + parentFirstChildText;
+    })();
+    return sanitizeString(textAbove);
 };

package/utils/fathom.d.ts

@@ -1,38 +1,25 @@
-import { Fnode } from "@protontech/fathom";
-import { FormFeatures } from "../features/abstract.form";
-import { EmailFieldFeatures } from "../features/field.email";
-import { OTPFieldFeatures } from "../features/field.otp";
-import { PasswordFieldFeatures } from "../features/field.password";
-import { UsernameFieldFeatures } from "../features/field.username";
-import { HiddenUserFieldFeatures } from "../features/field.username-hidden";
-type FeatureType = "form" | "password-field" | "username-field" | "username-hidden-field" | "email-field" | "otp-field";
-type FeatureKey<T extends FeatureType> = {
-    form: FormFeatures;
-    "password-field": PasswordFieldFeatures;
-    "username-field": UsernameFieldFeatures;
-    "username-hidden-field": HiddenUserFieldFeatures;
-    "email-field": EmailFieldFeatures;
-    "otp-field": OTPFieldFeatures;
-}[T];
+import type { Fnode } from "@protontech/fathom";
+import type { AbstractFeature } from "@protontech/autofill/types";
 export declare const TOLERANCE_LEVEL = 0.5;
 export declare const boolInt: (val: boolean) => number;
 export declare const safeInt: (val: number, fallback?: number) => number;
 export declare const typeEffect: (type: string) => (fnode: Fnode) => Fnode;
 export declare const processFormEffect: (fnode: Fnode) => Fnode;
 export declare const processFieldEffect: (fnode: Fnode) => Fnode;
-export declare const featureScore: <T extends FeatureType, K = FeatureKey<T>>(noteFor: T, key: keyof K | (keyof K)[]) => any;
+type ClassNote = "form" | "new-password-field" | "password-field" | "username-field" | "username-hidden-field" | "email-field" | "otp-field";
+export declare const featureScore: <F extends AbstractFeature>(noteFor: ClassNote, feat: F) => import("@protontech/fathom").Side;
 export declare const getParentFormFnode: (fieldFnode: Fnode) => Fnode | null;
 export declare const typeScoreToleranceTest: (type: string) => (fnode: Fnode) => boolean;
-export declare const getTypeScore: (node: Fnode | null, type: string) => any;
-export declare const outRuleWithCache: (candidateType: string, predictionType: string, typeScoreTest?: (predictionType: string) => (fnode: Fnode) => boolean) => any[];
-export declare const combineFeatures: <T>(arr1: T[], arr2: T[]) => [T, T][];
-export declare const withFnodeEl: <T extends HTMLElement>(fn: (el: T) => any) => (fnode: Fnode) => any;
-export declare const getFormClassification: (formFnode: Fnode | null) => {
+export declare const getTypeScore: (node: Fnode | null, type: string) => number;
+export declare const outRuleWithCache: (candidateType: string, predictionType: string, typeScoreTest?: (predictionType: string) => (fnode: Fnode) => boolean) => (import("@protontech/fathom").OutwardRule | import("@protontech/fathom").InwardRule)[];
+export declare const withFnodeEl: (fn: (el: HTMLElement) => boolean) => (fnode: Fnode) => boolean;
+export type FormClassification = {
     login: boolean;
     register: boolean;
-    pwChange: boolean;
+    passwordChange: boolean;
     recovery: boolean;
     noop: boolean;
 };
+export declare const getFormClassification: (formFnode: Fnode | null) => FormClassification;
 export declare const isNoopForm: (formFnode: Fnode) => boolean;
 export {};

package/utils/fathom.js

@@ -1,5 +1,5 @@
 import { out, rule, score, type } from "@protontech/fathom";
-import { FormType } from "../types";
+import { FormType } from "@protontech/autofill/types";
 import { flagAsProcessed, getCachedPredictionScore, getParentFormPrediction, isPredictedType, setCachedPredictionScore } from "./flags";
 export const TOLERANCE_LEVEL = 0.5;
 export const boolInt = (val) => Number(val);
@@ -20,11 +20,9 @@ export const processFieldEffect = throughEffect((fnode) => {
     if (visible || type === "hidden")
         flagAsProcessed(fnode.element);
 });
-export const featureScore = (noteFor, key) => score((fnode) => {
-    const features = fnode.noteFor(noteFor);
-    if (Array.isArray(key))
-        return key.map((k) => features[k]).reduce((a, b) => a * b);
-    return features[key];
+export const featureScore = (noteFor, feat) => score((fnode) => {
+    const note = fnode.noteFor(noteFor);
+    return Number(note[feat.name]);
 });
 export const getParentFormFnode = (fieldFnode) => {
     const field = fieldFnode.element;
@@ -52,17 +50,14 @@ export const outRuleWithCache = (candidateType, predictionType, typeScoreTest =
     rule(type(predictionType).when(typeScoreTest(predictionType)), type(`${predictionType}-prediction`), {}),
     rule(type(`${predictionType}-prediction`), out(predictionType).through(typeEffect(predictionType)), {}),
 ];
-export const combineFeatures = (arr1, arr2) => {
-    return arr1.flatMap((item1) => arr2.map((item2) => [item1, item2]));
-};
 export const withFnodeEl = (fn) => (fnode) => fn(fnode.element);
 export const getFormClassification = (formFnode) => {
     const login = getTypeScore(formFnode, FormType.LOGIN) > 0.5;
     const register = getTypeScore(formFnode, FormType.REGISTER) > 0.5;
-    const pwChange = getTypeScore(formFnode, FormType.PASSWORD_CHANGE) > 0.5;
+    const passwordChange = getTypeScore(formFnode, FormType.PASSWORD_CHANGE) > 0.5;
     const recovery = getTypeScore(formFnode, FormType.RECOVERY) > 0.5;
-    const detectionResults = [login, register, pwChange, recovery];
+    const detectionResults = [login, register, passwordChange, recovery];
     const noop = detectionResults.every((detected) => !detected);
-    return { login, register, pwChange, recovery, noop };
+    return { login, register, passwordChange, recovery, noop };
 };
 export const isNoopForm = (formFnode) => getFormClassification(formFnode).noop;

package/utils/field.d.ts

@@ -1,14 +1,22 @@
-import { Fnode } from "@protontech/fathom";
+import type { Fnode } from "@protontech/fathom";
+import type { FieldType } from "@protontech/autofill/types";
+export type HTMLFieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export declare const isInput: (el: HTMLElement) => el is HTMLInputElement;
+export declare const isInputField: (el: HTMLElement) => el is HTMLInputElement;
+export declare const isSelect: (el: HTMLElement) => el is HTMLSelectElement;
+export declare const isTextarea: (el: HTMLElement) => el is HTMLTextAreaElement;
 export declare const splitFieldsByVisibility: (els: HTMLElement[]) => [HTMLElement[], HTMLElement[]];
+export declare const fType: (type: FieldType) => (fnode: Fnode) => boolean;
 export declare const maybeEmail: (value: Fnode) => boolean;
 export declare const maybePassword: (value: Fnode) => boolean;
 export declare const maybeOTP: (value: Fnode) => boolean;
 export declare const maybeUsername: (value: Fnode) => boolean;
 export declare const maybeHiddenUsername: (value: Fnode) => boolean;
-export declare const isUsernameCandidate: (el: HTMLElement) => boolean;
-export declare const isEmailCandidate: (el: HTMLElement) => boolean;
+export declare const isUsernameCandidate: (el: HTMLInputElement) => boolean;
+export declare const isEmailCandidate: (el: HTMLInputElement) => boolean;
 export declare const isOAuthCandidate: (el: HTMLElement) => boolean;
+export declare const isMFACandidate: (el: HTMLFieldElement) => boolean;
 export declare const isBtnCandidate: (btn: HTMLElement) => boolean;
-export declare const isProcessableField: (input: HTMLInputElement) => boolean;
+export declare const isProcessableField: (input: HTMLElement) => boolean;
 export declare const isClassifiableField: (fnode: Fnode) => boolean;
 export declare const selectInputCandidates: (target?: Document | HTMLElement) => HTMLInputElement[];