feat: add hover element block

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;

src/background/workflow-engine/blocks-handler/handler-interaction-block.js

@@ -32,13 +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,

src/background/workflow-engine/blocks-handler/handler-new-tab.js

@@ -1,5 +1,9 @@
 import browser from 'webextension-polyfill';
-import { getBlockConnection, attachDebugger } 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,8 +45,19 @@ async function newTab(block) {
 
     this.activeTab.url = url;
     if (tab) {
-      if (this.workflow.settings.debugMode) {
+      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;
@@ -67,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,

src/background/workflow-engine/helper.js

@@ -1,12 +1,13 @@
 export function sendDebugCommand(tabId, method, params = {}) {
   return new Promise((resolve) => {
-    chrome.debugger.sendCommand(tabId, method, params, resolve);
+    chrome.debugger.sendCommand({ tabId }, method, params, resolve);
   });
 }
 
 export function attachDebugger(tabId, prevTab) {
   return new Promise((resolve) => {
-    if (prevTab) chrome.debugger.detach({ tabId: prevTab });
+    if (prevTab && tabId !== prevTab)
+      chrome.debugger.detach({ tabId: prevTab });
 
     chrome.debugger.attach({ tabId }, '1.3', resolve);
   });

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>

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;

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": {

src/locales/en/newtab.json

@@ -235,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."
     },

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': {
@@ -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 = {