Merge pull request #80 from Kholid060/dev

v0.4.6

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {

src/assets/css/drawflow.css

@@ -87,14 +87,12 @@
 
 .drawflow .connection {
   position: absolute;
-  transform: translate(9999px, 9999px)
 }
 
 .drawflow .connection .main-path {
   fill: none;
   stroke-width: 5px;
   stroke: theme('colors.accent');
-  transform: translate(-9999px, -9999px);
   transition: stroke 100ms ease-in-out;
 }
 

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

@@ -501,13 +501,13 @@ export function conditions({ data, outputs }, prevBlockData) {
 
 export function repeatTask({ data, id, outputs }) {
   return new Promise((resolve) => {
-    if (this.repeatedTasks[id] === data.repeatFor) {
+    if (this.repeatedTasks[id] >= data.repeatFor) {
       resolve({
         data: data.repeatFor,
         nextBlockId: getBlockConnection({ outputs }),
       });
     } else {
-      this.repeatedTasks[id] = (this.repeatedTasks[id] || 0) + 1;
+      this.repeatedTasks[id] = (this.repeatedTasks[id] || 1) + 1;
 
       resolve({
         data: data.repeatFor,

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

@@ -19,6 +19,7 @@
       <ui-checkbox
         v-if="!data.disableMultiple && !hideMultiple"
         class="mr-6"
+        title="Select multiple elements"
         :model-value="data.multiple"
         @change="updateData({ multiple: $event })"
       >

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

@@ -23,8 +23,8 @@
         type="number"
         class="w-full mr-2"
         label="Interval (minutes)"
-        placeholder="5-120"
-        min="10"
+        placeholder="1-120"
+        min="1"
         max="120"
         @change="
           updateIntervalInput($event, { key: 'interval', min: 1, max: 120 })
@@ -97,7 +97,7 @@
         Active while in input
       </ui-checkbox>
       <p class="mt-4 leading-tight text-gray-600 dark:text-gray-200">
-        Note: keyboard shortcut only executed when you're on a webpage
+        Note: keyboard shortcut only working when you're on a webpage
       </p>
     </div>
   </transition-expand>

src/content/blocks-handler.js

@@ -2,32 +2,37 @@
 import simulateEvent from '@/utils/simulate-event';
 import handleFormElement from '@/utils/handle-form-element';
 
-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 markElement(el, { id, data }) {
+  if (data.markEl) {
+    el.setAttribute(`block--${id}`, '');
+  }
 }
 function handleElement({ data, id }, callback) {
   if (!data || !data.selector) return null;
 
-  const element = data.multiple
-    ? document.querySelectorAll(data.selector)
-    : document.querySelector(data.selector);
+  try {
+    const blockIdAttr = `block--${id}`;
+    const selector = data.markEl
+      ? `${data.selector.trim()}:not([${blockIdAttr}])`
+      : data.selector;
 
-  if (typeof callback === 'boolean' && callback) return element;
+    const element = data.multiple
+      ? document.querySelectorAll(selector)
+      : document.querySelector(selector);
 
-  if (data.multiple) {
-    element.forEach((el) => {
-      if (isElementUnique(el, { id, data })) callback(el);
-    });
-  } else if (element) {
-    if (isElementUnique(element, { id, data })) callback(element);
+    if (typeof callback === 'boolean' && callback) return element;
+
+    if (data.multiple) {
+      element.forEach((el) => {
+        markElement(el, { id, data });
+        callback(el);
+      });
+    } else if (element) {
+      markElement(element, { id, data });
+      callback(element);
+    }
+  } catch (error) {
+    console.error(error);
   }
 }
 
@@ -87,23 +92,30 @@ function automaResetTimeout() {
 export function javascriptCode(block) {
   return new Promise((resolve) => {
     const isScriptExists = document.getElementById('automa-custom-js');
+    const scriptAttr = `block--${block.id}`;
 
-    if (isScriptExists) isScriptExists.remove();
+    if (isScriptExists && isScriptExists.hasAttribute(scriptAttr)) {
+      resolve('');
+      return;
+    }
 
     const script = document.createElement('script');
     let timeout;
 
+    script.setAttribute(scriptAttr, '');
     script.id = 'automa-custom-js';
     script.innerHTML = `${automaScript} ${block.data.code}`;
 
     window.addEventListener('__automa-next-block__', ({ detail }) => {
       clearTimeout(timeout);
+      script.remove();
       resolve(detail || {});
     });
     window.addEventListener('__automa-reset-timeout__', () => {
       clearTimeout(timeout);
 
       timeout = setTimeout(() => {
+        script.remove();
         resolve('');
       }, block.data.timeout);
     });
@@ -111,6 +123,7 @@ export function javascriptCode(block) {
     document.body.appendChild(script);
 
     timeout = setTimeout(() => {
+      script.remove();
       resolve('');
     }, block.data.timeout);
   });
@@ -161,9 +174,8 @@ export function forms(block) {
     if (data.multiple) {
       const promises = Array.from(elements).map((element) => {
         return new Promise((eventResolve) => {
-          if (isElementUnique(element, block))
-            handleFormElement(element, data, eventResolve);
-          else eventResolve('');
+          markElement(element, block);
+          handleFormElement(element, data, eventResolve);
         });
       });
 
@@ -171,10 +183,9 @@ export function forms(block) {
         resolve('');
       });
     } else if (elements) {
-      if (isElementUnique(elements, block))
-        handleFormElement(elements, data, resolve);
+      markElement(element, block);
+      handleFormElement(elements, data, resolve);
     } else {
-      alert('else?');
       resolve('');
     }
   });

src/popup/pages/Home.vue

@@ -11,8 +11,10 @@
       placeholder="Search..."
     ></ui-input>
     <ui-button
+      v-tooltip="
+        haveAccess ? 'Element selector' : 'Don\'t have access to this site'
+      "
       icon
-      title="Element selector"
       class="ml-3"
       @click="selectElement"
     >
@@ -46,7 +48,7 @@
   </div>
 </template>
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import browser from 'webextension-polyfill';
 import { useDialog } from '@/composable/dialog';
 import { sendMessage } from '@/utils/message';
@@ -56,6 +58,8 @@ import HomeWorkflowCard from '@/components/popup/home/HomeWorkflowCard.vue';
 const dialog = useDialog();
 
 const query = ref('');
+const haveAccess = ref(true);
+
 const workflows = computed(() =>
   Workflow.query()
     .where(({ name }) =>
@@ -137,4 +141,10 @@ async function selectElement() {
     console.error(error);
   }
 }
+
+onMounted(async () => {
+  const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+
+  haveAccess.value = /^(https?)/.test(tab.url);
+});
 </script>

src/utils/helper.js

@@ -1,6 +1,6 @@
 export function replaceMustache(str, replacer) {
   /* eslint-disable-next-line */
-  return str.replace(/{{(.*)}}/g, replacer);
+  return str.replace(/\{\{(.*?)\}\}/g, replacer);
 }
 
 export function openFilePicker(acceptedFileTypes = [], attrs = {}) {

src/utils/shared.js

@@ -455,7 +455,6 @@ export const eventList = [
   { id: 'touchcancel', name: 'Touch cancel', type: 'touch-event' },
   { id: 'keydown', name: 'Keydown', type: 'keyboard-event' },
   { id: 'keyup', name: 'Keyup', type: 'keyboard-event' },
-  { id: 'keypress', name: 'Keypress', type: 'keyboard-event' },
   { id: 'submit', name: 'Submit', type: 'submit-event' },
   { id: 'wheel', name: 'Wheel', type: 'wheel-event' },
 ];

src/utils/workflow-data.js

@@ -15,7 +15,6 @@ export function importWorkflow() {
       reader.readAsText(file);
     })
     .catch((error) => {
-      alert(error.message);
       console.error(error);
     });
 }