v0.17.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@codemirror/basic-setup": "^0.19.1",
-    "@codemirror/lang-javascript": "^0.19.3",
+    "@codemirror/lang-javascript": "0.19.1",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/theme-one-dark": "^0.19.1",
     "@medv/finder": "^2.1.0",

src/background/workflow-engine/blocks-handler/handler-conditions.js

@@ -19,11 +19,8 @@ function conditions({ data, outputs }, { prevBlockData, refData }) {
     data.conditions.forEach(({ type, value, compareValue }, index) => {
       if (isConditionMatch) return;
 
-      const firstValue = mustacheReplacer({
-        str: compareValue ?? prevData,
-        data: refData,
-      });
-      const secondValue = mustacheReplacer({ str: value, data: refData });
+      const firstValue = mustacheReplacer(compareValue ?? prevData, refData);
+      const secondValue = mustacheReplacer(value, refData);
 
       const isMatch = compareBlockValue(type, firstValue, secondValue);
 

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

@@ -1,5 +1,6 @@
 import browser from 'webextension-polyfill';
 import { getBlockConnection } from '../helper';
+import { isWhitespace } from '@/utils/helper';
 
 async function newTab(block) {
   if (this.windowId) {
@@ -14,6 +15,16 @@ async function newTab(block) {
 
   try {
     const { updatePrevTab, url, active, inGroup } = block.data;
+    const isInvalidUrl = !/^https?/.test(url);
+
+    if (isInvalidUrl) {
+      const error = new Error(
+        isWhitespace(url) ? 'url-empty' : 'invalid-active-tab'
+      );
+      error.data = { url };
+
+      throw error;
+    }
 
     if (updatePrevTab && this.activeTab.id) {
       await browser.tabs.update(this.activeTab.id, { url, active });
@@ -54,6 +65,7 @@ async function newTab(block) {
     };
   } catch (error) {
     console.error(error);
+    console.dir(error);
     error.nextBlockId = nextBlockId;
 
     throw error;

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

@@ -6,11 +6,17 @@ export async function newWindow(block) {
 
   try {
     const { incognito, windowState } = block.data;
-    const { id } = await browser.windows.create({
-      incognito,
-      state: windowState,
-    });
+    const windowOptions = { incognito, state: windowState };
 
+    if (windowState === 'normal') {
+      ['top', 'left', 'height', 'width'].forEach((key) => {
+        if (block.data[key] <= 0) return;
+
+        windowOptions[key] = block.data[key];
+      });
+    }
+
+    const { id } = await browser.windows.create(windowOptions);
     this.windowId = id;
 
     return {

src/components/block/BlockBasic.vue

@@ -80,6 +80,7 @@ function handleStartDrag(event) {
     data: block.data,
     id: block.details.id,
     blockId: block.id,
+    fromBlockBasic: true,
   };
 
   event.dataTransfer.setData('block', JSON.stringify(payload));

src/components/newtab/app/AppSidebar.vue

@@ -2,7 +2,11 @@
   <aside
     class="fixed flex flex-col items-center h-screen left-0 top-0 w-16 py-6 bg-white z-50"
   >
-    <img src="@/assets/svg/logo.svg" class="w-10 mb-4 mx-auto" />
+    <img
+      :title="`v${extensionVersion}`"
+      src="@/assets/svg/logo.svg"
+      class="w-10 mb-4 mx-auto"
+    />
     <div
       class="space-y-2 w-full relative text-center"
       @mouseleave="showHoverIndicator = false"
@@ -37,24 +41,9 @@
       </router-link>
     </div>
     <div class="flex-grow"></div>
-    <ui-popover placement="right" trigger="mouseenter click">
-      <template #trigger>
-        <v-remixicon class="cursor-pointer" name="riInformationLine" />
-      </template>
-      <ui-list class="space-y-1">
-        <ui-list-item
-          v-for="item in links"
-          :key="item.name"
-          :href="item.url"
-          tag="a"
-          rel="noopener"
-          target="_blank"
-        >
-          <v-remixicon :name="item.icon" class="-ml-1 mr-2" />
-          <span>{{ item.name }}</span>
-        </ui-list-item>
-      </ui-list>
-    </ui-popover>
+    <router-link v-tooltip:right.group="t('settings.menu.about')" to="/about">
+      <v-remixicon class="cursor-pointer" name="riInformationLine" />
+    </router-link>
   </aside>
 </template>
 <script setup>
@@ -68,23 +57,7 @@ useGroupTooltip();
 const { t } = useI18n();
 const router = useRouter();
 
-const links = [
-  {
-    name: 'Donate',
-    icon: 'riHandHeartLine',
-    url: 'https://paypal.me/akholid060',
-  },
-  {
-    name: t('common.docs', 2),
-    icon: 'riBook3Line',
-    url: 'https://docs.automa.site',
-  },
-  {
-    name: 'GitHub',
-    icon: 'riGithubFill',
-    url: 'https://github.com/kholid060/automa',
-  },
-];
+const extensionVersion = chrome.runtime.getManifest().version;
 const tabs = [
   {
     id: 'dashboard',

src/components/newtab/logs/LogsDataViewer.vue

@@ -35,11 +35,14 @@
   />
 </template>
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { dataExportTypes } from '@/utils/shared';
 import dataExporter, { generateJSON } from '@/utils/data-exporter';
-import SharedCodemirror from '@/components/newtab/shared/SharedCodemirror.vue';
+
+const SharedCodemirror = defineAsyncComponent(() =>
+  import('@/components/newtab/shared/SharedCodemirror.vue')
+);
 
 const props = defineProps({
   log: {

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -154,7 +154,7 @@ export default {
     function dropHandler({ dataTransfer, clientX, clientY, target }) {
       const block = JSON.parse(dataTransfer.getData('block') || null);
 
-      if (!block) return;
+      if (!block || block.fromBlockBasic) return;
 
       const isTriggerExists =
         block.id === 'trigger' &&

src/components/newtab/workflow/WorkflowGlobalData.vue

@@ -19,10 +19,13 @@
   </div>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { debounce } from '@/utils/helper';
-import SharedCodemirror from '@/components/newtab/shared/SharedCodemirror.vue';
+
+const SharedCodemirror = defineAsyncComponent(() =>
+  import('@/components/newtab/shared/SharedCodemirror.vue')
+);
 
 const props = defineProps({
   workflow: {

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

@@ -45,11 +45,14 @@
   </div>
 </template>
 <script setup>
-import { computed, shallowReactive } from 'vue';
+import { computed, shallowReactive, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import Workflow from '@/models/workflow';
-import SharedCodemirror from '@/components/newtab/shared/SharedCodemirror.vue';
+
+const SharedCodemirror = defineAsyncComponent(() =>
+  import('@/components/newtab/shared/SharedCodemirror.vue')
+);
 
 const props = defineProps({
   data: {

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

@@ -153,11 +153,14 @@
   </div>
 </template>
 <script setup>
-import { shallowReactive } from 'vue';
+import { shallowReactive, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { googleSheets } from '@/utils/api';
 import { convert2DArrayToArrayObj } from '@/utils/helper';
-import SharedCodemirror from '@/components/newtab/shared/SharedCodemirror.vue';
+
+const SharedCodemirror = defineAsyncComponent(() =>
+  import('@/components/newtab/shared/SharedCodemirror.vue')
+);
 
 const props = defineProps({
   data: {

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

@@ -91,11 +91,14 @@
   </div>
 </template>
 <script setup>
-import { watch, reactive } from 'vue';
+import { watch, reactive, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { syntaxTree } from '@codemirror/language';
 import { autocompletion, snippet } from '@codemirror/autocomplete';
-import SharedCodemirror from '@/components/newtab/shared/SharedCodemirror.vue';
+
+const SharedCodemirror = defineAsyncComponent(() =>
+  import('@/components/newtab/shared/SharedCodemirror.vue')
+);
 
 const props = defineProps({
   data: {

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

@@ -119,13 +119,16 @@
   </div>
 </template>
 <script setup>
-import { onMounted, shallowReactive } from 'vue';
+import { onMounted, shallowReactive, defineAsyncComponent } from 'vue';
 import { nanoid } from 'nanoid';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 import Papa from 'papaparse';
 import { openFilePicker } from '@/utils/helper';
-import SharedCodemirror from '@/components/newtab/shared/SharedCodemirror.vue';
+
+const SharedCodemirror = defineAsyncComponent(() =>
+  import('@/components/newtab/shared/SharedCodemirror.vue')
+);
 
 const props = defineProps({
   blockId: {

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

@@ -19,13 +19,43 @@
     <ui-checkbox
       :model-value="data.incognito"
       :disabled="!allowInIncognito"
+      class="mb-4"
       @change="updateData({ incognito: $event })"
     >
       {{ t('workflow.blocks.new-window.incognito.text') }}
       <span :title="t('workflow.blocks.new-window.incognito.note')">
         &#128712;
       </span>
     </ui-checkbox>
+    <template v-if="data.windowState === 'normal'">
+      <div class="flex items-center space-x-2">
+        <ui-input
+          :model-value="data.top"
+          :label="t('workflow.blocks.new-window.top')"
+          @change="updateData({ top: +$event })"
+        />
+        <ui-input
+          :model-value="data.left"
+          :label="t('workflow.blocks.new-window.left')"
+          @change="updateData({ left: +$event })"
+        />
+      </div>
+      <div class="flex items-center space-x-2">
+        <ui-input
+          :model-value="data.height"
+          :label="t('workflow.blocks.new-window.height')"
+          @change="updateData({ height: +$event })"
+        />
+        <ui-input
+          :model-value="data.width"
+          :label="t('workflow.blocks.new-window.width')"
+          @change="updateData({ width: +$event })"
+        />
+      </div>
+      <p class="mt-4 text-gray-600">
+        {{ t('workflow.blocks.new-window.note') }}
+      </p>
+    </template>
   </div>
 </template>
 <script setup>

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

@@ -1,26 +1,44 @@
 <template>
   <edit-interaction-base v-bind="{ data, hide: hideBase }" @change="updateData">
-    <div class="mt-4 space-y-2">
-      <div
-        v-for="(path, index) in filePaths"
-        :key="index"
-        class="flex items-center group"
-      >
-        <ui-input
-          v-model="filePaths[index]"
-          :placeholder="t('workflow.blocks.upload-file.filePath')"
-          class="mr-2"
-        />
-        <v-remixicon
-          name="riDeleteBin7Line"
-          class="invisible cursor-pointer group-hover:visible"
-          @click="filePaths.splice(index, 1)"
-        />
+    <template v-if="hasFileAccess">
+      <div class="mt-4 space-y-2">
+        <div
+          v-for="(path, index) in filePaths"
+          :key="index"
+          class="flex items-center group"
+        >
+          <ui-input
+            v-model="filePaths[index]"
+            :placeholder="t('workflow.blocks.upload-file.filePath')"
+            class="mr-2"
+          />
+          <v-remixicon
+            name="riDeleteBin7Line"
+            class="invisible cursor-pointer group-hover:visible"
+            @click="filePaths.splice(index, 1)"
+          />
+        </div>
+      </div>
+      <ui-button variant="accent" class="mt-2" @click="filePaths.push('')">
+        {{ t('workflow.blocks.upload-file.addFile') }}
+      </ui-button>
+    </template>
+    <template v-else>
+      <div class="mt-4 p-2 rounded-lg bg-red-200 flex items-start">
+        <v-remixicon name="riErrorWarningLine" />
+        <div class="ml-2 flex-1 leading-tight">
+          <p>{{ t('workflow.blocks.upload-file.noFileAccess') }}</p>
+        </div>
       </div>
-    </div>
-    <ui-button variant="accent" class="mt-2" @click="filePaths.push('')">
-      {{ t('workflow.blocks.upload-file.addFile') }}
-    </ui-button>
+      <a
+        href="https://docs.automa.site/blocks/upload-file.html#requirements"
+        target="_blank"
+        rel="noopener"
+        class="leading-tight inline-block text-primary mt-2"
+      >
+        {{ t('workflow.blocks.upload-file.requirement') }}
+      </a>
+    </template>
   </edit-interaction-base>
 </template>
 <script setup>
@@ -43,11 +61,16 @@ const emit = defineEmits(['update:data']);
 const { t } = useI18n();
 
 const filePaths = ref([...props.data.filePaths]);
+const hasFileAccess = ref(false);
 
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
 }
 
+chrome.extension.isAllowedFileSchemeAccess((value) => {
+  hasFileAccess.value = value;
+});
+
 watch(
   filePaths,
   (paths) => {