From d07df339546ec9cbdf97be8d43078fdb13b25c44 Mon Sep 17 00:00:00 2001
From: Mostafa Kheibary <mostafa.kheibary@gmail.com>
Date: Fri, 12 Apr 2024 21:21:05 +0330
Subject: [PATCH] :recycle: refactor the device detection system for event and
 selector, fix the bug for submit button

---
 docs/getting-started/installation.md          |   2 +-
 manifest.json                                 |   2 +-
 package.json                                  |   2 +-
 src/components/modules/content/Actions.svelte |  20 ++--
 src/components/modules/popup/Settings.svelte  |   2 +-
 src/config/index.ts                           | 112 ++++++++----------
 src/content/index.ts                          |  19 +--
 src/content/scripts/listeners.ts              |  93 +++++++--------
 src/content/scripts/messageParser.ts          |   6 +-
 src/hooks/useConfig.ts                        |  37 ++++++
 src/hooks/useRender.ts                        |   4 +-
 src/types/Config.d.ts                         |  22 ++--
 src/utils/elementVisibility.ts                |  10 ++
 src/utils/index.ts                            |  41 -------
 src/utils/logSelectors.ts                     |   8 --
 src/utils/userAction.ts                       |   9 +-
 16 files changed, 191 insertions(+), 198 deletions(-)
 create mode 100644 src/hooks/useConfig.ts
 create mode 100644 src/utils/elementVisibility.ts
 delete mode 100644 src/utils/logSelectors.ts

diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index 3cc630d..8535842 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -36,7 +36,7 @@ Welcome to Chat Guard for. This guide will walk you through the steps to downloa
 
 ### Sideload Extension (Using the Extension File)
 
-1. Download the extension file (usually a .zip or .crx file) from [download page](https://github.com/PrivacyForge/ChatGuard/releases/tag/v0.9.2-beta).
+1. Download the extension file (usually a .zip or .crx file) from [download page](https://github.com/PrivacyForge/ChatGuard/releases/tag/v0.9.3-beta).
 
 2. Open Chrome and go to `chrome://extensions/`.
 
diff --git a/manifest.json b/manifest.json
index ff4d5d1..6606324 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "ChatGuard-beta",
   "description": "Browser Add on that allow (End to End) encrypted in web chat messenger",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "author": "https://github.com/mostafa-kheibary",
   "icons": {
     "16": "src/assets/icons/icon16.png",
diff --git a/package.json b/package.json
index dbf7794..9f34687 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "email": "mostafa.kheibary@gmail.com",
     "url": "https://github.com/mostafa-kheibary"
   },
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/modules/content/Actions.svelte b/src/components/modules/content/Actions.svelte
index d13d1c8..69a9daa 100644
--- a/src/components/modules/content/Actions.svelte
+++ b/src/components/modules/content/Actions.svelte
@@ -4,14 +4,14 @@
   import { clickTo, typeTo } from "src/utils/userAction";
   import { url } from "src/store/url.store";
   import { chatStore as state } from "src/store/chat.store";
-  import type { Contact, Field } from "src/types/Config";
+  import type { Contact } from "src/types/Config";
   import type Cipher from "src/class/Cipher";
   import { config } from "src/config";
   import { wait } from "src/utils/wait";
   import Lock from "src/components/icon/Lock.svelte";
+  import { useConfig } from "src/hooks/useConfig";
 
   export let cipher: Cipher;
-  export let selector: Field;
   export let id: string;
 
   let status: "safe" | "unsafe" = "unsafe";
@@ -21,6 +21,7 @@
   let intervalId: any | null = null;
 
   $: !$state.loading && clearInterval(intervalId);
+  const { getSelector } = useConfig();
 
   const checkStatus = () => {
     const contact = LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, $url.id);
@@ -48,18 +49,17 @@
   });
 
   const handleSendHandshake = async (e: MouseEvent) => {
-    let textFiled = document.querySelector(selector.textField) as HTMLElement;
+    let textFiled = document.querySelector(getSelector("textField")) as HTMLElement;
     textFiled.focus();
     if ($state.loading) return;
-    const submitButton = selector.submitButton;
     const packet = await cipher.createDRSAPHandshake($url.id);
-    typeTo(selector.textField, packet);
-    textFiled = document.querySelector(selector.textField) as HTMLElement;
+    typeTo(getSelector("textField"), packet);
+    textFiled = document.querySelector(getSelector("textField")) as HTMLElement;
     textFiled.style.display = "none";
     await wait(50);
     state.update((state) => ({ ...state, loading: true, submit: true }));
     textFiled.style.display = "block";
-    clickTo(submitButton);
+    clickTo(getSelector("submitButton"));
     isMenuOpen = false;
     intervalId = setInterval(() => {
       const user = LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, $url.id);
@@ -77,15 +77,15 @@
   };
 </script>
 
-<div {id} class="ctc_wrapper">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div on:click|stopPropagation|preventDefault on:mousedown|stopPropagation|preventDefault {id} class="ctc_wrapper">
   <button
     class="ctc_button"
     data-menu-item="true"
     class:active={status === "safe" && currentContact?.enable}
     on:click|stopPropagation|preventDefault={() => (isMenuOpen = !isMenuOpen)}>
   </button>
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div on:click|stopPropagation class="ctc_menu" class:open={isMenuOpen} class:fromLeft={openFromLeft}>
     {#if status === "safe"}
       <div on:click|stopPropagation={handleToggleConversation} data-menu-item="true" class="ctc_menu__item">
diff --git a/src/components/modules/popup/Settings.svelte b/src/components/modules/popup/Settings.svelte
index a6042e9..9ef5aa9 100644
--- a/src/components/modules/popup/Settings.svelte
+++ b/src/components/modules/popup/Settings.svelte
@@ -39,7 +39,7 @@
   <md-outlined-button role="button" class="button" on:pointerup={() => goto("/advanced-setting")}>
     Advanced Settings
   </md-outlined-button>
-  <span class="version">v0.9.2</span>
+  <span class="version">v0.9.3</span>
 </div>
 
 <style lang="scss" module>
diff --git a/src/config/index.ts b/src/config/index.ts
index 63b6e73..793db07 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -12,8 +12,8 @@ export const initLog = `
 ██       ██    ██ ██   ██ ██   ██ ██   ██ 
 ██   ███ ██    ██ ███████ ██████  ██   ██ 
 ██    ██ ██    ██ ██   ██ ██   ██ ██   ██ 
- ██████   ██████  ██   ██ ██   ██ ██████  
-                                                                    
+ ██████   ██████  ██   ██ ██   ██ ██████                                  
+ 
 `;
 
 export const version = "V1";
@@ -25,94 +25,86 @@ export const config: Config = {
 export const selectors: Record<string, Selector> = {
   "web.bale.ai": {
     selector: {
-      desktop: {
-        app: "#app_main_wrapper",
-        textField: "#editable-message-text",
-        submitButton: "#chat_footer :nth-child(2) :nth-child(5)",
-        header: "#toolbarWrapper",
-        message: "[data-sid]",
-        innerMessageText: "span",
-      },
-      mobile: {
-        app: "#app_main_wrapper",
-        textField: "#main-message-input",
-        submitButton: "#chat_footer :nth-child(2) > div:last-child",
-        header: "#toolbarWrapper",
-        message: "[data-sid]",
-        innerMessageText: "span",
-      },
+      textField: (type) => (type === "mobile" ? "#main-message-input" : "#editable-message-text"),
+      submitButton: "#chat_footer :nth-child(2) :nth-child(5)",
+      header: "#toolbarWrapper",
+      message: "[data-sid]",
+      innerMessageText: "span",
+    },
+    events: {
+      onSubmitClick: "click",
     },
     path: "*",
     idProvider: "uid",
   },
   "web.telegram.org/k/": {
     selector: {
-      desktop: {
-        app: "#page-chats",
-        textField: ".input-message-input[data-peer-id][contenteditable]",
-        submitButton: ".btn-send-container button",
-        header: "[data-type=chat] .sidebar-header",
-        message: "[data-type=chat] [data-peer-id][data-mid]",
-        innerMessageText: ".message",
-      },
+      textField: ".input-message-input[data-peer-id][contenteditable]",
+      submitButton: ".btn-send-container button",
+      header: "[data-type=chat] .sidebar-header",
+      message: "[data-type=chat] [data-peer-id][data-mid]",
+      innerMessageText: ".message",
+    },
+    events: {
+      onSubmitClick: (type) => (type === "mobile" ? "mousedown" : "click"),
     },
     path: "*",
     idProvider: "#",
   },
   "web.splus.ir": {
     selector: {
-      desktop: {
-        app: "#root",
-        textField: "#editable-message-text",
-        header: "#MiddleColumn > div.messages-layout > div.MiddleHeader",
-        message: "[data-message-id]",
-        innerMessageText: ".contWrap",
-        submitButton:
-          "#MiddleColumn > div.messages-layout > div.Transition.slide > div > div.middle-column-footer > div > button",
-      },
+      textField: "#editable-message-text",
+      header: "#MiddleColumn > div.messages-layout > div.MiddleHeader",
+      message: "[data-message-id]",
+      innerMessageText: ".contWrap",
+      submitButton:
+        "#MiddleColumn > div.messages-layout > div.Transition.slide > div > div.middle-column-footer > div > button",
+    },
+    events: {
+      onSubmitClick: "click",
     },
     path: "*",
     idProvider: "#",
   },
   "web.telegram.org/a/": {
     selector: {
-      desktop: {
-        app: "#root",
-        textField: "#editable-message-text",
-        header: "#MiddleColumn > div.messages-layout > div.MiddleHeader",
-        message: "[data-message-id]",
-        innerMessageText: ".text-content",
-        submitButton:
-          "#MiddleColumn > div.messages-layout > div.Transition > div > div.middle-column-footer > div.Composer.shown.mounted > button",
-      },
+      textField: "#editable-message-text",
+      header: "#MiddleColumn > div.messages-layout > div.MiddleHeader",
+      message: "[data-message-id]",
+      innerMessageText: ".text-content",
+      submitButton:
+        "#MiddleColumn > div.messages-layout > div.Transition > div > div.middle-column-footer > div.Composer.shown.mounted > button",
+    },
+    events: {
+      onSubmitClick: "click",
     },
     path: "*",
     idProvider: "#",
   },
   "web.eitaa.com": {
     selector: {
-      desktop: {
-        app: "#main-columns",
-        textField: ".chats-container .input-message-input",
-        header: ".chats-container .sidebar-header",
-        message: ".bubble[data-mid]",
-        innerMessageText: ".message",
-        submitButton: ".btn-send-container button",
-      },
+      textField: ".chats-container .input-message-input",
+      header: ".chats-container .sidebar-header",
+      message: ".bubble[data-mid]",
+      innerMessageText: ".message",
+      submitButton: ".btn-send-container button",
+    },
+    events: {
+      onSubmitClick: (type) => (type === "mobile" ? "mousedown" : "click"),
     },
     path: "*",
     idProvider: "#",
   },
   "twitter.com": {
     selector: {
-      desktop: {
-        app: "#react-root",
-        textField: "[contenteditable]",
-        header: "[role=main] > div > div > div > :nth-child(2) > div > div > div > div > div > div > div",
-        message: "[data-testid=messageEntry] > div > :nth-child(2) [role=presentation]",
-        innerMessageText: "span",
-        submitButton: "[role=complementary] > :nth-child(2) > [role=button]",
-      },
+      textField: "[contenteditable]",
+      header: "[role=main] > div > div > div > :nth-child(2) > div > div > div > div > div > div > div",
+      message: "[data-testid=messageEntry] > div > :nth-child(2) [role=presentation]",
+      innerMessageText: "span",
+      submitButton: "[role=complementary] > :nth-child(2) > [role=button]",
+    },
+    events: {
+      onSubmitClick: "click",
     },
     path: "/messages",
     idProvider: "/",
diff --git a/src/content/index.ts b/src/content/index.ts
index d43441e..557c285 100644
--- a/src/content/index.ts
+++ b/src/content/index.ts
@@ -7,46 +7,47 @@ import useObserver from "src/hooks/useObserver";
 import useRender from "src/hooks/useRender";
 import useUrl from "src/hooks/useUrl";
 import BrowserStorage from "src/utils/BrowserStorage";
-import { getConfig, getDeviceType } from "src/utils";
+import { getDeviceType } from "src/utils";
 import logger from "src/utils/logger";
 import { parseMessage } from "./scripts/messageParser";
 import { registerEventListener } from "./scripts/listeners";
 import { register } from "./scripts/register";
-import { logSelectors } from "src/utils/logSelectors";
+import { useConfig } from "src/hooks/useConfig";
 
 (async function main() {
   let store = await BrowserStorage.get();
   if (!store.enable) return null;
   await register();
   const type = getDeviceType();
+  const { getSelector, idProvider, name } = useConfig();
   const isTouch = type === "mobile" ? true : false;
-  const { idProvider, selector, name } = getConfig();
-  if (!selector || !idProvider) return logger.error(`config notfound for ${location.hostname}`);
+  if (!name || !idProvider) return logger.error(`config notfound for ${location.hostname}`);
   logger.info({ type, isTouch, idProvider, name });
 
   const cipher = new Cipher();
-  const appRoot = document.querySelector(selector.app) as HTMLElement;
+  const appRoot = document.body;
   const { onObserve: onRootObserver } = useObserver(appRoot);
   const { render } = useRender(appRoot);
   const { url, urlStore } = useUrl(idProvider);
   if (import.meta.env.MODE !== "development") console.log(initLog);
 
   new LoadingScreen({ target: document.body });
-  render(selector.header, (target, id) => {
+
+  render(getSelector("header"), (target, id) => {
     // Action Menu on the conversation header
-    new Actions({ target, props: { cipher, selector, id } });
+    new Actions({ target, props: { cipher, id } });
   });
   // event listener for user action (type,click,sending message)
   registerEventListener(urlStore);
   url.subscribe((newUrl) => {
     if (LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, newUrl.id).publicKey) {
-      document.querySelector(selector.textField)?.dispatchEvent(new Event("input"));
+      document.querySelector(getSelector("textField"))?.dispatchEvent(new Event("input"));
     }
   });
 
   onRootObserver(() => {
     // On message receive will run and parse it
-    const messages = Array.from(document.querySelectorAll(selector.message));
+    const messages = Array.from(document.querySelectorAll(getSelector("message")));
     messages.forEach(async (message, index) => parseMessage(urlStore, message as HTMLElement, messages, index));
   });
 })();
diff --git a/src/content/scripts/listeners.ts b/src/content/scripts/listeners.ts
index d56c196..06bc61c 100644
--- a/src/content/scripts/listeners.ts
+++ b/src/content/scripts/listeners.ts
@@ -3,31 +3,27 @@ import { config } from "src/config";
 import useListener from "src/hooks/useListener";
 import { chatStore } from "src/store/chat.store";
 import type { Url } from "src/store/url.store";
-import { getConfig, getDeviceType } from "src/utils";
+import { getDeviceType } from "src/utils";
 import LocalStorage from "src/utils/LocalStorage";
 import logger from "src/utils/logger";
 import { clickTo, typeTo } from "src/utils/userAction";
 import { get } from "svelte/store";
 import { wait } from "src/utils/wait";
-import { logSelectors } from "src/utils/logSelectors";
+import { makeElementInvisible, makeElementVisible } from "src/utils/elementVisibility";
+import { useConfig } from "src/hooks/useConfig";
 
 export const registerEventListener = (urlStore: Url) => {
   const cipher = new Cipher();
   const type = getDeviceType();
+  const { getEvent, getSelector } = useConfig();
   const isTouch = type === "mobile" ? true : false;
-  const { selector } = getConfig();
-  const appRoot = document.querySelector(selector.app) as HTMLElement;
+  const appRoot = document.body as HTMLElement;
   const { on } = useListener(appRoot);
 
-  if (import.meta.env.MODE === "development") {
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "W" && e.shiftKey) logSelectors();
-    });
-  }
-  on(selector.submitButton, "click", async (e: Event) => {
+  const handleSubmitClicked = async (e: Event) => {
     const state = get(chatStore);
     const contact = LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, urlStore.id);
-    let textFieldElement = document.querySelector(selector.textField) as HTMLElement;
+    let textFieldElement = document.querySelector(getSelector("textField")) as HTMLElement;
     const messageLengthIsOk = (textFieldElement.textContent || "").length <= 1200;
 
     if (!textFieldElement.textContent?.trim() || !contact.enable) return;
@@ -39,49 +35,48 @@ export const registerEventListener = (urlStore: Url) => {
 
     if (!messageLengthIsOk) return alert("character length should be bellow 1200 character");
 
+    makeElementInvisible(textFieldElement);
     const encrypted = await cipher.createDRSAP(textFieldElement.textContent || "", urlStore.id);
-    if (!encrypted) return;
-    typeTo(selector.textField, encrypted);
-    textFieldElement = document.querySelector(selector.textField) as HTMLElement;
-    textFieldElement.style.display = "none";
+    if (!encrypted) return makeElementVisible(textFieldElement);
+
+    typeTo(getSelector("textField"), encrypted);
+    await wait(25);
     chatStore.update((prev) => ({ ...prev, clickSubmit: true }));
-    await wait(50);
-    textFieldElement.style.display = "block";
-    clickTo(selector.submitButton);
+    clickTo(getSelector("submitButton"));
+    makeElementVisible(textFieldElement);
+    textFieldElement.focus();
     logger.info("Message sent, Send button clicked");
-  });
+  };
 
-  document.addEventListener(
-    "keydown",
-    async (event) => {
-      const e = event as KeyboardEvent;
-      // check if we writing text to our textfield or not
-      let isEqual = (e.target as HTMLElement).isEqualNode(document.querySelector(selector.textField));
-      if (!isEqual) return;
+  const handleTextFieldKeyDown = async (e: KeyboardEvent) => {
+    // check if we writing text to our textfield or not
+    let isEqual = (e.target as HTMLElement).isEqualNode(document.querySelector(getSelector("textField")));
+    if (!isEqual) return;
 
-      const contact = LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, urlStore.id);
-      let textFieldElement = document.querySelector(selector.textField) as HTMLElement;
-      const messageLengthIsOk = (textFieldElement.textContent || "").length <= 1200;
+    const contact = LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, urlStore.id);
+    let textFieldElement = document.querySelector(getSelector("textField")) as HTMLElement;
+    const messageLengthIsOk = (textFieldElement.textContent || "").length <= 1200;
+
+    if (e.key !== "Enter" || !contact.enable || !textFieldElement.textContent?.trim() || e.shiftKey || isTouch) {
+      return;
+    }
+    e.preventDefault();
+    e.stopImmediatePropagation();
+
+    if (!messageLengthIsOk) return alert("character length should be bellow 1200 character");
+    makeElementInvisible(textFieldElement);
+    const encrypted = await cipher.createDRSAP(textFieldElement.textContent || "", urlStore.id);
+    if (!encrypted) return makeElementVisible(textFieldElement);
 
-      if (e.key !== "Enter" || !contact.enable || !textFieldElement.textContent?.trim() || e.shiftKey || isTouch) {
-        return;
-      }
-      e.preventDefault();
-      e.stopImmediatePropagation();
+    typeTo(getSelector("textField"), encrypted);
+    await wait(25);
+    chatStore.update((prev) => ({ ...prev, submit: true }));
+    clickTo(getSelector("submitButton"));
+    makeElementVisible(textFieldElement);
+    textFieldElement.focus();
+    logger.info("Message sent, Form submitted");
+  };
 
-      if (!messageLengthIsOk) return alert("character length should be bellow 1200 character");
-      const encrypted = await cipher.createDRSAP(textFieldElement.textContent || "", urlStore.id);
-      if (!encrypted) return;
-      typeTo(selector.textField, encrypted);
-      textFieldElement = document.querySelector(selector.textField) as HTMLElement;
-      textFieldElement.style.display = "none";
-      await wait(20);
-      chatStore.update((prev) => ({ ...prev, submit: true }));
-      clickTo(selector.submitButton);
-      textFieldElement.focus();
-      textFieldElement.style.display = "block";
-      logger.info("Message sent, Form submitted");
-    },
-    { capture: true }
-  );
+  document.addEventListener("keydown", handleTextFieldKeyDown, { capture: true });
+  on(getSelector("submitButton"), getEvent("onSubmitClick"), handleSubmitClicked);
 };
diff --git a/src/content/scripts/messageParser.ts b/src/content/scripts/messageParser.ts
index 3642e9c..5ca7290 100644
--- a/src/content/scripts/messageParser.ts
+++ b/src/content/scripts/messageParser.ts
@@ -1,14 +1,14 @@
 import Cipher from "src/class/Cipher";
 import { config } from "src/config";
+import { useConfig } from "src/hooks/useConfig";
 import type { Url } from "src/store/url.store";
-import { getConfig } from "src/utils";
 import { changeTextNode } from "src/utils/changeTextNode";
 
 export const parseMessage = async (urlStore: Url, message: Element, messages: Element[], index: number) => {
   const cipher = new Cipher();
-  const { selector } = getConfig();
+  const { getSelector } = useConfig();
 
-  const targets = Array.from(messages[index].querySelectorAll(selector.innerMessageText));
+  const targets = Array.from(messages[index].querySelectorAll(getSelector("innerMessageText")));
   const target = targets.find((el) => {
     let find = null;
     el.childNodes.forEach((node: Node) => {
diff --git a/src/hooks/useConfig.ts b/src/hooks/useConfig.ts
new file mode 100644
index 0000000..8093bbb
--- /dev/null
+++ b/src/hooks/useConfig.ts
@@ -0,0 +1,37 @@
+import { selectors } from "src/config";
+import type { Events, Field } from "src/types/Config";
+import { getDeviceType } from "src/utils";
+
+interface Config {
+  getSelector: (key: keyof Field) => string;
+  getEvent: (key: keyof Events) => string;
+  idProvider: string;
+  name: string;
+}
+
+export const useConfig = (): Config => {
+  const type = getDeviceType();
+  let host: string = location.hostname;
+
+  const getSelector = (selectorKey: keyof Field) => {
+    const selector = (selectors[host] as any).selector[selectorKey];
+    if (typeof selector === "string") return selector;
+    return selector(type);
+  };
+  const getEvent = (eventKey: keyof Events) => {
+    const event = (selectors[host] as any).events[eventKey];
+    if (typeof event === "string") return event;
+    return event(type);
+  };
+
+  const key = location.host + location.pathname;
+  for (const selectorKey in selectors) {
+    if (selectorKey.startsWith(key)) host = selectorKey;
+  }
+  return {
+    name: host,
+    idProvider: selectors[host].idProvider,
+    getEvent,
+    getSelector,
+  };
+};
diff --git a/src/hooks/useRender.ts b/src/hooks/useRender.ts
index aba499e..dd9b4bc 100644
--- a/src/hooks/useRender.ts
+++ b/src/hooks/useRender.ts
@@ -1,7 +1,7 @@
 import { getElement } from "src/utils/getElement";
 import useObserver from "./useObserver";
-import { getConfig } from "src/utils";
 import { selectors } from "src/config";
+import { useConfig } from "./useConfig";
 
 interface RenderMap {
   id: string;
@@ -17,7 +17,7 @@ interface RenderMap {
  *  const { render } = useRender()
  */
 const useRender = (appRoot: HTMLElement) => {
-  const { name } = getConfig();
+  const { name } = useConfig();
   const renderMap: Record<string, RenderMap> = {};
   const { onObserve } = useObserver(appRoot);
 
diff --git a/src/types/Config.d.ts b/src/types/Config.d.ts
index ca5bceb..c1a4ca0 100644
--- a/src/types/Config.d.ts
+++ b/src/types/Config.d.ts
@@ -1,16 +1,18 @@
+export type FieldItem = ((device: "desktop" | "mobile") => string) | string;
+
 export interface Field {
-  app: string;
-  textField: string;
-  submitButton: string;
-  header: string;
-  message: string;
-  innerMessageText: string;
+  textField: FieldItem;
+  submitButton: FieldItem;
+  header: FieldItem;
+  message: FieldItem;
+  innerMessageText: FieldItem;
+}
+export interface Events {
+  onSubmitClick: FieldItem;
 }
 export interface Selector {
-  selector: {
-    desktop: Field;
-    mobile?: Field;
-  };
+  selector: Field;
+  events: Events;
   path: string;
   idProvider: string;
 }
diff --git a/src/utils/elementVisibility.ts b/src/utils/elementVisibility.ts
new file mode 100644
index 0000000..708ffa6
--- /dev/null
+++ b/src/utils/elementVisibility.ts
@@ -0,0 +1,10 @@
+export const makeElementInvisible = (element: HTMLElement) => {
+  element.style.visibility = "hidden";
+  element.style.position = "absolute";
+  element.style.opacity = "0";
+};
+export const makeElementVisible = (element: HTMLElement) => {
+  element.style.visibility = "";
+  element.style.position = "";
+  element.style.opacity = "";
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b92dd1d..8d4bfb2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,3 @@
-import { selectors } from "src/config";
-import type { Field } from "src/types/Config";
-
 export const getDeviceType = () => {
   const ua = navigator.userAgent;
   if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
@@ -11,41 +8,3 @@ export const getDeviceType = () => {
   }
   return "desktop";
 };
-interface Config {
-  selector: Field;
-  idProvider: string;
-  name: string;
-}
-export const getConfig = (): Config => {
-  const type = getDeviceType();
-
-  const key = location.host + location.pathname;
-  for (const selectorKey in selectors) {
-    if (selectorKey.startsWith(key)) {
-      const selector = selectors[selectorKey].selector[type];
-      if (!selector)
-        return {
-          name: selectorKey,
-          selector: selectors[selectorKey].selector.desktop,
-          idProvider: selectors[selectorKey].idProvider,
-        };
-      return {
-        name: selectorKey,
-        selector,
-        idProvider: selectors[selectorKey].idProvider,
-      };
-    }
-  }
-  const selector = selectors[location.hostname].selector[type];
-  if (!selector)
-    return {
-      name: location.hostname,
-      selector: selectors[location.hostname].selector.desktop,
-      idProvider: selectors[location.hostname].idProvider,
-    };
-  return {
-    name: location.hostname,
-    selector,
-    idProvider: selectors[location.hostname].idProvider,
-  };
-};
diff --git a/src/utils/logSelectors.ts b/src/utils/logSelectors.ts
deleted file mode 100644
index 47b275a..0000000
--- a/src/utils/logSelectors.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { getConfig } from ".";
-
-export const logSelectors = () => {
-  const { selector: selectors } = getConfig();
-  for (let selector in selectors) {
-    console.log(selector, document.querySelector((selectors as any)[selector]));
-  }
-};
diff --git a/src/utils/userAction.ts b/src/utils/userAction.ts
index 314253d..3f7de04 100644
--- a/src/utils/userAction.ts
+++ b/src/utils/userAction.ts
@@ -1,5 +1,6 @@
-// IMPORTANT : temporary disable this feature for other type of input
+import { useConfig } from "src/hooks/useConfig";
 
+// IMPORTANT : temporary disable this feature for other type of input
 // function insertElementToDeepestChild(parentNode: HTMLElement, text: string) {
 //   let currentElement: any = parentNode;
 //   const textEl = document.createElement("span");
@@ -15,6 +16,7 @@ export const typeTo = async (textFiledSelector: string, message: string) => {
   const textFiled = document.querySelector(textFiledSelector) as HTMLElement;
   textFiled.focus();
   const textEl = document.createElement("span");
+  (textFiled as any).value = message;
   textEl.textContent = message;
   textEl.style.display = "none";
   textFiled.replaceChildren(textEl);
@@ -22,6 +24,9 @@ export const typeTo = async (textFiledSelector: string, message: string) => {
 };
 
 export const clickTo = (elementSelector: string) => {
+  const { getEvent } = useConfig();
   const el = document.querySelector(elementSelector) as HTMLElement;
-  el.click();
+  const event = getEvent("onSubmitClick");
+  if (event === "click") return el.click();
+  el.dispatchEvent(new Event(event, { cancelable: false, bubbles: true }));
 };