diff --git a/package.json b/package.json
index 7f8f41eb4..d8af279a4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {
diff --git a/src/background/collection-engine/flow-handler.js b/src/background/collection-engine/flow-handler.js
index 370bbfc70..80ab2d63d 100644
--- a/src/background/collection-engine/flow-handler.js
+++ b/src/background/collection-engine/flow-handler.js
@@ -30,13 +30,15 @@ export function workflow(flow) {
       blocksHandler,
       states: this.states,
       logger: this.logger,
-      parentWorkflow: {
-        id: this.id,
-        isCollection: true,
-        name: this.collection.name,
-      },
-      data: {
-        globalData: globalData.trim() === '' ? null : globalData,
+      options: {
+        parentWorkflow: {
+          id: this.id,
+          isCollection: true,
+          name: this.collection.name,
+        },
+        data: {
+          globalData: globalData.trim() === '' ? null : globalData,
+        },
       },
     });
 
diff --git a/src/background/index.js b/src/background/index.js
index c5ea9ee50..c02e7acbe 100644
--- a/src/background/index.js
+++ b/src/background/index.js
@@ -64,7 +64,7 @@ const workflow = {
     }
 
     const engine = new WorkflowEngine(workflowData, {
-      ...options,
+      options,
       blocksHandler,
       logger: this.logger,
       states: this.states,
@@ -155,7 +155,7 @@ async function checkVisitWebTriggers(changeInfo, tab) {
   if (triggeredWorkflow) {
     const workflowData = await workflow.get(triggeredWorkflow.id);
 
-    if (workflowData) workflow.execute(workflowData);
+    if (workflowData) workflow.execute(workflowData, { tabId: tab.id });
   }
 }
 async function checkRecordingWorkflow({ status }, { url, id }) {
@@ -353,13 +353,18 @@ message.on('set:active-tab', (tabId) => {
   return browser.tabs.update(tabId, { active: true });
 });
 
-message.on('get:sender', (_, sender) => {
-  return sender;
-});
-message.on('get:tab-screenshot', (options) => {
-  return browser.tabs.captureVisibleTab(options);
+message.on('debugger:send-command', ({ tabId, method, params }) => {
+  return new Promise((resolve) => {
+    console.log(tabId, method, params);
+    chrome.debugger.sendCommand({ tabId }, method, params, resolve);
+  });
 });
+
+message.on('get:sender', (_, sender) => sender);
 message.on('get:file', (path) => getFile(path));
+message.on('get:tab-screenshot', (options) =>
+  browser.tabs.captureVisibleTab(options)
+);
 
 message.on('collection:execute', (collection) => {
   const engine = new CollectionEngine(collection, {
diff --git a/src/background/workflow-engine/blocks-handler/handler-execute-workflow.js b/src/background/workflow-engine/blocks-handler/handler-execute-workflow.js
index 31cd5e7cb..3af9deb36 100644
--- a/src/background/workflow-engine/blocks-handler/handler-execute-workflow.js
+++ b/src/background/workflow-engine/blocks-handler/handler-execute-workflow.js
@@ -52,9 +52,14 @@ async function executeWorkflow({ outputs, data }) {
       throw errorInstance;
     }
     const options = {
-      parentWorkflow: {
-        id: this.id,
-        name: this.workflow.name,
+      options: {
+        data: {
+          globalData: isWhitespace(data.globalData) ? null : data.globalData,
+        },
+        parentWorkflow: {
+          id: this.id,
+          name: this.workflow.name,
+        },
       },
       events: {
         onInit: (engine) => {
@@ -77,9 +82,6 @@ async function executeWorkflow({ outputs, data }) {
       states: this.states,
       logger: this.logger,
       blocksHandler: this.blocksHandler,
-      data: {
-        globalData: isWhitespace(data.globalData) ? null : data.globalData,
-      },
     };
 
     if (workflow.drawflow.includes(this.workflow.id)) {
diff --git a/src/background/workflow-engine/blocks-handler/handler-hover-element.js b/src/background/workflow-engine/blocks-handler/handler-hover-element.js
new file mode 100644
index 000000000..b20ded0b7
--- /dev/null
+++ b/src/background/workflow-engine/blocks-handler/handler-hover-element.js
@@ -0,0 +1,38 @@
+import { getBlockConnection, attachDebugger } from '../helper';
+
+export async function hoverElement(block) {
+  const nextBlockId = getBlockConnection(block);
+
+  try {
+    if (!this.activeTab.id) throw new Error('no-tab');
+
+    const { debugMode, executedBlockOnWeb } = this.workflow.settings;
+
+    if (!debugMode) {
+      await attachDebugger(this.activeTab.id);
+    }
+
+    await this._sendMessageToTab({
+      ...block,
+      debugMode,
+      executedBlockOnWeb,
+      activeTabId: this.activeTab.id,
+      frameSelector: this.frameSelector,
+    });
+
+    if (!debugMode) {
+      chrome.debugger.detach({ tabId: this.activeTab.id });
+    }
+
+    return {
+      data: '',
+      nextBlockId,
+    };
+  } catch (error) {
+    error.nextBlockId = nextBlockId;
+
+    throw error;
+  }
+}
+
+export default hoverElement;
diff --git a/src/background/workflow-engine/blocks-handler/handler-interaction-block.js b/src/background/workflow-engine/blocks-handler/handler-interaction-block.js
index f721b8827..594c10abd 100644
--- a/src/background/workflow-engine/blocks-handler/handler-interaction-block.js
+++ b/src/background/workflow-engine/blocks-handler/handler-interaction-block.js
@@ -32,12 +32,14 @@ async function interactionHandler(block, { refData }) {
   const nextBlockId = getBlockConnection(block);
   const messagePayload = {
     ...block,
-    refData,
     debugMode,
     executedBlockOnWeb,
+    activeTabId: this.activeTab.id,
     frameSelector: this.frameSelector,
   };
 
+  if (block.name === 'javascript-code') messagePayload.refData = refData;
+
   try {
     const data = await this._sendMessageToTab(messagePayload, {
       frameId: this.activeTab.frameId || 0,
@@ -80,13 +82,7 @@ async function interactionHandler(block, { refData }) {
       }
     }
 
-    const isJavascriptBlock = block.name === 'javascript-code';
-
-    if (block.data.assignVariable && !isJavascriptBlock) {
-      this.referenceData.variables[block.data.variableName] = data;
-    }
-
-    if (isJavascriptBlock) {
+    if (block.name === 'javascript-code') {
       if (data?.variables) {
         Object.keys(data.variables).forEach((varName) => {
           this.referenceData.variables[varName] = data.variables[varName];
@@ -99,6 +95,8 @@ async function interactionHandler(block, { refData }) {
           : [data.columns.data];
         this.addDataToColumn(arrData);
       }
+    } else if (block.data.assignVariable) {
+      this.referenceData.variables[block.data.variableName] = data;
     }
 
     return {
diff --git a/src/background/workflow-engine/blocks-handler/handler-new-tab.js b/src/background/workflow-engine/blocks-handler/handler-new-tab.js
index 798c0abc8..85cf4d86e 100644
--- a/src/background/workflow-engine/blocks-handler/handler-new-tab.js
+++ b/src/background/workflow-engine/blocks-handler/handler-new-tab.js
@@ -1,5 +1,9 @@
 import browser from 'webextension-polyfill';
-import { getBlockConnection } from '../helper';
+import {
+  getBlockConnection,
+  attachDebugger,
+  sendDebugCommand,
+} from '../helper';
 import { isWhitespace } from '@/utils/helper';
 
 async function newTab(block) {
@@ -14,7 +18,8 @@ async function newTab(block) {
   const nextBlockId = getBlockConnection(block);
 
   try {
-    const { updatePrevTab, url, active, inGroup } = block.data;
+    const { updatePrevTab, url, active, inGroup, customUserAgent, userAgent } =
+      block.data;
     const isInvalidUrl = !/^https?/.test(url);
 
     if (isInvalidUrl) {
@@ -40,6 +45,21 @@ async function newTab(block) {
 
     this.activeTab.url = url;
     if (tab) {
+      if (this.workflow.settings.debugMode || customUserAgent) {
+        await attachDebugger(tab.id, this.activeTab.id);
+
+        if (customUserAgent) {
+          const res = await sendDebugCommand(
+            tab.id,
+            'Network.setUserAgentOverride',
+            {
+              userAgent,
+            }
+          );
+          console.log('agent:', res);
+        }
+      }
+
       this.activeTab.id = tab.id;
       this.windowId = tab.windowId;
     }
@@ -63,6 +83,10 @@ async function newTab(block) {
 
     this.activeTab.frameId = 0;
 
+    if (!this.workflow.settings.debugMode && customUserAgent) {
+      chrome.debugger.detach({ tabId: tab.id });
+    }
+
     return {
       data: url,
       nextBlockId,
diff --git a/src/background/workflow-engine/blocks-handler/handler-switch-tab.js b/src/background/workflow-engine/blocks-handler/handler-switch-tab.js
index 6bea48046..5611c7aea 100644
--- a/src/background/workflow-engine/blocks-handler/handler-switch-tab.js
+++ b/src/background/workflow-engine/blocks-handler/handler-switch-tab.js
@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill';
-import { getBlockConnection } from '../helper';
+import { getBlockConnection, attachDebugger } from '../helper';
 
 export default async function ({ data, outputs }) {
   const nextBlockId = getBlockConnection({ outputs });
@@ -32,6 +32,10 @@ export default async function ({ data, outputs }) {
     await browser.tabs.update(tab.id, { active: true });
   }
 
+  if (this.workflow.settings.debugMode) {
+    await attachDebugger(tab.id, this.activeTab.id);
+  }
+
   this.activeTab.id = tab.id;
   this.activeTab.frameId = 0;
   this.activeTab.url = tab.url;
diff --git a/src/background/workflow-engine/engine.js b/src/background/workflow-engine/engine.js
index 58eb262c8..b18beee13 100644
--- a/src/background/workflow-engine/engine.js
+++ b/src/background/workflow-engine/engine.js
@@ -2,14 +2,20 @@ import browser from 'webextension-polyfill';
 import { nanoid } from 'nanoid';
 import { tasks } from '@/utils/shared';
 import { convertData, waitTabLoaded } from './helper';
-import { toCamelCase, parseJSON, isObject, objectHasKey } from '@/utils/helper';
+import {
+  toCamelCase,
+  sleep,
+  parseJSON,
+  isObject,
+  objectHasKey,
+} from '@/utils/helper';
 import referenceData from '@/utils/reference-data';
 import executeContentScript from './execute-content-script';
 
 class WorkflowEngine {
   constructor(
     workflow,
-    { states, logger, blocksHandler, tabId, parentWorkflow, data }
+    { states, logger, blocksHandler, parentWorkflow, options }
   ) {
     this.id = nanoid();
     this.states = states;
@@ -23,6 +29,7 @@ class WorkflowEngine {
     this.repeatedTasks = {};
 
     this.windowId = null;
+    this.triggerBlock = null;
     this.currentBlock = null;
     this.childWorkflowId = null;
 
@@ -34,15 +41,20 @@ class WorkflowEngine {
     this.eventListeners = {};
     this.columns = { column: { index: 0, type: 'any' } };
 
-    const globalData = data?.globalData || workflow.globalData;
-    const variables = isObject(data?.variables) ? data.variables : {};
+    const globalData = options?.data?.globalData || workflow.globalData;
+    const variables = isObject(options?.data?.variables)
+      ? options?.data.variables
+      : {};
+
+    options.data = { globalData, variables };
+    this.options = options;
 
     this.activeTab = {
       url: '',
-      id: tabId,
       frameId: 0,
       frames: {},
       groupId: null,
+      id: options?.tabId,
     };
     this.referenceData = {
       variables,
@@ -59,7 +71,38 @@ class WorkflowEngine {
     };
   }
 
-  init(currentBlock) {
+  reset() {
+    this.loopList = {};
+    this.repeatedTasks = {};
+
+    this.windowId = null;
+    this.currentBlock = null;
+    this.childWorkflowId = null;
+
+    this.isDestroyed = false;
+    this.isUsingProxy = false;
+
+    this.history = [];
+    this.columns = { column: { index: 0, type: 'any' } };
+
+    this.activeTab = {
+      url: '',
+      frameId: 0,
+      frames: {},
+      groupId: null,
+      id: this.options?.tabId,
+    };
+    this.referenceData = {
+      table: [],
+      loopData: {},
+      workflow: {},
+      googleSheets: {},
+      variables: this.options.variables,
+      globalData: this.referenceData.globalData,
+    };
+  }
+
+  init() {
     if (this.workflow.isDisabled) return;
 
     if (!this.states) {
@@ -98,7 +141,7 @@ class WorkflowEngine {
     this.blocks = blocks;
     this.startedTimestamp = Date.now();
     this.workflow.table = columns;
-    this.currentBlock = currentBlock || triggerBlock;
+    this.currentBlock = triggerBlock;
 
     this.states.on('stop', this.onWorkflowStopped);
 
@@ -196,6 +239,11 @@ class WorkflowEngine {
     try {
       if (this.isDestroyed) return;
       if (this.isUsingProxy) chrome.proxy.settings.clear({});
+      if (this.workflow.settings.debugMode && this.activeTab.id) {
+        await sleep(1000);
+
+        chrome.debugger.detach({ tabId: this.activeTab.id });
+      }
 
       const endedTimestamp = Date.now();
       this.executeQueue();
@@ -255,7 +303,8 @@ class WorkflowEngine {
     this.dispatchEvent('update', { state: this.state });
 
     const startExecutedTime = Date.now();
-    const blockHandler = this.blocksHandler[toCamelCase(block?.name)];
+
+    const blockHandler = this.blocksHandler[toCamelCase(block.name)];
     const handler =
       !blockHandler && tasks[block.name].category === 'interaction'
         ? this.blocksHandler.interactionBlock
@@ -307,13 +356,31 @@ class WorkflowEngine {
         ...(error.data || {}),
       });
 
-      if (
-        this.workflow.settings.onError === 'keep-running' &&
-        error.nextBlockId
-      ) {
+      const { onError } = this.workflow.settings;
+
+      if (onError === 'keep-running' && error.nextBlockId) {
         setTimeout(() => {
           this.executeBlock(this.blocks[error.nextBlockId], error.data || '');
         }, blockDelay);
+      } else if (onError === 'restart-workflow' && !this.parentWorkflow) {
+        const restartKey = `restart-count:${this.id}`;
+        const restartCount = +localStorage.getItem(restartKey) || 0;
+        const maxRestart = this.workflow.settings.restartTimes ?? 3;
+
+        if (restartCount >= maxRestart) {
+          localStorage.removeItem(restartKey);
+          this.destroy();
+          return;
+        }
+
+        this.reset();
+
+        const triggerBlock = Object.values(this.blocks).find(
+          ({ name }) => name === 'trigger'
+        );
+        this.executeBlock(triggerBlock);
+
+        localStorage.setItem(restartKey, restartCount + 1);
       } else {
         this.destroy('error', error.message);
       }
diff --git a/src/background/workflow-engine/helper.js b/src/background/workflow-engine/helper.js
index 629c4e06d..0583f5787 100644
--- a/src/background/workflow-engine/helper.js
+++ b/src/background/workflow-engine/helper.js
@@ -1,3 +1,18 @@
+export function sendDebugCommand(tabId, method, params = {}) {
+  return new Promise((resolve) => {
+    chrome.debugger.sendCommand({ tabId }, method, params, resolve);
+  });
+}
+
+export function attachDebugger(tabId, prevTab) {
+  return new Promise((resolve) => {
+    if (prevTab && tabId !== prevTab)
+      chrome.debugger.detach({ tabId: prevTab });
+
+    chrome.debugger.attach({ tabId }, '1.3', resolve);
+  });
+}
+
 export function waitTabLoaded(tabId) {
   return new Promise((resolve, reject) => {
     const activeTabStatus = () => {
diff --git a/src/components/newtab/logs/LogsFilters.vue b/src/components/newtab/logs/LogsFilters.vue
index 2edda821f..b900a4ffe 100644
--- a/src/components/newtab/logs/LogsFilters.vue
+++ b/src/components/newtab/logs/LogsFilters.vue
@@ -68,6 +68,13 @@
         </ui-select>
       </div>
     </ui-popover>
+    <ui-button
+      v-tooltip:bottom="t('log.clearLogs.title')"
+      icon
+      @click="$emit('clear')"
+    >
+      <v-remixicon name="riDeleteBin7Line" />
+    </ui-button>
   </div>
 </template>
 <script setup>
@@ -84,7 +91,7 @@ defineProps({
     default: () => ({}),
   },
 });
-const emit = defineEmits(['updateSorts', 'updateFilters']);
+const emit = defineEmits(['updateSorts', 'updateFilters', 'clear']);
 
 const { t } = useI18n();
 const shortcut = useShortcut('action:search', () => {
diff --git a/src/components/newtab/workflow/WorkflowDetailsCard.vue b/src/components/newtab/workflow/WorkflowDetailsCard.vue
index 57a239c00..b6ee72fb2 100644
--- a/src/components/newtab/workflow/WorkflowDetailsCard.vue
+++ b/src/components/newtab/workflow/WorkflowDetailsCard.vue
@@ -65,16 +65,23 @@
     >
       <p>{{ t('workflow.cantEdit') }}</p>
     </div>
-    <template v-for="(items, catId) in blocks" :key="catId">
-      <div class="flex items-center top-0 space-x-2 mb-2">
+    <ui-expand
+      v-for="(items, catId) in blocks"
+      :key="catId"
+      v-model="expandList[catId]"
+      hide-header-icon
+      header-class="flex items-center py-2 focus:ring-0 w-full text-left text-gray-600 dark:text-gray-200"
+    >
+      <template #header="{ show }">
         <span
           :class="categories[catId].color"
           class="h-3 w-3 rounded-full"
         ></span>
-        <p class="capitalize text-gray-600 dark:text-gray-200">
+        <p class="capitalize flex-1 ml-2">
           {{ categories[catId].name }}
         </p>
-      </div>
+        <v-remixicon :name="show ? 'riSubtractLine' : 'riAddLine'" size="20" />
+      </template>
       <div class="grid grid-cols-2 gap-2 mb-4">
         <div
           v-for="block in items"
@@ -107,7 +114,7 @@
           </p>
         </div>
       </div>
-    </template>
+    </ui-expand>
   </div>
 </template>
 <script setup>
@@ -159,13 +166,21 @@ const blocksArr = Object.entries(tasks).map(([key, block]) => ({
   id: key,
   name: t(`workflow.blocks.${key}.name`),
 }));
+const categoriesExpand = Object.keys(categories).reduce((acc, key) => {
+  acc[key] = true;
+
+  return acc;
+}, {});
 
 const query = ref('');
+const expandList = ref(categoriesExpand);
+
 const blocks = computed(() =>
   blocksArr.reduce((arr, block) => {
     if (
       block.name.toLocaleLowerCase().includes(query.value.toLocaleLowerCase())
     ) {
+      expandList.value[block.category] = true;
       (arr[block.category] = arr[block.category] || []).push(block);
     }
 
diff --git a/src/components/newtab/workflow/WorkflowSettings.vue b/src/components/newtab/workflow/WorkflowSettings.vue
index e136404c8..1e77beda3 100644
--- a/src/components/newtab/workflow/WorkflowSettings.vue
+++ b/src/components/newtab/workflow/WorkflowSettings.vue
@@ -1,26 +1,31 @@
 <template>
   <div class="workflow-settings">
-    <div class="mb-4">
-      <p class="mb-1 capitalize">
-        {{ t('workflow.settings.onError.title') }}
-      </p>
-      <div class="space-x-4 flex w-full max-w-sm items-center">
-        <div
-          v-for="item in onError"
-          :key="item.id"
-          class="p-3 rounded-lg border transition-colors w-full hoverable"
-          @click="settings.onError = item.id"
-        >
-          <ui-radio
-            :model-value="settings.onError"
-            :value="item.id"
-            class="capitalize"
-            @change="settings.onError = $event"
-          >
-            {{ item.name }}
-          </ui-radio>
-        </div>
+    <div class="mb-4 flex">
+      <div class="flex-1">
+        <p class="mb-1 capitalize">
+          {{ t('workflow.settings.onError.title') }}
+        </p>
+        <ui-select v-model="settings.onError" class="w-full max-w-sm">
+          <option v-for="item in onError" :key="item.id" :value="item.id">
+            {{ t(`workflow.settings.onError.items.${item.name}`) }}
+          </option>
+        </ui-select>
       </div>
+      <label v-if="settings.onError === 'restart-workflow'" class="ml-2">
+        <p class="mb-1 capitalize">
+          {{ t('workflow.settings.restartWorkflow.for') }}
+        </p>
+        <div class="flex items-center bg-input transition-colors rounded-lg">
+          <input
+            v-model.number="settings.restartTimes"
+            type="number"
+            class="py-2 px-4 w-32 rounded-lg bg-transparent"
+          />
+          <span class="px-2">
+            {{ t('workflow.settings.restartWorkflow.times') }}
+          </span>
+        </div>
+      </label>
     </div>
     <div>
       <p class="mb-1 capitalize">
@@ -35,7 +40,7 @@
         class="w-full max-w-sm"
       />
     </div>
-    <div v-if="false" class="flex mt-6">
+    <div class="flex mt-6">
       <ui-switch v-model="settings.debugMode" class="mr-4" />
       <p class="capitalize">{{ t('workflow.settings.debugMode') }}</p>
     </div>
@@ -67,15 +72,21 @@ const { t } = useI18n();
 const onError = [
   {
     id: 'keep-running',
-    name: t('workflow.settings.onError.items.keepRunning'),
+    name: 'keepRunning',
   },
   {
     id: 'stop-workflow',
-    name: t('workflow.settings.onError.items.stopWorkflow'),
+    name: 'stopWorkflow',
+  },
+  {
+    id: 'restart-workflow',
+    name: 'restartWorkflow',
   },
 ];
 
-const settings = reactive({});
+const settings = reactive({
+  restartTimes: 3,
+});
 
 watch(
   settings,
diff --git a/src/components/newtab/workflow/edit/EditInsertData.vue b/src/components/newtab/workflow/edit/EditInsertData.vue
index e746206c9..7da75293f 100644
--- a/src/components/newtab/workflow/edit/EditInsertData.vue
+++ b/src/components/newtab/workflow/edit/EditInsertData.vue
@@ -39,8 +39,8 @@
           >
             <option
               v-for="column in workflow.data.value.table"
-              :key="column.name"
-              :value="column.name"
+              :key="column.id"
+              :value="column.id"
             >
               {{ column.name }}
             </option>
diff --git a/src/components/newtab/workflow/edit/EditNewTab.vue b/src/components/newtab/workflow/edit/EditNewTab.vue
index 0be20dcf9..b6e3f42b0 100644
--- a/src/components/newtab/workflow/edit/EditNewTab.vue
+++ b/src/components/newtab/workflow/edit/EditNewTab.vue
@@ -35,6 +35,22 @@
     >
       {{ t('workflow.blocks.new-tab.tabToGroup') }}
     </ui-checkbox>
+    <ui-checkbox
+      v-if="false"
+      :model-value="data.customUserAgent"
+      block
+      class="mt-2"
+      @change="updateData({ customUserAgent: $event })"
+    >
+      {{ t('workflow.blocks.new-tab.customUserAgent') }}
+    </ui-checkbox>
+    <ui-input
+      v-if="data.customUserAgent"
+      :model-value="data.userAgent"
+      placeholder="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
+      class="mt-1 w-full"
+      @change="updateData({ userAgent: $event })"
+    />
   </div>
 </template>
 <script setup>
diff --git a/src/components/newtab/workflow/edit/EditTriggerEvent.vue b/src/components/newtab/workflow/edit/EditTriggerEvent.vue
index 3fa60d9a6..88150e648 100644
--- a/src/components/newtab/workflow/edit/EditTriggerEvent.vue
+++ b/src/components/newtab/workflow/edit/EditTriggerEvent.vue
@@ -11,7 +11,7 @@
       </option>
     </ui-select>
     <button
-      class="mb-2 block flex items-center w-full text-left mt-2 focus:ring-0"
+      class="mb-2 block flex items-center w-full text-left mt-1 focus:ring-0"
       @click="showOptions = !showOptions"
     >
       <v-remixicon
@@ -49,6 +49,7 @@
         <component
           :is="eventComponents[data.eventType]"
           v-if="eventComponents[data.eventType]"
+          :key="data.eventName"
           :params="params"
           @update="updateParams({ ...params, ...$event })"
         />
diff --git a/src/components/newtab/workflow/edit/TriggerEventKeyboard.vue b/src/components/newtab/workflow/edit/TriggerEventKeyboard.vue
index 225f5bcca..82f033885 100644
--- a/src/components/newtab/workflow/edit/TriggerEventKeyboard.vue
+++ b/src/components/newtab/workflow/edit/TriggerEventKeyboard.vue
@@ -8,9 +8,20 @@
       {{ item }}
     </ui-checkbox>
   </div>
-  <ui-input v-model="defaultParams.code" class="w-full mt-2" label="code" />
+  <ui-input
+    v-model="defaultParams.key"
+    class="w-full mt-2"
+    label="key"
+    placeholder="a"
+    @change="findKeyDefintion"
+  />
   <div class="flex items-center mt-1 space-x-2">
-    <ui-input v-model="defaultParams.key" class="flex-1" label="key" />
+    <ui-input
+      v-model="defaultParams.code"
+      class="flex-1"
+      label="code"
+      placeholder="KeyA"
+    />
     <ui-input
       v-model.number="defaultParams.keyCode"
       type="number"
@@ -25,6 +36,7 @@
 <script setup>
 import { shallowReactive, watch, onMounted } from 'vue';
 import { objectHasKey } from '@/utils/helper';
+import { keyDefinitions } from '@/utils/us-keyboard-layout';
 
 const props = defineProps({
   params: {
@@ -45,6 +57,15 @@ const defaultParams = shallowReactive({
   repeat: false,
 });
 
+function findKeyDefintion(value) {
+  const keyDefinition = keyDefinitions[value];
+
+  if (!keyDefinition) return;
+
+  defaultParams.code = keyDefinitions[value].code;
+  defaultParams.keyCode = keyDefinitions[value].keyCode;
+}
+
 watch(
   defaultParams,
   (value) => {
diff --git a/src/content/blocks-handler/handler-event-click.js b/src/content/blocks-handler/handler-event-click.js
index a0d6c24b3..2b22a96ab 100644
--- a/src/content/blocks-handler/handler-event-click.js
+++ b/src/content/blocks-handler/handler-event-click.js
@@ -1,9 +1,37 @@
 import handleSelector from '../handle-selector';
+import { sendMessage } from '@/utils/message';
 
 function eventClick(block) {
   return new Promise((resolve, reject) => {
     handleSelector(block, {
-      onSelected(element) {
+      async onSelected(element) {
+        if (block.debugMode) {
+          const { width, height, x, y } = element.getBoundingClientRect();
+          const payload = {
+            tabId: block.activeTabId,
+            method: 'Input.dispatchMouseEvent',
+            params: {
+              x: x + width / 2,
+              y: y + height / 2,
+              button: 'left',
+            },
+          };
+          const executeCommand = (type) => {
+            payload.params.type = type;
+
+            if (type === 'mousePressed') {
+              payload.params.clickCount = 1;
+            }
+
+            return sendMessage('debugger:send-command', payload, 'background');
+          };
+
+          await executeCommand('mousePressed');
+          await executeCommand('mouseReleased');
+
+          return;
+        }
+
         if (element.click) {
           element.click();
         } else {
@@ -17,8 +45,6 @@ function eventClick(block) {
         resolve('');
       },
     });
-
-    resolve('');
   });
 }
 
diff --git a/src/content/blocks-handler/handler-hover-element.js b/src/content/blocks-handler/handler-hover-element.js
new file mode 100644
index 000000000..1ab57a172
--- /dev/null
+++ b/src/content/blocks-handler/handler-hover-element.js
@@ -0,0 +1,33 @@
+import handleSelector from '../handle-selector';
+import { sendMessage } from '@/utils/message';
+
+function eventClick(block) {
+  return new Promise((resolve, reject) => {
+    handleSelector(block, {
+      async onSelected(element) {
+        const { width, height, x, y } = element.getBoundingClientRect();
+        const payload = {
+          tabId: block.activeTabId,
+          method: 'Input.dispatchMouseEvent',
+          params: {
+            type: 'mousePressed',
+            x: x + width / 2,
+            y: y + height / 2,
+            button: 'left',
+            clickCount: 1,
+          },
+        };
+
+        await sendMessage('debugger:send-command', payload, 'background');
+      },
+      onError(error) {
+        reject(error);
+      },
+      onSuccess() {
+        resolve('');
+      },
+    });
+  });
+}
+
+export default eventClick;
diff --git a/src/content/blocks-handler/handler-trigger-event.js b/src/content/blocks-handler/handler-trigger-event.js
index 5e565f72c..0b73798ef 100644
--- a/src/content/blocks-handler/handler-trigger-event.js
+++ b/src/content/blocks-handler/handler-trigger-event.js
@@ -1,22 +1,113 @@
 import handleSelector from '../handle-selector';
+import { sendMessage } from '@/utils/message';
 import simulateEvent from '@/utils/simulate-event';
+import simulateMouseEvent from '@/utils/simulate-event/mouse-event';
 
-function triggerEvent(block) {
-  return new Promise((resolve, reject) => {
-    const { data } = block;
-
-    handleSelector(block, {
-      onSelected(element) {
-        simulateEvent(element, data.eventName, data.eventParams);
-      },
-      onSuccess() {
-        resolve(data.eventName);
-      },
-      onError(error) {
-        reject(error);
-      },
+const modifiers = {
+  altKey: 1,
+  ctrlKey: 2,
+  metKey: 3,
+  shiftKey: 4,
+};
+const eventHandlers = {
+  'mouse-event': async ({ params, sendCommand, name }) => {
+    const mouseButtons = {
+      0: { id: 1, name: 'left' },
+      1: { id: 4, name: 'middle' },
+      2: { id: 2, name: 'right' },
+    };
+    const commandParams = {
+      button: mouseButtons[params.button]?.name || 'left',
+    };
+
+    if (params.clientX) commandParams.x = params.clientX;
+    if (params.clientY) commandParams.y = params.clientY;
+
+    Object.keys(modifiers).forEach((key) => {
+      if (commandParams.modifiers) return;
+      if (params[key]) commandParams.modifiers = modifiers[key];
+    });
+
+    const mouseEvents = simulateMouseEvent({ sendCommand, commandParams });
+    const eventHandler = {
+      mouseover: 'mouseenter',
+      mouseout: 'mouseleave',
+    };
+    const eventName = eventHandler[name] || name;
+
+    await mouseEvents[eventName]();
+  },
+  'keyboard-event': async ({ name, params, sendCommand }) => {
+    const commandParams = {
+      key: params.key ?? '',
+      code: params.code ?? '',
+      autoRepeat: params.repeat,
+      windowsVirtualKeyCode: params.keyCode ?? 0,
+      type: name === 'keyup' ? 'keyUp' : 'keyDown',
+    };
+
+    Object.keys(modifiers).forEach((key) => {
+      if (commandParams.modifiers) return;
+      if (params[key]) commandParams.modifiers = modifiers[key];
     });
 
+    await sendCommand('Input.dispatchKeyEvent', commandParams);
+  },
+};
+
+function triggerEvent({ data, id, frameSelector, debugMode, activeTabId }) {
+  return new Promise((resolve, reject) => {
+    handleSelector(
+      { data, id, frameSelector },
+      {
+        async onSelected(element) {
+          const eventHandler = eventHandlers[data.eventType];
+
+          if (debugMode && eventHandler) {
+            const { x, y, width, height } = element.getBoundingClientRect();
+            const elCoordinate = {
+              x: x + width / 2,
+              y: y + height / 2,
+            };
+            const sendCommand = (method, params = {}) => {
+              const payload = {
+                method,
+                params: {
+                  x: elCoordinate.x,
+                  y: elCoordinate.y,
+                  ...params,
+                },
+                tabId: activeTabId,
+              };
+
+              return sendMessage(
+                'debugger:send-command',
+                payload,
+                'background'
+              );
+            };
+
+            await eventHandler({
+              element,
+              sendCommand,
+              name: data.eventName,
+              params: data.eventParams,
+            });
+
+            return;
+          }
+
+          simulateEvent(element, data.eventName, data.eventParams);
+        },
+        onSuccess() {
+          resolve(data.eventName);
+        },
+        onError(error) {
+          reject(error);
+        },
+      }
+    );
+
     resolve(data.eventName);
   });
 }
diff --git a/src/content/element-selector/AppHeader.vue b/src/content/element-selector/AppHeader.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/content/element-selector/comps-ui.js b/src/content/element-selector/comps-ui.js
index e871a12b9..d80f10ef7 100644
--- a/src/content/element-selector/comps-ui.js
+++ b/src/content/element-selector/comps-ui.js
@@ -4,6 +4,7 @@ import UiTabs from '@/components/ui/UiTabs.vue';
 import UiInput from '@/components/ui/UiInput.vue';
 import UiButton from '@/components/ui/UiButton.vue';
 import UiSelect from '@/components/ui/UiSelect.vue';
+import UiExpand from '@/components/ui/UiExpand.vue';
 import UiTextarea from '@/components/ui/UiTextarea.vue';
 import UiCheckbox from '@/components/ui/UiCheckbox.vue';
 import UiTabPanel from '@/components/ui/UiTabPanel.vue';
@@ -16,6 +17,7 @@ export default function (app) {
   app.component('UiInput', UiInput);
   app.component('UiButton', UiButton);
   app.component('UiSelect', UiSelect);
+  app.component('UiExpand', UiExpand);
   app.component('UiTextarea', UiTextarea);
   app.component('UiCheckbox', UiCheckbox);
   app.component('UiTabPanel', UiTabPanel);
diff --git a/src/content/element-selector/index.js b/src/content/element-selector/index.js
index c4a986a60..fb40a51c0 100644
--- a/src/content/element-selector/index.js
+++ b/src/content/element-selector/index.js
@@ -1,3 +1,6 @@
+import browser from 'webextension-polyfill';
+import initElementSelector from './main';
+
 async function getStyles() {
   try {
     const response = await fetch(chrome.runtime.getURL('/elementSelector.css'));
@@ -24,17 +27,35 @@ async function getStyles() {
   }
 }
 
-export default async function () {
-  try {
-    const rootElementExist = document.querySelector(
-      '#app-container.automa-element-selector'
-    );
+function elementSelectorInstance() {
+  const rootElementExist = document.querySelector(
+    '#app-container.automa-element-selector'
+  );
+
+  if (rootElementExist) {
+    rootElementExist.style.display = 'block';
+
+    return true;
+  }
+
+  return false;
+}
+
+(async function () {
+  browser.runtime.onMessage.addListener((data) => {
+    return new Promise((resolve) => {
+      if (data.type === 'automa-element-selector') {
+        elementSelectorInstance();
+
+        resolve(true);
+      }
+    });
+  });
 
-    if (rootElementExist) {
-      rootElementExist.style.display = 'block';
+  try {
+    const isAppExists = elementSelectorInstance();
 
-      return;
-    }
+    if (isAppExists) return;
 
     const rootElement = document.createElement('div');
     rootElement.setAttribute('id', 'app-container');
@@ -45,22 +66,16 @@ export default async function () {
     automaStyle.classList.add('automa-element-selector');
     automaStyle.innerHTML = `.automa-element-selector { pointer-events: none } \n [automa-isDragging] { user-select: none }`;
 
-    const scriptEl = document.createElement('script');
-    scriptEl.setAttribute('type', 'module');
-    scriptEl.setAttribute(
-      'src',
-      chrome.runtime.getURL('/elementSelector.bundle.js')
-    );
+    initElementSelector(rootElement);
 
     const appStyle = document.createElement('style');
     appStyle.innerHTML = await getStyles();
 
     rootElement.shadowRoot.appendChild(appStyle);
-    rootElement.shadowRoot.appendChild(scriptEl);
 
     document.documentElement.appendChild(rootElement);
     document.documentElement.appendChild(automaStyle);
   } catch (error) {
     console.error(error);
   }
-}
+})();
diff --git a/src/content/element-selector/main.js b/src/content/element-selector/main.js
index a287f40f0..6f80baf74 100644
--- a/src/content/element-selector/main.js
+++ b/src/content/element-selector/main.js
@@ -6,15 +6,16 @@ import icons from './icons';
 import vueI18n from './vue-i18n';
 import '@/assets/css/tailwind.css';
 
-const rootElement = document.querySelector('div.automa-element-selector');
-const appRoot = document.createElement('div');
-appRoot.setAttribute('id', 'app');
+export default function (rootElement) {
+  const appRoot = document.createElement('div');
+  appRoot.setAttribute('id', 'app');
 
-rootElement.shadowRoot.appendChild(appRoot);
+  rootElement.shadowRoot.appendChild(appRoot);
 
-createApp(App)
-  .provide('rootElement', rootElement)
-  .use(vueI18n)
-  .use(vRemixicon, icons)
-  .use(compsUi)
-  .mount(appRoot);
+  createApp(App)
+    .provide('rootElement', rootElement)
+    .use(vueI18n)
+    .use(vRemixicon, icons)
+    .use(compsUi)
+    .mount(appRoot);
+}
diff --git a/src/content/handle-selector.js b/src/content/handle-selector.js
index e65984599..22f571538 100644
--- a/src/content/handle-selector.js
+++ b/src/content/handle-selector.js
@@ -91,13 +91,15 @@ export default async function (
     }
 
     if (data.multiple && selectorType === 'cssSelector') {
-      element.forEach((el) => {
-        markElement(el, { id, data });
-        onSelected(el);
-      });
+      await Promise.allSettled(
+        element.map((el) => {
+          markElement(el, { id, data });
+          return onSelected(el);
+        })
+      );
     } else if (element) {
       markElement(element, { id, data });
-      onSelected(element);
+      await onSelected(element);
     }
 
     if (onSuccess) onSuccess();
diff --git a/src/content/index.js b/src/content/index.js
index e295410f3..dc87d2253 100644
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -1,7 +1,6 @@
 import browser from 'webextension-polyfill';
 import { nanoid } from 'nanoid';
 import { toCamelCase } from '@/utils/helper';
-import elementSelector from './element-selector';
 import executedBlock from './executed-block';
 import blocksHandler from './blocks-handler';
 
@@ -40,10 +39,6 @@ import blocksHandler from './blocks-handler';
         case 'content-script-exists':
           resolve(true);
           break;
-        case 'select-element':
-          elementSelector();
-          resolve(true);
-          break;
         case 'give-me-the-frame-id':
           browser.runtime.sendMessage({
             type: 'this-is-the-frame-id',
diff --git a/src/lib/v-remixicon.js b/src/lib/v-remixicon.js
index e634f1f5d..f39712111 100644
--- a/src/lib/v-remixicon.js
+++ b/src/lib/v-remixicon.js
@@ -210,6 +210,8 @@ export const icons = {
     'M11.1339746,6.5 C11.410117,6.02170738 12.0217074,5.85783222 12.5,6.1339746 C12.6618283,6.22740623 12.7876628,6.35923925 12.8726385,6.51131768 L12.8728316,6.51197847 L15.5280985,11.258439 C17.7104719,10.5794609 20.1487626,11.4726335 21.3395353,13.5351122 C22.7202472,15.9265753 21.9008714,18.9845274 19.5094083,20.3652392 C18.0316717,21.2184108 16.2512131,21.2502691 14.7625925,20.5024023 L14.5614635,20.3955914 L15.5391998,18.650876 C16.4572736,19.1653634 17.5817121,19.1687941 18.5094083,18.6331884 C19.9442862,17.8047613 20.4359116,15.9699901 19.6074845,14.5351122 C18.8086441,13.15148 17.0740576,12.6449281 15.6646114,13.35331 L15.5094083,13.437036 L15.4923149,13.408 L14.6887376,13.8579251 L11.1271684,7.48802153 C10.9611644,7.19043272 10.9514715,6.81610467 11.1339746,6.5 Z M3.69009425,12.2357175 L5.00912623,13.7390986 C4.15631502,14.4873355 3.78941522,15.6581523 4.08821537,16.7732896 C4.5170408,18.373688 6.16205167,19.3234354 7.76244998,18.89461 C9.00692272,18.5611545 9.88400974,17.477653 9.97851857,16.2240731 L9.98665134,16.0438959 L10.0023149,16.043 L10.0029449,15 L17,15 C17.1696897,14.9996082 17.342108,15.0428156 17.5,15.1339746 C17.9782926,15.410117 18.1421678,16.0217074 17.8660254,16.5 C17.6809741,16.8205182 17.3452819,16.9998396 17.000012,17.0001665 L17,17 L11.8855308,17.0005501 C11.512912,18.8188035 10.1440497,20.3270146 8.28008807,20.8264616 C5.61275756,21.5411707 2.87107277,19.9582583 2.15636371,17.2909277 C1.67853507,15.507647 2.22314594,13.6374116 3.52361777,12.3885391 L3.69009425,12.2357175 Z M12,2 C14.6887547,2 16.8818181,4.12230671 16.9953805,6.78311038 L17,7 L15,7 C15,5.34314575 13.6568542,4 12,4 C10.3431458,4 9,5.34314575 9,7 C9,8.03663591 9.52964394,8.97937227 10.3797433,9.52549875 L10.4663149,9.577 L11.4242264,10.1109289 L7.87365874,16.4865392 L7.8723149,16.486 L7.8660254,16.5 C7.60960748,16.9441289 7.06395121,17.1171529 6.60436072,16.9185096 L6.5,16.8660254 C6.02170738,16.589883 5.85783222,15.9782926 6.1339746,15.5 L6.12634126,15.5134608 L8.7500113,10.80028 C7.65887804,9.86710067 7,8.49115157 7,7 C7,4.23857625 9.23857625,2 12,2 Z',
   mdiGoogleSheet:
     'M19,11V9H11V5H9V9H5V11H9V19H11V11H19M19,3C19.5,3 20,3.2 20.39,3.61C20.8,4 21,4.5 21,5V19C21,19.5 20.8,20 20.39,20.39C20,20.8 19.5,21 19,21H5C4.5,21 4,20.8 3.61,20.39C3.2,20 3,19.5 3,19V5C3,4.5 3.2,4 3.61,3.61C4,3.2 4.5,3 5,3H19Z',
+  mdiCursorDefaultClickOutline:
+    'M11.5,11L17.88,16.37L17,16.55L16.36,16.67C15.73,16.8 15.37,17.5 15.65,18.07L15.92,18.65L17.28,21.59L15.86,22.25L14.5,19.32L14.24,18.74C13.97,18.15 13.22,17.97 12.72,18.38L12.21,18.78L11.5,19.35V11M10.76,8.69A0.76,0.76 0 0,0 10,9.45V20.9C10,21.32 10.34,21.66 10.76,21.66C10.95,21.66 11.11,21.6 11.24,21.5L13.15,19.95L14.81,23.57C14.94,23.84 15.21,24 15.5,24C15.61,24 15.72,24 15.83,23.92L18.59,22.64C18.97,22.46 19.15,22 18.95,21.63L17.28,18L19.69,17.55C19.85,17.5 20,17.43 20.12,17.29C20.39,16.97 20.35,16.5 20,16.21L11.26,8.86L11.25,8.87C11.12,8.76 10.95,8.69 10.76,8.69M15,10V8H20V10H15M13.83,4.76L16.66,1.93L18.07,3.34L15.24,6.17L13.83,4.76M10,0H12V5H10V0M3.93,14.66L6.76,11.83L8.17,13.24L5.34,16.07L3.93,14.66M3.93,3.34L5.34,1.93L8.17,4.76L6.76,6.17L3.93,3.34M7,10H2V8H7V10',
 };
 
 export default vRemixicon;
diff --git a/src/locales/en/blocks.json b/src/locales/en/blocks.json
index 302608b32..6bef2dc3e 100644
--- a/src/locales/en/blocks.json
+++ b/src/locales/en/blocks.json
@@ -52,6 +52,10 @@
         "noPermission": "Don't have permission to access the clipboard",
         "grantPermission": "Grant permission"
       },
+      "hover-element": {
+        "name": "Hover element",
+        "description": "Hover over an element"
+      },
       "upload-file": {
         "name": "Upload file",
         "description": "Upload file into <input type=\"file\"> element",
@@ -270,6 +274,7 @@
         "name": "New tab",
         "description": "",
         "url": "New Tab URL",
+        "customUserAgent": "Use custom User-Agent",
         "activeTab": "Set as active tab",
         "tabToGroup": "Add tab to group",
         "updatePrevTab": {
diff --git a/src/locales/en/newtab.json b/src/locales/en/newtab.json
index 1d3b618a2..098e9adb2 100644
--- a/src/locales/en/newtab.json
+++ b/src/locales/en/newtab.json
@@ -158,11 +158,16 @@
       "saveLog": "Save workflow log",
       "executedBlockOnWeb": "Show executed block on web page",
       "debugMode": "Debug mode",
+      "restartWorkflow": {
+        "for": "Restart for",
+        "times": "Times"
+      },
       "onError": {
         "title": "On workflow error",
         "items": {
           "keepRunning": "Keep running",
-          "stopWorkflow": "Stop workflow"
+          "stopWorkflow": "Stop workflow",
+          "restartWorkflow": "Restart workflow"
         }
       },
       "timeout": {
@@ -199,6 +204,10 @@
     "selectAll": "Select all",
     "deselectAll": "Deselect all",
     "deleteSelected": "Delete selected logs",
+    "clearLogs": {
+      "title": "Clear logs",
+      "description": "Are you sure to clear all logs?"
+    },
     "types": {
       "stop": "Workflow is stopped",
       "finish": "Finish"
@@ -226,6 +235,7 @@
       "not-iframe": "Element with \"{selector}\" selector is not an Iframe element",
       "iframe-not-found": "Can't find an Iframe element with \"{selector}\" selector.",
       "workflow-infinite-loop": "Can't execute the workflow to prevent an infinite loop",
+      "not-debug-mode": "The workflow must run in debug mode for this block to work properly",
       "no-iframe-id": "Can't find Frame ID for the iframe element with \"{selector}\" selector",
       "no-tab": "Can't connect to a tab, use \"New tab\" or \"Active tab\" block before using the \"{name}\" block."
     },
diff --git a/src/manifest.json b/src/manifest.json
index 6d36f921e..45b4fa507 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -46,13 +46,15 @@
     }
   ],
   "optional_permissions": [
-    "clipboardRead"
+    "clipboardRead",
+    "debugger"
   ],
   "permissions": [
     "tabs",
     "proxy",
     "alarms",
     "storage",
+    "debugger",
     "webNavigation",
     "unlimitedStorage",
     "<all_urls>"
diff --git a/src/models/workflow.js b/src/models/workflow.js
index 7e87b04db..a4a38a959 100644
--- a/src/models/workflow.js
+++ b/src/models/workflow.js
@@ -34,6 +34,7 @@ class Workflow extends Model {
         blockDelay: 0,
         saveLog: true,
         debugMode: false,
+        restartTimes: 3,
         onError: 'stop-workflow',
         executedBlockOnWeb: false,
       }),
diff --git a/src/newtab/pages/Logs.vue b/src/newtab/pages/Logs.vue
index 189b4a685..42cd8b52c 100644
--- a/src/newtab/pages/Logs.vue
+++ b/src/newtab/pages/Logs.vue
@@ -4,6 +4,7 @@
     <logs-filters
       :sorts="sortsBuilder"
       :filters="filtersBuilder"
+      @clear="clearLogs"
       @updateSorts="sortsBuilder[$event.key] = $event.value"
       @updateFilters="filtersBuilder[$event.key] = $event.value"
     />
@@ -184,6 +185,19 @@ function deleteSelectedLogs() {
     },
   });
 }
+function clearLogs() {
+  dialog.confirm({
+    title: t('log.clearLogs.title'),
+    okVariant: 'danger',
+    body: t('log.clearLogs.description'),
+    onConfirm: () => {
+      Log.deleteAll().then(() => {
+        selectedLogs.value = [];
+        store.dispatch('saveToStorage', 'logs');
+      });
+    },
+  });
+}
 function selectAllLogs() {
   if (selectedLogs.value.length >= logs.value.length) {
     selectedLogs.value = [];
diff --git a/src/popup/pages/Home.vue b/src/popup/pages/Home.vue
index 87f590692..0634fac6a 100644
--- a/src/popup/pages/Home.vue
+++ b/src/popup/pages/Home.vue
@@ -18,7 +18,7 @@
         "
         icon
         class="mr-2"
-        @click="selectElement"
+        @click="initElementSelector"
       >
         <v-remixicon name="riFocus3Line" />
       </ui-button>
@@ -124,25 +124,21 @@ function deleteWorkflow({ id, name }) {
 function openDashboard(url) {
   sendMessage('open:dashboard', url, 'background');
 }
-async function selectElement() {
+async function initElementSelector() {
   const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
 
   try {
     await browser.tabs.sendMessage(tab.id, {
-      type: 'content-script-exists',
-    });
-
-    browser.tabs.sendMessage(tab.id, {
-      type: 'select-element',
+      type: 'automa-element-selector',
     });
   } catch (error) {
     if (error.message.includes('Could not establish connection.')) {
       await browser.tabs.executeScript(tab.id, {
         allFrames: true,
-        file: './contentScript.bundle.js',
+        file: './elementSelector.bundle.js',
       });
 
-      selectElement();
+      initElementSelector();
     }
 
     console.error(error);
diff --git a/src/utils/data-exporter.js b/src/utils/data-exporter.js
index f3c990c8e..d03bf4e1e 100644
--- a/src/utils/data-exporter.js
+++ b/src/utils/data-exporter.js
@@ -56,7 +56,7 @@ export default function (data, { name, type, addBOMHeader }, converted) {
 
   const payload = [result];
 
-  if (addBOMHeader) {
+  if (type === 'csv' && addBOMHeader) {
     payload.unshift(new Uint8Array([0xef, 0xbb, 0xbf]));
   }
 
diff --git a/src/utils/handle-form-element.js b/src/utils/handle-form-element.js
index 99a967be3..ce0ee236d 100644
--- a/src/utils/handle-form-element.js
+++ b/src/utils/handle-form-element.js
@@ -1,22 +1,28 @@
+import { keyDefinitions } from '@/utils/us-keyboard-layout';
 import simulateEvent from './simulate-event';
 
 function formEvent(element, data) {
   if (data.type === 'text-field') {
-    const code = /\s/.test(data.value)
-      ? 'Space'
-      : `key${data.value.toUpperCase()}`;
+    const currentKey = /\s/.test(data.value) ? 'Space' : data.value;
+    const { key, keyCode, code } = keyDefinitions[currentKey] || {
+      key: currentKey,
+      keyCode: 0,
+      code: `Key${currentKey}`,
+    };
 
     simulateEvent(element, 'keydown', {
+      key,
       code,
+      keyCode,
       bubbles: true,
       cancelable: true,
-      key: data.value,
     });
     simulateEvent(element, 'keyup', {
+      key,
       code,
+      keyCode,
       bubbles: true,
       cancelable: true,
-      key: data.value,
     });
   }
 
diff --git a/src/utils/helper.js b/src/utils/helper.js
index aabba29c3..ecebecbaa 100644
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -1,3 +1,7 @@
+export function sleep(timeout = 500) {
+  return new Promise((resolve) => setTimeout(resolve, timeout));
+}
+
 export function findTriggerBlock(drawflow = {}) {
   if (!drawflow) return null;
 
diff --git a/src/utils/shared.js b/src/utils/shared.js
index 3f6132941..34712f30e 100644
--- a/src/utils/shared.js
+++ b/src/utils/shared.js
@@ -75,9 +75,11 @@ export const tasks = {
     data: {
       description: '',
       url: '',
+      userAgent: '',
       active: true,
       inGroup: false,
       updatePrevTab: false,
+      customUserAgent: false,
     },
   },
   'switch-tab': {
@@ -495,7 +497,7 @@ export const tasks = {
       findBy: 'cssSelector',
       waitForSelector: false,
       waitSelectorTimeout: 5000,
-      selector: '',
+      selector: 'html',
       markEl: false,
       multiple: false,
       eventName: '',
@@ -721,6 +723,28 @@ export const tasks = {
       filePaths: [],
     },
   },
+  'hover-element': {
+    name: 'Hover element',
+    description: 'Hover over an element',
+    icon: 'mdiCursorDefaultClickOutline',
+    component: 'BlockBasic',
+    editComponent: 'EditInteractionBase',
+    category: 'interaction',
+    inputs: 1,
+    outputs: 1,
+    allowedInputs: true,
+    maxConnection: 1,
+    refDataKeys: ['selector'],
+    data: {
+      description: '',
+      findBy: 'cssSelector',
+      waitForSelector: false,
+      waitSelectorTimeout: 5000,
+      selector: '',
+      markEl: false,
+      multiple: false,
+    },
+  },
 };
 
 export const categories = {
diff --git a/src/utils/simulate-event.js b/src/utils/simulate-event/index.js
similarity index 96%
rename from src/utils/simulate-event.js
rename to src/utils/simulate-event/index.js
index b13c3d16d..e9a434c08 100644
--- a/src/utils/simulate-event.js
+++ b/src/utils/simulate-event/index.js
@@ -1,4 +1,4 @@
-import { eventList } from './shared';
+import { eventList } from '../shared';
 
 export function getEventObj(name, params) {
   const eventType = eventList.find(({ id }) => id === name)?.type ?? '';
diff --git a/src/utils/simulate-event/mouse-event.js b/src/utils/simulate-event/mouse-event.js
new file mode 100644
index 000000000..4994da9f0
--- /dev/null
+++ b/src/utils/simulate-event/mouse-event.js
@@ -0,0 +1,44 @@
+export default function ({ sendCommand, commandParams }) {
+  async function mousedown() {
+    commandParams.type = 'mousePressed';
+    await sendCommand('Input.dispatchMouseEvent', commandParams);
+  }
+  async function mouseup() {
+    commandParams.type = 'mouseReleased';
+    await sendCommand('Input.dispatchMouseEvent', commandParams);
+  }
+  async function click() {
+    if (!commandParams.clickCount) commandParams.clickCount = 1;
+
+    await mousedown();
+    await mouseup();
+  }
+  async function dblclick() {
+    commandParams.clickCount = 2;
+    await click();
+  }
+  async function mousemove() {
+    commandParams.type = 'mouseMoved';
+    await sendCommand('Input.dispatchMouseEvent', commandParams);
+  }
+  async function mouseenter() {
+    await mousemove();
+  }
+  async function mouseleave() {
+    await mousemove();
+
+    commandParams.x = -100;
+    commandParams.y = -100;
+    await mousemove();
+  }
+
+  return {
+    mousedown,
+    mouseup,
+    click,
+    dblclick,
+    mousemove,
+    mouseenter,
+    mouseleave,
+  };
+}
diff --git a/src/utils/us-keyboard-layout.js b/src/utils/us-keyboard-layout.js
new file mode 100644
index 000000000..da67a1e8e
--- /dev/null
+++ b/src/utils/us-keyboard-layout.js
@@ -0,0 +1,409 @@
+/*
+  Forked from:
+  https://github.com/puppeteer/puppeteer/blob/e11fe713407c2430526ae616d0adfb5dd278b5de/src/common/USKeyboardLayout.ts
+*/
+
+/**
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @internal
+ */
+export const keyDefinitions = {
+  0: { keyCode: 48, key: '0', code: 'Digit0' },
+  1: { keyCode: 49, key: '1', code: 'Digit1' },
+  2: { keyCode: 50, key: '2', code: 'Digit2' },
+  3: { keyCode: 51, key: '3', code: 'Digit3' },
+  4: { keyCode: 52, key: '4', code: 'Digit4' },
+  5: { keyCode: 53, key: '5', code: 'Digit5' },
+  6: { keyCode: 54, key: '6', code: 'Digit6' },
+  7: { keyCode: 55, key: '7', code: 'Digit7' },
+  8: { keyCode: 56, key: '8', code: 'Digit8' },
+  9: { keyCode: 57, key: '9', code: 'Digit9' },
+  Power: { key: 'Power', code: 'Power' },
+  Eject: { key: 'Eject', code: 'Eject' },
+  Abort: { keyCode: 3, code: 'Abort', key: 'Cancel' },
+  Help: { keyCode: 6, code: 'Help', key: 'Help' },
+  Backspace: { keyCode: 8, code: 'Backspace', key: 'Backspace' },
+  Tab: { keyCode: 9, code: 'Tab', key: 'Tab' },
+  Numpad5: {
+    keyCode: 12,
+    shiftKeyCode: 101,
+    key: 'Clear',
+    code: 'Numpad5',
+    shiftKey: '5',
+    location: 3,
+  },
+  NumpadEnter: {
+    keyCode: 13,
+    code: 'NumpadEnter',
+    key: 'Enter',
+    text: '\r',
+    location: 3,
+  },
+  Enter: { keyCode: 13, code: 'Enter', key: 'Enter', text: '\r' },
+  '\r': { keyCode: 13, code: 'Enter', key: 'Enter', text: '\r' },
+  '\n': { keyCode: 13, code: 'Enter', key: 'Enter', text: '\r' },
+  ShiftLeft: { keyCode: 16, code: 'ShiftLeft', key: 'Shift', location: 1 },
+  ShiftRight: { keyCode: 16, code: 'ShiftRight', key: 'Shift', location: 2 },
+  ControlLeft: {
+    keyCode: 17,
+    code: 'ControlLeft',
+    key: 'Control',
+    location: 1,
+  },
+  ControlRight: {
+    keyCode: 17,
+    code: 'ControlRight',
+    key: 'Control',
+    location: 2,
+  },
+  AltLeft: { keyCode: 18, code: 'AltLeft', key: 'Alt', location: 1 },
+  AltRight: { keyCode: 18, code: 'AltRight', key: 'Alt', location: 2 },
+  Pause: { keyCode: 19, code: 'Pause', key: 'Pause' },
+  CapsLock: { keyCode: 20, code: 'CapsLock', key: 'CapsLock' },
+  Escape: { keyCode: 27, code: 'Escape', key: 'Escape' },
+  Convert: { keyCode: 28, code: 'Convert', key: 'Convert' },
+  NonConvert: { keyCode: 29, code: 'NonConvert', key: 'NonConvert' },
+  Space: { keyCode: 32, code: 'Space', key: ' ' },
+  Numpad9: {
+    keyCode: 33,
+    shiftKeyCode: 105,
+    key: 'PageUp',
+    code: 'Numpad9',
+    shiftKey: '9',
+    location: 3,
+  },
+  PageUp: { keyCode: 33, code: 'PageUp', key: 'PageUp' },
+  Numpad3: {
+    keyCode: 34,
+    shiftKeyCode: 99,
+    key: 'PageDown',
+    code: 'Numpad3',
+    shiftKey: '3',
+    location: 3,
+  },
+  PageDown: { keyCode: 34, code: 'PageDown', key: 'PageDown' },
+  End: { keyCode: 35, code: 'End', key: 'End' },
+  Numpad1: {
+    keyCode: 35,
+    shiftKeyCode: 97,
+    key: 'End',
+    code: 'Numpad1',
+    shiftKey: '1',
+    location: 3,
+  },
+  Home: { keyCode: 36, code: 'Home', key: 'Home' },
+  Numpad7: {
+    keyCode: 36,
+    shiftKeyCode: 103,
+    key: 'Home',
+    code: 'Numpad7',
+    shiftKey: '7',
+    location: 3,
+  },
+  ArrowLeft: { keyCode: 37, code: 'ArrowLeft', key: 'ArrowLeft' },
+  Numpad4: {
+    keyCode: 37,
+    shiftKeyCode: 100,
+    key: 'ArrowLeft',
+    code: 'Numpad4',
+    shiftKey: '4',
+    location: 3,
+  },
+  Numpad8: {
+    keyCode: 38,
+    shiftKeyCode: 104,
+    key: 'ArrowUp',
+    code: 'Numpad8',
+    shiftKey: '8',
+    location: 3,
+  },
+  ArrowUp: { keyCode: 38, code: 'ArrowUp', key: 'ArrowUp' },
+  ArrowRight: { keyCode: 39, code: 'ArrowRight', key: 'ArrowRight' },
+  Numpad6: {
+    keyCode: 39,
+    shiftKeyCode: 102,
+    key: 'ArrowRight',
+    code: 'Numpad6',
+    shiftKey: '6',
+    location: 3,
+  },
+  Numpad2: {
+    keyCode: 40,
+    shiftKeyCode: 98,
+    key: 'ArrowDown',
+    code: 'Numpad2',
+    shiftKey: '2',
+    location: 3,
+  },
+  ArrowDown: { keyCode: 40, code: 'ArrowDown', key: 'ArrowDown' },
+  Select: { keyCode: 41, code: 'Select', key: 'Select' },
+  Open: { keyCode: 43, code: 'Open', key: 'Execute' },
+  PrintScreen: { keyCode: 44, code: 'PrintScreen', key: 'PrintScreen' },
+  Insert: { keyCode: 45, code: 'Insert', key: 'Insert' },
+  Numpad0: {
+    keyCode: 45,
+    shiftKeyCode: 96,
+    key: 'Insert',
+    code: 'Numpad0',
+    shiftKey: '0',
+    location: 3,
+  },
+  Delete: { keyCode: 46, code: 'Delete', key: 'Delete' },
+  NumpadDecimal: {
+    keyCode: 46,
+    shiftKeyCode: 110,
+    code: 'NumpadDecimal',
+    key: '\u0000',
+    shiftKey: '.',
+    location: 3,
+  },
+  Digit0: { keyCode: 48, code: 'Digit0', shiftKey: ')', key: '0' },
+  Digit1: { keyCode: 49, code: 'Digit1', shiftKey: '!', key: '1' },
+  Digit2: { keyCode: 50, code: 'Digit2', shiftKey: '@', key: '2' },
+  Digit3: { keyCode: 51, code: 'Digit3', shiftKey: '#', key: '3' },
+  Digit4: { keyCode: 52, code: 'Digit4', shiftKey: '$', key: '4' },
+  Digit5: { keyCode: 53, code: 'Digit5', shiftKey: '%', key: '5' },
+  Digit6: { keyCode: 54, code: 'Digit6', shiftKey: '^', key: '6' },
+  Digit7: { keyCode: 55, code: 'Digit7', shiftKey: '&', key: '7' },
+  Digit8: { keyCode: 56, code: 'Digit8', shiftKey: '*', key: '8' },
+  Digit9: { keyCode: 57, code: 'Digit9', shiftKey: '(', key: '9' },
+  KeyA: { keyCode: 65, code: 'KeyA', shiftKey: 'A', key: 'a' },
+  KeyB: { keyCode: 66, code: 'KeyB', shiftKey: 'B', key: 'b' },
+  KeyC: { keyCode: 67, code: 'KeyC', shiftKey: 'C', key: 'c' },
+  KeyD: { keyCode: 68, code: 'KeyD', shiftKey: 'D', key: 'd' },
+  KeyE: { keyCode: 69, code: 'KeyE', shiftKey: 'E', key: 'e' },
+  KeyF: { keyCode: 70, code: 'KeyF', shiftKey: 'F', key: 'f' },
+  KeyG: { keyCode: 71, code: 'KeyG', shiftKey: 'G', key: 'g' },
+  KeyH: { keyCode: 72, code: 'KeyH', shiftKey: 'H', key: 'h' },
+  KeyI: { keyCode: 73, code: 'KeyI', shiftKey: 'I', key: 'i' },
+  KeyJ: { keyCode: 74, code: 'KeyJ', shiftKey: 'J', key: 'j' },
+  KeyK: { keyCode: 75, code: 'KeyK', shiftKey: 'K', key: 'k' },
+  KeyL: { keyCode: 76, code: 'KeyL', shiftKey: 'L', key: 'l' },
+  KeyM: { keyCode: 77, code: 'KeyM', shiftKey: 'M', key: 'm' },
+  KeyN: { keyCode: 78, code: 'KeyN', shiftKey: 'N', key: 'n' },
+  KeyO: { keyCode: 79, code: 'KeyO', shiftKey: 'O', key: 'o' },
+  KeyP: { keyCode: 80, code: 'KeyP', shiftKey: 'P', key: 'p' },
+  KeyQ: { keyCode: 81, code: 'KeyQ', shiftKey: 'Q', key: 'q' },
+  KeyR: { keyCode: 82, code: 'KeyR', shiftKey: 'R', key: 'r' },
+  KeyS: { keyCode: 83, code: 'KeyS', shiftKey: 'S', key: 's' },
+  KeyT: { keyCode: 84, code: 'KeyT', shiftKey: 'T', key: 't' },
+  KeyU: { keyCode: 85, code: 'KeyU', shiftKey: 'U', key: 'u' },
+  KeyV: { keyCode: 86, code: 'KeyV', shiftKey: 'V', key: 'v' },
+  KeyW: { keyCode: 87, code: 'KeyW', shiftKey: 'W', key: 'w' },
+  KeyX: { keyCode: 88, code: 'KeyX', shiftKey: 'X', key: 'x' },
+  KeyY: { keyCode: 89, code: 'KeyY', shiftKey: 'Y', key: 'y' },
+  KeyZ: { keyCode: 90, code: 'KeyZ', shiftKey: 'Z', key: 'z' },
+  MetaLeft: { keyCode: 91, code: 'MetaLeft', key: 'Meta', location: 1 },
+  MetaRight: { keyCode: 92, code: 'MetaRight', key: 'Meta', location: 2 },
+  ContextMenu: { keyCode: 93, code: 'ContextMenu', key: 'ContextMenu' },
+  NumpadMultiply: {
+    keyCode: 106,
+    code: 'NumpadMultiply',
+    key: '*',
+    location: 3,
+  },
+  NumpadAdd: { keyCode: 107, code: 'NumpadAdd', key: '+', location: 3 },
+  NumpadSubtract: {
+    keyCode: 109,
+    code: 'NumpadSubtract',
+    key: '-',
+    location: 3,
+  },
+  NumpadDivide: { keyCode: 111, code: 'NumpadDivide', key: '/', location: 3 },
+  F1: { keyCode: 112, code: 'F1', key: 'F1' },
+  F2: { keyCode: 113, code: 'F2', key: 'F2' },
+  F3: { keyCode: 114, code: 'F3', key: 'F3' },
+  F4: { keyCode: 115, code: 'F4', key: 'F4' },
+  F5: { keyCode: 116, code: 'F5', key: 'F5' },
+  F6: { keyCode: 117, code: 'F6', key: 'F6' },
+  F7: { keyCode: 118, code: 'F7', key: 'F7' },
+  F8: { keyCode: 119, code: 'F8', key: 'F8' },
+  F9: { keyCode: 120, code: 'F9', key: 'F9' },
+  F10: { keyCode: 121, code: 'F10', key: 'F10' },
+  F11: { keyCode: 122, code: 'F11', key: 'F11' },
+  F12: { keyCode: 123, code: 'F12', key: 'F12' },
+  F13: { keyCode: 124, code: 'F13', key: 'F13' },
+  F14: { keyCode: 125, code: 'F14', key: 'F14' },
+  F15: { keyCode: 126, code: 'F15', key: 'F15' },
+  F16: { keyCode: 127, code: 'F16', key: 'F16' },
+  F17: { keyCode: 128, code: 'F17', key: 'F17' },
+  F18: { keyCode: 129, code: 'F18', key: 'F18' },
+  F19: { keyCode: 130, code: 'F19', key: 'F19' },
+  F20: { keyCode: 131, code: 'F20', key: 'F20' },
+  F21: { keyCode: 132, code: 'F21', key: 'F21' },
+  F22: { keyCode: 133, code: 'F22', key: 'F22' },
+  F23: { keyCode: 134, code: 'F23', key: 'F23' },
+  F24: { keyCode: 135, code: 'F24', key: 'F24' },
+  NumLock: { keyCode: 144, code: 'NumLock', key: 'NumLock' },
+  ScrollLock: { keyCode: 145, code: 'ScrollLock', key: 'ScrollLock' },
+  AudioVolumeMute: {
+    keyCode: 173,
+    code: 'AudioVolumeMute',
+    key: 'AudioVolumeMute',
+  },
+  AudioVolumeDown: {
+    keyCode: 174,
+    code: 'AudioVolumeDown',
+    key: 'AudioVolumeDown',
+  },
+  AudioVolumeUp: { keyCode: 175, code: 'AudioVolumeUp', key: 'AudioVolumeUp' },
+  MediaTrackNext: {
+    keyCode: 176,
+    code: 'MediaTrackNext',
+    key: 'MediaTrackNext',
+  },
+  MediaTrackPrevious: {
+    keyCode: 177,
+    code: 'MediaTrackPrevious',
+    key: 'MediaTrackPrevious',
+  },
+  MediaStop: { keyCode: 178, code: 'MediaStop', key: 'MediaStop' },
+  MediaPlayPause: {
+    keyCode: 179,
+    code: 'MediaPlayPause',
+    key: 'MediaPlayPause',
+  },
+  Semicolon: { keyCode: 186, code: 'Semicolon', shiftKey: ':', key: ';' },
+  Equal: { keyCode: 187, code: 'Equal', shiftKey: '+', key: '=' },
+  NumpadEqual: { keyCode: 187, code: 'NumpadEqual', key: '=', location: 3 },
+  Comma: { keyCode: 188, code: 'Comma', shiftKey: '<', key: ',' },
+  Minus: { keyCode: 189, code: 'Minus', shiftKey: '_', key: '-' },
+  Period: { keyCode: 190, code: 'Period', shiftKey: '>', key: '.' },
+  Slash: { keyCode: 191, code: 'Slash', shiftKey: '?', key: '/' },
+  Backquote: { keyCode: 192, code: 'Backquote', shiftKey: '~', key: '`' },
+  BracketLeft: { keyCode: 219, code: 'BracketLeft', shiftKey: '{', key: '[' },
+  Backslash: { keyCode: 220, code: 'Backslash', shiftKey: '|', key: '\\' },
+  BracketRight: { keyCode: 221, code: 'BracketRight', shiftKey: '}', key: ']' },
+  Quote: { keyCode: 222, code: 'Quote', shiftKey: '"', key: "'" },
+  AltGraph: { keyCode: 225, code: 'AltGraph', key: 'AltGraph' },
+  Props: { keyCode: 247, code: 'Props', key: 'CrSel' },
+  Cancel: { keyCode: 3, key: 'Cancel', code: 'Abort' },
+  Clear: { keyCode: 12, key: 'Clear', code: 'Numpad5', location: 3 },
+  Shift: { keyCode: 16, key: 'Shift', code: 'ShiftLeft', location: 1 },
+  Control: { keyCode: 17, key: 'Control', code: 'ControlLeft', location: 1 },
+  Alt: { keyCode: 18, key: 'Alt', code: 'AltLeft', location: 1 },
+  Accept: { keyCode: 30, key: 'Accept' },
+  ModeChange: { keyCode: 31, key: 'ModeChange' },
+  ' ': { keyCode: 32, key: ' ', code: 'Space' },
+  Print: { keyCode: 42, key: 'Print' },
+  Execute: { keyCode: 43, key: 'Execute', code: 'Open' },
+  '\u0000': { keyCode: 46, key: '\u0000', code: 'NumpadDecimal', location: 3 },
+  a: { keyCode: 65, key: 'a', code: 'KeyA' },
+  b: { keyCode: 66, key: 'b', code: 'KeyB' },
+  c: { keyCode: 67, key: 'c', code: 'KeyC' },
+  d: { keyCode: 68, key: 'd', code: 'KeyD' },
+  e: { keyCode: 69, key: 'e', code: 'KeyE' },
+  f: { keyCode: 70, key: 'f', code: 'KeyF' },
+  g: { keyCode: 71, key: 'g', code: 'KeyG' },
+  h: { keyCode: 72, key: 'h', code: 'KeyH' },
+  i: { keyCode: 73, key: 'i', code: 'KeyI' },
+  j: { keyCode: 74, key: 'j', code: 'KeyJ' },
+  k: { keyCode: 75, key: 'k', code: 'KeyK' },
+  l: { keyCode: 76, key: 'l', code: 'KeyL' },
+  m: { keyCode: 77, key: 'm', code: 'KeyM' },
+  n: { keyCode: 78, key: 'n', code: 'KeyN' },
+  o: { keyCode: 79, key: 'o', code: 'KeyO' },
+  p: { keyCode: 80, key: 'p', code: 'KeyP' },
+  q: { keyCode: 81, key: 'q', code: 'KeyQ' },
+  r: { keyCode: 82, key: 'r', code: 'KeyR' },
+  s: { keyCode: 83, key: 's', code: 'KeyS' },
+  t: { keyCode: 84, key: 't', code: 'KeyT' },
+  u: { keyCode: 85, key: 'u', code: 'KeyU' },
+  v: { keyCode: 86, key: 'v', code: 'KeyV' },
+  w: { keyCode: 87, key: 'w', code: 'KeyW' },
+  x: { keyCode: 88, key: 'x', code: 'KeyX' },
+  y: { keyCode: 89, key: 'y', code: 'KeyY' },
+  z: { keyCode: 90, key: 'z', code: 'KeyZ' },
+  Meta: { keyCode: 91, key: 'Meta', code: 'MetaLeft', location: 1 },
+  '*': { keyCode: 106, key: '*', code: 'NumpadMultiply', location: 3 },
+  '+': { keyCode: 107, key: '+', code: 'NumpadAdd', location: 3 },
+  '-': { keyCode: 109, key: '-', code: 'NumpadSubtract', location: 3 },
+  '/': { keyCode: 111, key: '/', code: 'NumpadDivide', location: 3 },
+  ';': { keyCode: 186, key: ';', code: 'Semicolon' },
+  '=': { keyCode: 187, key: '=', code: 'Equal' },
+  ',': { keyCode: 188, key: ',', code: 'Comma' },
+  '.': { keyCode: 190, key: '.', code: 'Period' },
+  '`': { keyCode: 192, key: '`', code: 'Backquote' },
+  '[': { keyCode: 219, key: '[', code: 'BracketLeft' },
+  '\\': { keyCode: 220, key: '\\', code: 'Backslash' },
+  ']': { keyCode: 221, key: ']', code: 'BracketRight' },
+  "'": { keyCode: 222, key: "'", code: 'Quote' },
+  Attn: { keyCode: 246, key: 'Attn' },
+  CrSel: { keyCode: 247, key: 'CrSel', code: 'Props' },
+  ExSel: { keyCode: 248, key: 'ExSel' },
+  EraseEof: { keyCode: 249, key: 'EraseEof' },
+  Play: { keyCode: 250, key: 'Play' },
+  ZoomOut: { keyCode: 251, key: 'ZoomOut' },
+  ')': { keyCode: 48, key: ')', code: 'Digit0' },
+  '!': { keyCode: 49, key: '!', code: 'Digit1' },
+  '@': { keyCode: 50, key: '@', code: 'Digit2' },
+  '#': { keyCode: 51, key: '#', code: 'Digit3' },
+  $: { keyCode: 52, key: '$', code: 'Digit4' },
+  '%': { keyCode: 53, key: '%', code: 'Digit5' },
+  '^': { keyCode: 54, key: '^', code: 'Digit6' },
+  '&': { keyCode: 55, key: '&', code: 'Digit7' },
+  '(': { keyCode: 57, key: '(', code: 'Digit9' },
+  A: { keyCode: 65, key: 'A', code: 'KeyA' },
+  B: { keyCode: 66, key: 'B', code: 'KeyB' },
+  C: { keyCode: 67, key: 'C', code: 'KeyC' },
+  D: { keyCode: 68, key: 'D', code: 'KeyD' },
+  E: { keyCode: 69, key: 'E', code: 'KeyE' },
+  F: { keyCode: 70, key: 'F', code: 'KeyF' },
+  G: { keyCode: 71, key: 'G', code: 'KeyG' },
+  H: { keyCode: 72, key: 'H', code: 'KeyH' },
+  I: { keyCode: 73, key: 'I', code: 'KeyI' },
+  J: { keyCode: 74, key: 'J', code: 'KeyJ' },
+  K: { keyCode: 75, key: 'K', code: 'KeyK' },
+  L: { keyCode: 76, key: 'L', code: 'KeyL' },
+  M: { keyCode: 77, key: 'M', code: 'KeyM' },
+  N: { keyCode: 78, key: 'N', code: 'KeyN' },
+  O: { keyCode: 79, key: 'O', code: 'KeyO' },
+  P: { keyCode: 80, key: 'P', code: 'KeyP' },
+  Q: { keyCode: 81, key: 'Q', code: 'KeyQ' },
+  R: { keyCode: 82, key: 'R', code: 'KeyR' },
+  S: { keyCode: 83, key: 'S', code: 'KeyS' },
+  T: { keyCode: 84, key: 'T', code: 'KeyT' },
+  U: { keyCode: 85, key: 'U', code: 'KeyU' },
+  V: { keyCode: 86, key: 'V', code: 'KeyV' },
+  W: { keyCode: 87, key: 'W', code: 'KeyW' },
+  X: { keyCode: 88, key: 'X', code: 'KeyX' },
+  Y: { keyCode: 89, key: 'Y', code: 'KeyY' },
+  Z: { keyCode: 90, key: 'Z', code: 'KeyZ' },
+  ':': { keyCode: 186, key: ':', code: 'Semicolon' },
+  '<': { keyCode: 188, key: '<', code: 'Comma' },
+  _: { keyCode: 189, key: '_', code: 'Minus' },
+  '>': { keyCode: 190, key: '>', code: 'Period' },
+  '?': { keyCode: 191, key: '?', code: 'Slash' },
+  '~': { keyCode: 192, key: '~', code: 'Backquote' },
+  '{': { keyCode: 219, key: '{', code: 'BracketLeft' },
+  '|': { keyCode: 220, key: '|', code: 'Backslash' },
+  '}': { keyCode: 221, key: '}', code: 'BracketRight' },
+  '"': { keyCode: 222, key: '"', code: 'Quote' },
+  SoftLeft: { key: 'SoftLeft', code: 'SoftLeft', location: 4 },
+  SoftRight: { key: 'SoftRight', code: 'SoftRight', location: 4 },
+  Camera: { keyCode: 44, key: 'Camera', code: 'Camera', location: 4 },
+  Call: { key: 'Call', code: 'Call', location: 4 },
+  EndCall: { keyCode: 95, key: 'EndCall', code: 'EndCall', location: 4 },
+  VolumeDown: {
+    keyCode: 182,
+    key: 'VolumeDown',
+    code: 'VolumeDown',
+    location: 4,
+  },
+  VolumeUp: { keyCode: 183, key: 'VolumeUp', code: 'VolumeUp', location: 4 },
+};
diff --git a/webpack.config.js b/webpack.config.js
index 03d04016f..a0e234019 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -69,7 +69,7 @@ const options = {
       'src',
       'content',
       'element-selector',
-      'main.js'
+      'index.js'
     ),
   },
   chromeExtensionBoilerplate: {