feat: add mark element option

src/background/blocks-handler.js

@@ -1,3 +1,4 @@
+/* to-do onError block options => continue or stop workflow */
 /* eslint-disable no-underscore-dangle */
 import browser from 'webextension-polyfill';
 import { objectHasKey } from '@/utils/helper';

src/components/newtab/workflow/edit/EditInteractionBase.vue

@@ -14,13 +14,21 @@
     class="mb-1 w-full"
     @change="updateData({ selector: $event })"
   />
-  <ui-checkbox
-    v-if="!hideSelector || !data.disableMultiple"
-    :model-value="data.multiple"
-    @change="updateData({ multiple: $event })"
-  >
-    Multiple
-  </ui-checkbox>
+  <template v-if="!hideSelector || !data.disableMultiple">
+    <ui-checkbox
+      :model-value="data.multiple"
+      @change="updateData({ multiple: $event })"
+    >
+      Multiple
+    </ui-checkbox>
+    <ui-checkbox
+      :model-value="data.markEl"
+      class="ml-6"
+      @change="updateData({ markEl: $event })"
+    >
+      Mark element
+    </ui-checkbox>
+  </template>
   <slot></slot>
 </template>
 <script setup>

src/components/newtab/workflow/edit/EditTrigger.vue

@@ -62,6 +62,7 @@
   </transition-expand>
 </template>
 <script setup>
+/* to-do add visit website trigger */
 import dayjs from 'dayjs';
 
 const props = defineProps({

src/content/blocks-handler.js

@@ -2,7 +2,18 @@
 import simulateEvent from '@/utils/simulate-event';
 import handleFormElement from '@/utils/handle-form-element';
 
-function handleElement(data, callback) {
+function isElementUnique(element, { data, id }) {
+  if (!data.markEl) return true;
+
+  const blockId = `block--${id}`;
+
+  if (element.hasAttribute(blockId)) return false;
+
+  element.setAttribute(blockId, '');
+
+  return true;
+}
+function handleElement({ data, id }, callback) {
   if (!data.selector) return null;
 
   const element = data.multiple
@@ -12,15 +23,17 @@ function handleElement(data, callback) {
   if (typeof callback === 'boolean' && callback) return element;
 
   if (data.multiple) {
-    element.forEach(callback);
+    element.forEach((el) => {
+      if (isElementUnique(el, { id, data })) callback(el);
+    });
   } else if (element) {
-    callback(element);
+    if (isElementUnique(element, { id, data })) callback(element);
   }
 }
 
-export function eventClick({ data }) {
+export function eventClick(block) {
   return new Promise((resolve) => {
-    handleElement(data, (element) => {
+    handleElement(block, (element) => {
       element.click();
     });
 
@@ -28,16 +41,17 @@ export function eventClick({ data }) {
   });
 }
 
-export function getText({ data }) {
+export function getText(block) {
   return new Promise((resolve) => {
     let regex;
+    const { data } = block;
     const textResult = [];
 
     if (data.regex) {
       regex = new RegExp(data.regex, data.regexExp.join(''));
     }
 
-    handleElement(data, (element) => {
+    handleElement(block, (element) => {
       let text = element.innerText;
 
       if (regex) text = text.match(regex).join(' ');
@@ -49,10 +63,10 @@ export function getText({ data }) {
   });
 }
 
-export function elementScroll({ data }) {
+export function elementScroll(block) {
   return new Promise((resolve) => {
-    handleElement(data, (element) => {
-      element.scroll(data.scrollX, data.scrollY);
+    handleElement(block, (element) => {
+      element.scroll(block.data.scrollX, block.data.scrollY);
     });
 
     window.dispatchEvent(new Event('scroll'));
@@ -61,12 +75,12 @@ export function elementScroll({ data }) {
   });
 }
 
-export function attributeValue({ data }) {
+export function attributeValue(block) {
   return new Promise((resolve) => {
     const result = [];
 
-    handleElement(data, (element) => {
-      const value = element.getAttribute(data.attributeName);
+    handleElement(block, (element) => {
+      const value = element.getAttribute(block.data.attributeName);
 
       result.push(value);
     });
@@ -75,14 +89,17 @@ export function attributeValue({ data }) {
   });
 }
 
-export function forms({ data }) {
+export function forms(block) {
   return new Promise((resolve) => {
+    const { data } = block;
     const elements = handleElement(data, true);
 
     if (data.multiple) {
       const promises = Array.from(elements).map((element) => {
         return new Promise((eventResolve) => {
-          handleFormElement(element, data, eventResolve);
+          if (isElementUnique(element, block))
+            handleFormElement(element, data, eventResolve);
+          else eventResolve('');
         });
       });
 
@@ -90,7 +107,8 @@ export function forms({ data }) {
         resolve('');
       });
     } else if (elements) {
-      handleFormElement(elements, data, resolve);
+      if (isElementUnique(element, block))
+        handleFormElement(elements, data, resolve);
     } else {
       resolve('');
     }
@@ -107,9 +125,9 @@ export function triggerEvent({ data }) {
   });
 }
 
-export function link({ data }) {
+export function link(block) {
   return new Promise((resolve) => {
-    const element = document.querySelector(data.selector);
+    const element = document.querySelector(block.data.selector);
 
     if (!element) {
       resolve('');

src/utils/shared.js

@@ -1,4 +1,4 @@
-/* screenshot, assets, tab loaded, and close tab block? */
+/* screenshot, assets, tab loaded, opened tab, and close tab block? */
 
 export const tasks = {
   trigger: {
@@ -29,6 +29,7 @@ export const tasks = {
     data: {
       description: '',
       selector: '',
+      markEl: false,
       multiple: false,
     },
   },
@@ -59,6 +60,7 @@ export const tasks = {
     data: {
       description: '',
       selector: '',
+      markEl: false,
       multiple: false,
       regex: '',
       regexExp: ['g'],
@@ -93,6 +95,7 @@ export const tasks = {
     data: {
       description: '',
       selector: 'html',
+      markEl: false,
       multiple: false,
       scrollY: 0,
       scrollX: 0,
@@ -111,6 +114,7 @@ export const tasks = {
     data: {
       description: '',
       selector: '',
+      markEl: false,
       disableMultiple: true,
     },
   },
@@ -127,6 +131,7 @@ export const tasks = {
     data: {
       description: '',
       selector: '',
+      markEl: false,
       multiple: false,
       attributeName: '',
       dataColumn: '',
@@ -160,6 +165,7 @@ export const tasks = {
     data: {
       description: '',
       selector: '',
+      markEl: false,
       multiple: false,
       selected: true,
       type: 'text-field',
@@ -207,6 +213,7 @@ export const tasks = {
     data: {
       description: '',
       selector: '',
+      markEl: false,
       multiple: false,
       eventName: '',
       eventType: '',
@@ -237,6 +244,7 @@ export const tasks = {
     maxConnection: 1,
     data: {
       selector: '',
+      markEl: false,
     },
   },
 };