@blotoutio/providers-auto-form-fill-sdk 0.8.0

package/README.md

@@ -0,0 +1,3 @@
+# EdgeTag Auto Form Fill adapter
+
+More info on https://app.edgetag.io/docs

package/index.js

@@ -0,0 +1,192 @@
+var ProvidersAutoFormFillSdk = (function () {
+    '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 Object.assign(Object.assign({}, 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 isDataCached ? false : 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 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;
+            }
+            const formattedSelectors = formSelectors.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;
+            getEdgeData([...formSelectorsWOCache, formFillCountKey], (keys) => {
+                formSelectors.forEach((formSelector) => {
+                    const result = updateFormFields(formSelector, keys, kvData);
+                    successCount = successCount + (result === true ? 1 : 0);
+                });
+                if (successCount) {
+                    if (!isNaN(parseInt(keys[formFillCountKey]))) {
+                        successCount = successCount + parseInt(keys[formFillCountKey]);
+                    }
+                    sendEdgeData({ [formFillCountKey]: successCount.toString() }, {}, { method: 'beacon' });
+                }
+            });
+            formSelectors.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 (_a) {
+        // No window
+    }
+
+    return data;
+
+})();

package/package.json

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