feat(content): add scroll and attribute-value handler

src/background/blocks-handler.js

@@ -51,25 +51,7 @@ export function openWebsite(block) {
   });
 }
 
-export function eventClick(block) {
-  return new Promise((resolve) => {
-    if (!this._connectedTab) return;
-
-    this._connectedTab.postMessage(block);
-    this._listenTabMessage(
-      block.name,
-      () => {
-        resolve({
-          nextBlockId: getBlockConnection(block),
-          data: '',
-        });
-      },
-      { once: true }
-    );
-  });
-}
-
-export function getText(block) {
+export function interactionHandler(block) {
   return new Promise((resolve) => {
     if (!this._connectedTab) return;
 
@@ -77,10 +59,11 @@ export function getText(block) {
     this._listenTabMessage(
       block.name,
       (data) => {
-        console.log('hha', data);
+        console.log(block.name, data, 'data');
+
         resolve({
+          data,
           nextBlockId: getBlockConnection(block),
-          data: '',
         });
       },
       { once: true }

src/background/workflow-engine.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import browser from 'webextension-polyfill';
 import { toCamelCase } from '@/utils/helper';
+import { tasks } from '@/utils/shared';
 import * as blocksHandler from './blocks-handler';
 
 function tabMessageListenerHandler({ type, data }) {
@@ -77,8 +78,12 @@ class WorkflowEngine {
       return;
     }
 
-    console.log(`${block.name}(${toCamelCase(block.name)}):`, block);
-    const handler = blocksHandler[toCamelCase(block?.name)];
+    const isInteraction = tasks[block.name].category === 'interaction';
+    const handlerName = isInteraction
+      ? 'interactionHandler'
+      : toCamelCase(block?.name);
+    console.log(isInteraction, handlerName, tasks);
+    const handler = blocksHandler[handlerName];
 
     if (handler) {
       handler

src/content/blocks-handler.js

@@ -12,15 +12,15 @@ function handleElement(data, callback) {
   }
 }
 
-export function eventClick({ data, name }, port) {
+export function eventClick({ data }) {
   handleElement(data, (element) => {
     element.click();
   });
 
-  port.postMessage({ type: name });
+  return '';
 }
 
-export function getText({ data, name }, port) {
+export function getText({ data }) {
   let regex;
   let textResult = '';
 
@@ -36,5 +36,25 @@ export function getText({ data, name }, port) {
     textResult += `${text} `;
   });
 
-  port.postMessage({ type: name, data: textResult });
+  return textResult;
+}
+
+export function elementScroll({ data }) {
+  handleElement(data, (element) => {
+    element.scroll(data.scrollX, data.scrollY);
+  });
+
+  return '';
+}
+
+export function attributeValue({ data }) {
+  let result = '';
+
+  handleElement(data, (element) => {
+    const value = element.getAttribute(data.attributeName);
+
+    result += `${value} `;
+  });
+
+  return result;
 }

src/content/index.js

@@ -7,7 +7,9 @@ browser.runtime.onConnect.addListener((port) => {
     const handler = blocksHandler[toCamelCase(data.name)];
     console.log(`${data.name}(${toCamelCase(data.name)}):`, data);
     if (handler) {
-      handler(data, port);
+      const result = handler(data);
+
+      port.postMessage({ type: data.name, data: result });
     } else {
       console.error(`"${data.name}" doesn't have a handler`);
     }

src/utils/shared.js

@@ -89,7 +89,7 @@ export const tasks = {
     maxConnection: 1,
     data: {
       description: '',
-      selector: '',
+      selector: 'html',
       multiple: false,
       scrollY: 0,
       scrollX: 0,