@blotoutio/providers-auto-form-fill-sdk 0.26.4 → 0.26.6

package/index.cjs.js

@@ -0,0 +1,222 @@
+'use strict';
+
+const formFillCountKey = 'formFillCount';
+
+const extractHighPrioritySelector = (element) => {
+    if (!element) {
+        return '';
+    }
+    const attributes = element ? element.attributes : [];
+    if (element.id) {
+        return `#${element.id}`;
+    }
+    if (element.className) {
+        return `.${element.className.split(' ').join('.')}`;
+    }
+    if (element.name) {
+        return `${element.tagName.toLowerCase()}[name="${element.name}"]`;
+    }
+    for (let i = 0; i < attributes.length; i++) {
+        if (/^data-(.+)$/.test(attributes[i].name)) {
+            return `${element.tagName.toLowerCase()}[${attributes[i].name}="${attributes[i].value}"]`;
+        }
+    }
+    if (element.tagName.toLowerCase() === 'input' && element.type) {
+        return `input[type="${element.type}"]`;
+    }
+    for (let i = 0; i < attributes.length; i++) {
+        const attrName = attributes[i].name;
+        if (attrName !== 'type') {
+            const attrValue = attributes[i].value;
+            return `${element.tagName.toLowerCase()}[${attrName}="${attrValue}"]`;
+        }
+    }
+    return element.tagName.toLowerCase();
+};
+const extractFields = (formSelector) => {
+    const data = [];
+    const formElement = document.querySelector(formSelector);
+    const selectElements = formElement === null || formElement === void 0 ? void 0 : formElement.querySelectorAll('select');
+    selectElements === null || selectElements === void 0 ? void 0 : selectElements.forEach((selectElement) => {
+        const selectValue = selectElement.value;
+        const selectSelector = extractHighPrioritySelector(selectElement);
+        if (selectValue && selectSelector) {
+            data.push({
+                selector: selectSelector,
+                value: selectValue,
+            });
+        }
+    });
+    const inputElements = formElement === null || formElement === void 0 ? void 0 : formElement.querySelectorAll('input');
+    inputElements === null || inputElements === void 0 ? void 0 : inputElements.forEach((inputElement) => {
+        if (inputElement.type === 'password' ||
+            inputElement.type === 'file' ||
+            inputElement.type === 'button' ||
+            inputElement.type === 'hidden' ||
+            inputElement.type === 'image' ||
+            inputElement.type === 'submit') {
+            return;
+        }
+        const inputValue = inputElement.type === 'radio' || inputElement.type === 'checkbox'
+            ? inputElement.checked
+            : inputElement.value;
+        const inputSelector = extractHighPrioritySelector(inputElement);
+        if (inputValue && inputSelector) {
+            data.push({
+                selector: inputSelector,
+                value: inputValue,
+            });
+        }
+    });
+    const textAreaElements = formElement === null || formElement === void 0 ? void 0 : formElement.querySelectorAll('textarea');
+    textAreaElements === null || textAreaElements === void 0 ? void 0 : textAreaElements.forEach((textAreaElement) => {
+        const textAreaValue = textAreaElement.value;
+        const textAreaSelector = extractHighPrioritySelector(textAreaElement);
+        if (textAreaValue && textAreaSelector) {
+            data.push({
+                selector: textAreaSelector,
+                value: textAreaValue,
+            });
+        }
+    });
+    return JSON.stringify(data);
+};
+const updateFormFields = (formSelector, keys, cachedKvData) => {
+    try {
+        formSelector = formSelector.trim();
+        const formElement = document.querySelector(formSelector);
+        const formattedSelector = `AUTO_FILL_${formSelector}`;
+        if (!formSelector ||
+            !formElement ||
+            !(formattedSelector in { ...keys, ...cachedKvData })) {
+            return false;
+        }
+        const isDataCached = Object.keys(cachedKvData).includes(formattedSelector);
+        const fields = isDataCached
+            ? JSON.parse(cachedKvData[formattedSelector].toString())
+            : JSON.parse(keys[formattedSelector].toString());
+        if (!fields || !fields.length) {
+            return false;
+        }
+        fields.forEach((field) => {
+            const element = formElement === null || formElement === void 0 ? void 0 : formElement.querySelector(field.selector);
+            if (element) {
+                if ((element.tagName.toLowerCase() === 'input' &&
+                    element.type === 'checkbox') ||
+                    element.type === 'radio') {
+                    ;
+                    element.checked = field.value;
+                }
+                else {
+                    element.value = field.value;
+                }
+            }
+        });
+        return true;
+    }
+    catch (e) {
+        console.log(`Unable to auto fill the form with selector ${formSelector.trim()}`);
+        console.error(e);
+        return false;
+    }
+};
+const getFormattedSelectorName = (selector) => {
+    return `AUTO_FILL_${selector}`;
+};
+
+const sendAutoFillCountToWorker = (successCount, getEdgeData, sendEdgeData) => {
+    if (successCount) {
+        getEdgeData([formFillCountKey], (keys) => {
+            if (!isNaN(parseInt(keys[formFillCountKey]))) {
+                successCount = successCount + parseInt(keys[formFillCountKey]);
+            }
+            sendEdgeData({ [formFillCountKey]: successCount.toString() }, {}, { method: 'beacon' });
+        });
+    }
+};
+const init = (params) => {
+    const { manifest, getEdgeData, sendEdgeData, keyName } = params;
+    try {
+        if (!manifest ||
+            !manifest.variables ||
+            !manifest.variables['formSelectors']) {
+            return;
+        }
+        const formSelectors = JSON.parse(manifest.variables['formSelectors']);
+        if (!formSelectors || !formSelectors.length) {
+            console.error('Enter a valid form selectors to auto-fill');
+            return;
+        }
+        // forms which are present in curr page
+        const curFormSelectors = formSelectors.filter((item) => item && document.querySelector(item) != null);
+        if (!curFormSelectors.length) {
+            return;
+        }
+        const formattedSelectors = curFormSelectors.map((item) => getFormattedSelectorName(item));
+        const sessionData = JSON.parse(sessionStorage.getItem(keyName) || '{}');
+        const kvData = sessionData && 'kv' in sessionData ? sessionData['kv'] : {};
+        const formSelectorsWOCache = formattedSelectors.filter((formSelector) => !Object.keys(kvData).includes(formSelector));
+        let successCount = 0;
+        if (formSelectorsWOCache.length) {
+            getEdgeData(formSelectorsWOCache, (keys) => {
+                curFormSelectors.forEach((formSelector) => {
+                    var _a;
+                    const result = updateFormFields(formSelector, keys, kvData);
+                    successCount = successCount + (result === true ? 1 : 0);
+                    const formattedSelector = `AUTO_FILL_${formSelector}`;
+                    // storing the form data in session if the form gets successfully auto-filled
+                    if (formattedSelector in keys && result === true) {
+                        const curSessionData = JSON.parse(sessionStorage.getItem(keyName) || '{}');
+                        const curKvData = (_a = curSessionData['kv']) !== null && _a !== void 0 ? _a : {};
+                        sessionStorage.setItem(keyName, JSON.stringify({
+                            ...curSessionData,
+                            kv: {
+                                ...curKvData,
+                                [formattedSelector]: keys[formattedSelector].toString(),
+                            },
+                        }));
+                    }
+                });
+                sendAutoFillCountToWorker(successCount, getEdgeData, sendEdgeData);
+            });
+        }
+        else {
+            curFormSelectors.forEach((formSelector) => {
+                const result = updateFormFields(formSelector, {}, kvData);
+                successCount = successCount + (result === true ? 1 : 0);
+            });
+            sendAutoFillCountToWorker(successCount, getEdgeData, sendEdgeData);
+        }
+        curFormSelectors.forEach((formSelector) => {
+            const element = document.querySelector(formSelector);
+            if (element) {
+                element.addEventListener('submit', () => {
+                    const formData = extractFields(formSelector);
+                    const formattedSelector = getFormattedSelectorName(formSelector);
+                    sendEdgeData({ [formattedSelector]: formData }, {}, { method: 'beacon' });
+                });
+            }
+        });
+    }
+    catch (e) {
+        console.error(e);
+    }
+};
+
+const data = {
+    name: 'autoFormFill',
+    init,
+};
+try {
+    if (window) {
+        if (!window.edgetagProviders) {
+            window.edgetagProviders = [];
+        }
+        window.edgetagProviders.push(data);
+    }
+}
+catch {
+    // No window
+}
+
+module.exports = data;

package/index.mjs

@@ -0,0 +1,220 @@
+const formFillCountKey = 'formFillCount';
+
+const extractHighPrioritySelector = (element) => {
+    if (!element) {
+        return '';
+    }
+    const attributes = element ? element.attributes : [];
+    if (element.id) {
+        return `#${element.id}`;
+    }
+    if (element.className) {
+        return `.${element.className.split(' ').join('.')}`;
+    }
+    if (element.name) {
+        return `${element.tagName.toLowerCase()}[name="${element.name}"]`;
+    }
+    for (let i = 0; i < attributes.length; i++) {
+        if (/^data-(.+)$/.test(attributes[i].name)) {
+            return `${element.tagName.toLowerCase()}[${attributes[i].name}="${attributes[i].value}"]`;
+        }
+    }
+    if (element.tagName.toLowerCase() === 'input' && element.type) {
+        return `input[type="${element.type}"]`;
+    }
+    for (let i = 0; i < attributes.length; i++) {
+        const attrName = attributes[i].name;
+        if (attrName !== 'type') {
+            const attrValue = attributes[i].value;
+            return `${element.tagName.toLowerCase()}[${attrName}="${attrValue}"]`;
+        }
+    }
+    return element.tagName.toLowerCase();
+};
+const extractFields = (formSelector) => {
+    const data = [];
+    const formElement = document.querySelector(formSelector);
+    const selectElements = formElement === null || formElement === void 0 ? void 0 : formElement.querySelectorAll('select');
+    selectElements === null || selectElements === void 0 ? void 0 : selectElements.forEach((selectElement) => {
+        const selectValue = selectElement.value;
+        const selectSelector = extractHighPrioritySelector(selectElement);
+        if (selectValue && selectSelector) {
+            data.push({
+                selector: selectSelector,
+                value: selectValue,
+            });
+        }
+    });
+    const inputElements = formElement === null || formElement === void 0 ? void 0 : formElement.querySelectorAll('input');
+    inputElements === null || inputElements === void 0 ? void 0 : inputElements.forEach((inputElement) => {
+        if (inputElement.type === 'password' ||
+            inputElement.type === 'file' ||
+            inputElement.type === 'button' ||
+            inputElement.type === 'hidden' ||
+            inputElement.type === 'image' ||
+            inputElement.type === 'submit') {
+            return;
+        }
+        const inputValue = inputElement.type === 'radio' || inputElement.type === 'checkbox'
+            ? inputElement.checked
+            : inputElement.value;
+        const inputSelector = extractHighPrioritySelector(inputElement);
+        if (inputValue && inputSelector) {
+            data.push({
+                selector: inputSelector,
+                value: inputValue,
+            });
+        }
+    });
+    const textAreaElements = formElement === null || formElement === void 0 ? void 0 : formElement.querySelectorAll('textarea');
+    textAreaElements === null || textAreaElements === void 0 ? void 0 : textAreaElements.forEach((textAreaElement) => {
+        const textAreaValue = textAreaElement.value;
+        const textAreaSelector = extractHighPrioritySelector(textAreaElement);
+        if (textAreaValue && textAreaSelector) {
+            data.push({
+                selector: textAreaSelector,
+                value: textAreaValue,
+            });
+        }
+    });
+    return JSON.stringify(data);
+};
+const updateFormFields = (formSelector, keys, cachedKvData) => {
+    try {
+        formSelector = formSelector.trim();
+        const formElement = document.querySelector(formSelector);
+        const formattedSelector = `AUTO_FILL_${formSelector}`;
+        if (!formSelector ||
+            !formElement ||
+            !(formattedSelector in { ...keys, ...cachedKvData })) {
+            return false;
+        }
+        const isDataCached = Object.keys(cachedKvData).includes(formattedSelector);
+        const fields = isDataCached
+            ? JSON.parse(cachedKvData[formattedSelector].toString())
+            : JSON.parse(keys[formattedSelector].toString());
+        if (!fields || !fields.length) {
+            return false;
+        }
+        fields.forEach((field) => {
+            const element = formElement === null || formElement === void 0 ? void 0 : formElement.querySelector(field.selector);
+            if (element) {
+                if ((element.tagName.toLowerCase() === 'input' &&
+                    element.type === 'checkbox') ||
+                    element.type === 'radio') {
+                    ;
+                    element.checked = field.value;
+                }
+                else {
+                    element.value = field.value;
+                }
+            }
+        });
+        return true;
+    }
+    catch (e) {
+        console.log(`Unable to auto fill the form with selector ${formSelector.trim()}`);
+        console.error(e);
+        return false;
+    }
+};
+const getFormattedSelectorName = (selector) => {
+    return `AUTO_FILL_${selector}`;
+};
+
+const sendAutoFillCountToWorker = (successCount, getEdgeData, sendEdgeData) => {
+    if (successCount) {
+        getEdgeData([formFillCountKey], (keys) => {
+            if (!isNaN(parseInt(keys[formFillCountKey]))) {
+                successCount = successCount + parseInt(keys[formFillCountKey]);
+            }
+            sendEdgeData({ [formFillCountKey]: successCount.toString() }, {}, { method: 'beacon' });
+        });
+    }
+};
+const init = (params) => {
+    const { manifest, getEdgeData, sendEdgeData, keyName } = params;
+    try {
+        if (!manifest ||
+            !manifest.variables ||
+            !manifest.variables['formSelectors']) {
+            return;
+        }
+        const formSelectors = JSON.parse(manifest.variables['formSelectors']);
+        if (!formSelectors || !formSelectors.length) {
+            console.error('Enter a valid form selectors to auto-fill');
+            return;
+        }
+        // forms which are present in curr page
+        const curFormSelectors = formSelectors.filter((item) => item && document.querySelector(item) != null);
+        if (!curFormSelectors.length) {
+            return;
+        }
+        const formattedSelectors = curFormSelectors.map((item) => getFormattedSelectorName(item));
+        const sessionData = JSON.parse(sessionStorage.getItem(keyName) || '{}');
+        const kvData = sessionData && 'kv' in sessionData ? sessionData['kv'] : {};
+        const formSelectorsWOCache = formattedSelectors.filter((formSelector) => !Object.keys(kvData).includes(formSelector));
+        let successCount = 0;
+        if (formSelectorsWOCache.length) {
+            getEdgeData(formSelectorsWOCache, (keys) => {
+                curFormSelectors.forEach((formSelector) => {
+                    var _a;
+                    const result = updateFormFields(formSelector, keys, kvData);
+                    successCount = successCount + (result === true ? 1 : 0);
+                    const formattedSelector = `AUTO_FILL_${formSelector}`;
+                    // storing the form data in session if the form gets successfully auto-filled
+                    if (formattedSelector in keys && result === true) {
+                        const curSessionData = JSON.parse(sessionStorage.getItem(keyName) || '{}');
+                        const curKvData = (_a = curSessionData['kv']) !== null && _a !== void 0 ? _a : {};
+                        sessionStorage.setItem(keyName, JSON.stringify({
+                            ...curSessionData,
+                            kv: {
+                                ...curKvData,
+                                [formattedSelector]: keys[formattedSelector].toString(),
+                            },
+                        }));
+                    }
+                });
+                sendAutoFillCountToWorker(successCount, getEdgeData, sendEdgeData);
+            });
+        }
+        else {
+            curFormSelectors.forEach((formSelector) => {
+                const result = updateFormFields(formSelector, {}, kvData);
+                successCount = successCount + (result === true ? 1 : 0);
+            });
+            sendAutoFillCountToWorker(successCount, getEdgeData, sendEdgeData);
+        }
+        curFormSelectors.forEach((formSelector) => {
+            const element = document.querySelector(formSelector);
+            if (element) {
+                element.addEventListener('submit', () => {
+                    const formData = extractFields(formSelector);
+                    const formattedSelector = getFormattedSelectorName(formSelector);
+                    sendEdgeData({ [formattedSelector]: formData }, {}, { method: 'beacon' });
+                });
+            }
+        });
+    }
+    catch (e) {
+        console.error(e);
+    }
+};
+
+const data = {
+    name: 'autoFormFill',
+    init,
+};
+try {
+    if (window) {
+        if (!window.edgetagProviders) {
+            window.edgetagProviders = [];
+        }
+        window.edgetagProviders.push(data);
+    }
+}
+catch {
+    // No window
+}
+
+export { data as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotoutio/providers-auto-form-fill-sdk",
-  "version": "0.26.4",
+  "version": "0.26.6",
   "description": "Auto Form Fill Browser SDK for EdgeTag",
   "author": "Blotout",
   "license": "MIT",
@@ -8,13 +8,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "./index.js",
+  "main": "./index.cjs.js",
+  "module": "./index.mjs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/blotoutio/edgetag-sdk.git"
   },
   "files": [
     "index.js",
+    "index.cjs.js",
+    "index.mjs",
     "package.json",
     "README.md"
   ]