v1.7.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.6.7",
+  "version": "1.7.0",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {
@@ -42,6 +42,7 @@
     "defu": "^5.0.1",
     "drawflow": "^0.0.51",
     "idb": "^7.0.0",
+    "lodash.clonedeep": "^4.5.0",
     "mitt": "^3.0.0",
     "mousetrap": "^1.6.5",
     "nanoid": "^3.2.0",

src/background/index.js

@@ -148,6 +148,11 @@ checkWorkflowStates();
 async function checkVisitWebTriggers(changeInfo, tab) {
   if (!changeInfo.status || changeInfo.status !== 'complete') return;
 
+  const tabIsUsed = await workflow.states.get(
+    ({ state }) => state.activeTab.id === tab.id
+  );
+  if (tabIsUsed) return;
+
   const visitWebTriggers = await storage.get('visitWebTriggers');
   const triggeredWorkflow = visitWebTriggers.find(({ url, isRegex }) => {
     if (url.trim() === '') return false;

src/background/workflow-engine/blocks-handler/handler-google-sheets.js

@@ -9,13 +9,15 @@ import { getBlockConnection } from '../helper';
 
 async function getSpreadsheetValues({ spreadsheetId, range, firstRowAsKey }) {
   const response = await googleSheets.getValues({ spreadsheetId, range });
+  const result = await response.json();
 
-  if (response.status !== 200) {
-    throw new Error(response.statusText);
+  if (!response.ok) {
+    throw new Error(result.statusMessage);
   }
 
-  const { values } = await response.json();
-  const sheetsData = firstRowAsKey ? convert2DArrayToArrayObj(values) : values;
+  const sheetsData = firstRowAsKey
+    ? convert2DArrayToArrayObj(result.values)
+    : result.values;
 
   return sheetsData;
 }
@@ -51,8 +53,10 @@ async function updateSpreadsheetValues(
     },
   });
 
-  if (response.status !== 200) {
-    throw new Error(response.statusText);
+  if (!response.ok) {
+    const error = await response.json();
+
+    throw new Error(error.statusMessage);
   }
 }
 

src/background/workflow-engine/blocks-handler/handler-javascript-code.js

@@ -23,6 +23,9 @@ export async function javascriptCode({ outputs, data, ...block }, { refData }) {
 
     const result = await this._sendMessageToTab({ ...block, data, refData });
 
+    if (result?.columns.data.$error) {
+      throw new Error(result?.columns.data.message);
+    }
     if (result?.variables) {
       Object.keys(result.variables).forEach((varName) => {
         this.setVariable(varName, result.variables[varName]);

src/background/workflow-engine/blocks-handler/handler-save-assets.js

@@ -52,7 +52,7 @@ export default async function ({ data, id, name, outputs }) {
         tabId: this.activeTab.id,
       });
 
-      await Promise.allSettled(sources.map((url) => downloadFile(url)));
+      await Promise.all(sources.map((url) => downloadFile(url)));
     } else if (data.type === 'url') {
       await downloadFile(data.url);
     }

src/background/workflow-engine/blocks-handler/handler-take-screenshot.js

@@ -2,11 +2,24 @@ import browser from 'webextension-polyfill';
 import { fileSaver } from '@/utils/helper';
 import { getBlockConnection } from '../helper';
 
-function saveImage({ fileName, uri, ext }) {
+async function saveImage({ filename, uri, ext }) {
+  const hasDownloadAccess = await browser.permissions.contains({
+    permissions: ['downloads'],
+  });
+  const name = `${filename || 'Screenshot'}.${ext || 'png'}`;
+
+  if (hasDownloadAccess) {
+    await browser.downloads.download({
+      url: uri,
+      filename: name,
+    });
+
+    return;
+  }
+
   const image = new Image();
 
   image.onload = () => {
-    const name = `${fileName || 'Screenshot'}.${ext || 'png'}`;
     const canvas = document.createElement('canvas');
     canvas.width = image.width;
     canvas.height = image.height;
@@ -31,10 +44,14 @@ async function takeScreenshot({ data, outputs, name }) {
       quality: data.quality,
       format: data.ext || 'png',
     };
-    const saveScreenshot = (dataUrl) => {
+    const saveScreenshot = async (dataUrl) => {
       if (data.saveToColumn) this.addDataToColumn(data.dataColumn, dataUrl);
       if (saveToComputer)
-        saveImage({ fileName: data.fileName, uri: dataUrl, ext: data.ext });
+        await saveImage({
+          filename: data.fileName,
+          uri: dataUrl,
+          ext: data.ext,
+        });
       if (data.assignVariable) this.setVariable(data.variableName, dataUrl);
     };
 
@@ -48,7 +65,8 @@ async function takeScreenshot({ data, outputs, name }) {
         currentWindow: true,
       });
 
-      await browser.windows.update(this.windowId, { focused: true });
+      if (this.windowId)
+        await browser.windows.update(this.windowId, { focused: true });
       await browser.tabs.update(this.activeTab.id, { active: true });
 
       await new Promise((resolve) => setTimeout(resolve, 500));
@@ -66,11 +84,11 @@ async function takeScreenshot({ data, outputs, name }) {
         await browser.tabs.update(tab.id, { active: true });
       }
 
-      saveScreenshot(screenshot);
+      await saveScreenshot(screenshot);
     } else {
       screenshot = await browser.tabs.captureVisibleTab(options);
 
-      saveScreenshot(screenshot);
+      await saveScreenshot(screenshot);
     }
 
     return { data: screenshot, nextBlockId };

src/background/workflow-engine/engine.js

@@ -10,7 +10,7 @@ import {
   objectHasKey,
 } from '@/utils/helper';
 import referenceData from '@/utils/reference-data';
-import { convertData, waitTabLoaded } from './helper';
+import { convertData, waitTabLoaded, getBlockConnection } from './helper';
 import executeContentScript from './execute-content-script';
 
 class WorkflowEngine {
@@ -371,7 +371,7 @@ class WorkflowEngine {
     }
   }
 
-  async executeBlock(block, prevBlockData) {
+  async executeBlock(block, prevBlockData, isRetry) {
     const currentState = await this.states.get(this.id);
 
     if (!currentState || currentState.isDestroyed) {
@@ -385,8 +385,10 @@ class WorkflowEngine {
     this.referenceData.prevBlockData = prevBlockData;
     this.referenceData.activeTabUrl = this.activeTab.url || '';
 
-    await this.states.update(this.id, { state: this.state });
-    this.dispatchEvent('update', { state: this.state });
+    if (!isRetry) {
+      await this.states.update(this.id, { state: this.state });
+      this.dispatchEvent('update', { state: this.state });
+    }
 
     const startExecuteTime = Date.now();
 
@@ -405,9 +407,19 @@ class WorkflowEngine {
     const replacedBlock = referenceData({
       block,
       data: this.referenceData,
-      refKeys: tasks[block.name].refDataKeys,
+      refKeys: isRetry ? null : tasks[block.name].refDataKeys,
     });
     const blockDelay = this.workflow.settings?.blockDelay || 0;
+    const addBlockLog = (status, obj = {}) => {
+      this.addLogHistory({
+        type: status,
+        name: block.name,
+        description: block.data.description,
+        replacedValue: replacedBlock.replacedValue,
+        duration: Math.round(Date.now() - startExecuteTime),
+        ...obj,
+      });
+    };
 
     try {
       const result = await handler.call(this, replacedBlock, {
@@ -418,13 +430,8 @@ class WorkflowEngine {
       if (result.replacedValue)
         replacedBlock.replacedValue = result.replacedValue;
 
-      this.addLogHistory({
-        name: block.name,
+      addBlockLog(result.status || 'success', {
         logId: result.logId,
-        type: result.status || 'success',
-        description: block.data.description,
-        replacedValue: replacedBlock.replacedValue,
-        duration: Math.round(Date.now() - startExecuteTime),
       });
 
       if (result.nextBlockId) {
@@ -440,12 +447,28 @@ class WorkflowEngine {
         this.destroy('success');
       }
     } catch (error) {
-      this.addLogHistory({
-        type: 'error',
+      const { onError: blockOnError } = replacedBlock.data;
+      if (blockOnError && blockOnError.enable) {
+        if (blockOnError.retry && blockOnError.retryTimes) {
+          await sleep(blockOnError.retryInterval * 1000);
+          blockOnError.retryTimes -= 1;
+          await this.executeBlock(replacedBlock, prevBlockData, true);
+
+          return;
+        }
+
+        const nextBlockId = getBlockConnection(
+          block,
+          blockOnError.toDo === 'continue' ? 1 : 2
+        );
+        if (blockOnError.toDo !== 'error' && nextBlockId) {
+          this.executeBlock(this.blocks[nextBlockId], '');
+          return;
+        }
+      }
+
+      addBlockLog('error', {
         message: error.message,
-        name: block.name,
-        description: block.data.description,
-        replacedValue: replacedBlock.replacedValue,
         ...(error.data || {}),
       });
 

src/components/block/BlockBasic.vue

@@ -32,6 +32,22 @@
         />
       </div>
     </div>
+    <div
+      v-if="
+        block.data.onError?.enable && block.data.onError?.toDo === 'fallback'
+      "
+      class="fallback flex items-center justify-end"
+    >
+      <v-remixicon
+        v-if="block"
+        :title="t('workflow.blocks.base.onError.fallbackTitle')"
+        name="riInformationLine"
+        size="18"
+      />
+      <span class="ml-1">
+        {{ t('common.fallback') }}
+      </span>
+    </div>
     <slot :block="block"></slot>
     <template #prepend>
       <div
@@ -48,6 +64,7 @@
   </block-base>
 </template>
 <script setup>
+import { watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import emitter from '@/lib/mitt';
 import { useEditorBlock } from '@/composable/editorBlock';
@@ -87,10 +104,40 @@ function handleStartDrag(event) {
 
   event.dataTransfer.setData('block', JSON.stringify(payload));
 }
+
+watch(
+  () => block.data.onError,
+  (onError) => {
+    if (!onError) return;
+
+    const blockDetail = props.editor.getNodeFromId(block.id);
+    const outputLen = Object.keys(blockDetail.outputs).length;
+
+    if (!onError.enable || onError.toDo !== 'fallback') {
+      block.containerEl.classList.toggle('block-basic-fallback', false);
+
+      if (outputLen > 1) props.editor.removeNodeOutput(block.id, 'output_2');
+
+      return;
+    }
+
+    block.containerEl.classList.toggle('block-basic-fallback', true);
+
+    if (outputLen < 2) {
+      props.editor.addNodeOutput(block.id);
+    }
+
+    props.editor.updateConnectionNodes(`node-${block.id}`);
+  },
+  { deep: true }
+);
 </script>
 <style>
 .drawflow-node.selected .move-to-group,
 .block-basic:hover .move-to-group {
   visibility: visible;
 }
+.block-basic-fallback .output_2 {
+  top: 11px;
+}
 </style>

src/components/newtab/shared/SharedConditionBuilder/ConditionBuilderInputs.vue

@@ -22,14 +22,23 @@
           </option>
         </optgroup>
       </ui-select>
-      <ui-input
-        v-for="(_, name) in item.data"
-        :key="item.id + name + index"
-        v-model="inputsData[index].data[name]"
-        :title="conditionBuilder.inputTypes[name].label"
-        :placeholder="conditionBuilder.inputTypes[name].label"
+      <ui-autocomplete
+        :items="autocomplete"
+        :trigger-char="['{{', '}}']"
+        block
+        hide-empty
         class="flex-1"
-      />
+      >
+        <ui-input
+          v-for="(_, name) in item.data"
+          :key="item.id + name + index"
+          v-model="inputsData[index].data[name]"
+          :title="conditionBuilder.inputTypes[name].label"
+          :placeholder="conditionBuilder.inputTypes[name].label"
+          autocomplete="off"
+          class="w-full"
+        />
+      </ui-autocomplete>
     </div>
     <ui-select
       v-else-if="item.category === 'compare'"
@@ -56,6 +65,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  autocomplete: {
+    type: Array,
+    default: () => [],
+  },
 });
 const emit = defineEmits(['update']);
 

src/components/newtab/shared/SharedConditionBuilder/index.vue

@@ -45,6 +45,7 @@
             </template>
             <div class="space-y-2 px-4 py-2">
               <condition-builder-inputs
+                :autocomplete="autocomplete"
                 :data="inputs.items"
                 @update="
                   conditions[index].conditions[inputsIndex].items = $event
@@ -96,6 +97,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  autocomplete: {
+    type: Array,
+    default: () => [],
+  },
 });
 const emit = defineEmits(['update:modelValue', 'change']);