feat: add general setting in block setting

src/background/workflowEngine/blocksHandler/handlerInteractionBlock.js

@@ -1,5 +1,6 @@
 import browser from 'webextension-polyfill';
 import { objectHasKey } from '@/utils/helper';
+import { attachDebugger } from '../helper';
 
 async function checkAccess(blockName) {
   if (blockName === 'upload-file') {
@@ -24,7 +25,16 @@ async function checkAccess(blockName) {
 async function interactionHandler(block) {
   await checkAccess(block.name);
 
+  const debugMode =
+    (block.data.settings?.debugMode ?? false) && !this.settings.debugMode;
+  const isChrome = BROWSER_TYPE === 'chrome';
+
   try {
+    if (debugMode && isChrome) {
+      await attachDebugger(this.activeTab.id);
+      block.debugMode = true;
+    }
+
     const data = await this._sendMessageToTab(block, {
       frameId: this.activeTab.frameId || 0,
     });
@@ -62,11 +72,19 @@ async function interactionHandler(block) {
       this.setVariable(block.data.variableName, data);
     }
 
+    if (debugMode && isChrome) {
+      chrome.debugger.detach({ tabId: this.activeTab.id });
+    }
+
     return {
       data,
       nextBlockId: this.getBlockConnections(block.id),
     };
   } catch (error) {
+    if (debugMode && isChrome) {
+      chrome.debugger.detach({ tabId: this.activeTab.id });
+    }
+
     error.data = {
       name: block.name,
       selector: block.data.selector,

src/background/workflowEngine/helper.js

@@ -29,8 +29,17 @@ export function attachDebugger(tabId, prevTab) {
     if (prevTab && tabId !== prevTab)
       chrome.debugger.detach({ tabId: prevTab });
 
-    chrome.debugger.attach({ tabId }, '1.3', () => {
-      chrome.debugger.sendCommand({ tabId }, 'Page.enable', resolve);
+    chrome.debugger.getTargets((targets) => {
+      targets.forEach((target) => {
+        if (target.attached || target.tabId !== tabId) {
+          resolve();
+          return;
+        }
+
+        chrome.debugger.attach({ tabId }, '1.3', () => {
+          chrome.debugger.sendCommand({ tabId }, 'Page.enable', resolve);
+        });
+      });
     });
   });
 }

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -48,7 +48,7 @@
       :key="data.itemId || data.blockId"
       :data="data"
       class="mt-4"
-      @change="$emit('update', { ...blockData, onError: $event })"
+      @change="$emit('update', { ...blockData, ...$event })"
     />
   </div>
 </template>

src/components/newtab/workflow/edit/BlockSetting/BlockSettingGeneral.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="block-setting-general">
+    <ui-list>
+      <ui-list-item v-if="browserType !== 'firefox'" small>
+        <ui-switch v-model="state.debugMode" class="mr-4" />
+        <div class="flex-1 overflow-hidden">
+          <p class="text-overflow">
+            {{ t('workflow.settings.debugMode.title') }}
+          </p>
+          <p class="text-overflow">
+            Execute block using the Chrome DevTools Protocol
+          </p>
+        </div>
+      </ui-list-item>
+    </ui-list>
+  </div>
+</template>
+<script setup>
+import { reactive, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['change']);
+
+const browserType = BROWSER_TYPE;
+
+const { t } = useI18n();
+const state = reactive({});
+
+watch(
+  () => state,
+  (onError) => {
+    emit('change', onError);
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  Object.assign(state, props.data);
+});
+</script>

src/components/newtab/workflow/edit/BlockSetting/BlockSettingLines.vue

@@ -56,7 +56,7 @@ const activeEdge = computed(() => state.edges[state.activeEdge]);
 
 const updateActiveEdge = debounce((name, value) => {
   const edge = editor.value.getEdge.value(state.activeEdge);
-  console.log(name, value);
+
   edge[name] = value;
   state.edges[state.activeEdge][name] = value;
 }, 250);

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

@@ -24,10 +24,16 @@
         v-model="state.activeTab"
         class="mt-4"
       >
+        <ui-tab-panel value="general">
+          <block-setting-general
+            v-model:data="state.settings"
+            @change="onDataChange('settings', $event)"
+          />
+        </ui-tab-panel>
         <ui-tab-panel value="on-error">
           <block-setting-on-error
-            v-model:data="state.onError"
-            @change="onErrorChange"
+            data="state.onError"
+            @change="onDataChange('onError', $event)"
           />
         </ui-tab-panel>
         <ui-tab-panel value="lines">
@@ -43,6 +49,7 @@ import { useI18n } from 'vue-i18n';
 import defu from 'defu';
 import BlockSettingLines from './BlockSetting/BlockSettingLines.vue';
 import BlockSettingOnError from './BlockSetting/BlockSettingOnError.vue';
+import BlockSettingGeneral from './BlockSetting/BlockSettingGeneral.vue';
 
 const props = defineProps({
   data: {
@@ -58,10 +65,19 @@ const emit = defineEmits(['change']);
 
 const { t } = useI18n();
 
+const browserType = BROWSER_TYPE;
+const supportedBlocks = ['forms', 'event-click', 'trigger-event'];
 const tabs = [
   { id: 'on-error', name: t('workflow.blocks.base.onError.button') },
   { id: 'lines', name: t('workflow.blocks.base.settings.line.title') },
 ];
+const isSupported =
+  browserType !== 'firefox' && supportedBlocks.includes(props.data.id);
+
+if (isSupported) {
+  tabs.unshift({ id: 'general', name: t('settings.menu.general') });
+}
+
 const defaultSettings = {
   onError: {
     retry: false,
@@ -70,20 +86,24 @@ const defaultSettings = {
     retryInterval: 2,
     toDo: 'error',
   },
+  general: {
+    debugMode: false,
+  },
 };
 
 const state = reactive({
   showModal: false,
   retrieved: false,
-  activeTab: 'on-error',
   onError: defaultSettings.onError,
+  settings: defaultSettings.general,
+  activeTab: !isSupported ? 'on-error' : 'general',
 });
 
-function onErrorChange(data) {
-  if (!state.retrieved) return;
+function onDataChange(key, data) {
+  if (!state.retrieved || !state.showModal) return;
 
-  state.onError = data;
-  emit('change', data);
+  state[key] = data;
+  emit('change', { [key]: data });
 }
 
 onMounted(() => {
@@ -91,9 +111,17 @@ onMounted(() => {
     props.data.data.onError || {},
     defaultSettings.onError
   );
-
   state.onError = onErrorSetting;
-  state.retrieved = true;
+
+  const generalSettings = defu(
+    props.data.data.settings,
+    defaultSettings.general
+  );
+  state.settings = generalSettings;
+
+  setTimeout(() => {
+    state.retrieved = true;
+  }, 1000);
 });
 </script>
 <style>

src/content/utils.js

@@ -135,6 +135,7 @@ export async function getElementPosition(element) {
   const elWindow = element.ownerDocument.defaultView;
   const isInFrame = elWindow !== window.top;
   const { width, height, x, y } = element.getBoundingClientRect();
+
   const position = {
     x: x + width / 2,
     y: y + height / 2,