v1.12.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.21.1",
+  "version": "1.21.2",
   "description": "An extension for automating your browser by connecting blocks",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "@braks/vue-flow": "^0.4.40",
     "@codemirror/autocomplete": "^6.1.0",
     "@codemirror/lang-css": "^6.0.0",
-    "@codemirror/lang-html": "^6.1.0",
+    "@codemirror/lang-html": "^6.1.2",
     "@codemirror/lang-javascript": "^6.0.2",
     "@codemirror/lang-json": "^6.0.0",
     "@codemirror/language": "^6.2.1",
@@ -43,11 +43,11 @@
     "@tiptap/extension-placeholder": "^2.0.0-beta.53",
     "@tiptap/starter-kit": "^2.0.0-beta.197",
     "@tiptap/vue-3": "^2.0.0-beta.96",
-    "@viselect/vanilla": "^3.1.0",
+    "@viselect/vanilla": "^3.1.1",
     "@vueuse/rxjs": "^9.1.1",
     "@vuex-orm/core": "^0.36.4",
     "codemirror": "^6.0.1",
-    "compare-versions": "^4.1.2",
+    "compare-versions": "^5.0.1",
     "cron-parser": "^4.6.0",
     "cronstrue": "^2.11.0",
     "crypto-js": "^4.1.1",
@@ -106,7 +106,7 @@
     "eslint-plugin-vue": "^9.4.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",
-    "html-loader": "^4.1.0",
+    "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "lint-staged": "^13.0.2",
     "mini-css-extract-plugin": "^2.3.0",
@@ -121,6 +121,6 @@
     "web-worker": "^1.2.0",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.0"
+    "webpack-dev-server": "^4.11.1"
   }
 }

src/background/workflowEngine/blocksHandler/handlerLoopData.js

@@ -49,6 +49,7 @@ async function loopData({ data, id }, { refData }) {
               findBy,
               max: maxLoop,
               multiple: true,
+              reverseLoop: data.reverseLoop,
               selector: data.elementSelector,
               waitForSelector: data.waitForSelector ?? false,
               waitSelectorTimeout: data.waitSelectorTimeout ?? 5000,
@@ -81,7 +82,7 @@ async function loopData({ data, id }, { refData }) {
           index = data.startIndex;
         }
 
-        if (data.reverseLoop) {
+        if (data.reverseLoop && data.loopThrough !== 'elements') {
           currLoopData.reverse();
         }
       }

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

@@ -20,8 +20,8 @@
       <ui-input
         :model-value="data.selector"
         :label="t('workflow.blocks.element-exists.selector')"
+        :placeholder="data.findBy === 'xpath' ? '//element' : '.element'"
         autocomplete="off"
-        placeholder=".element"
         class="w-full"
         @change="updateData({ selector: $event })"
       />

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

@@ -21,6 +21,13 @@
       class="w-full mt-3"
       @change="updateData({ maxLoop: $event })"
     />
+    <ui-checkbox
+      :model-value="data.reverseLoop"
+      class="mt-2"
+      @change="updateData({ reverseLoop: $event })"
+    >
+      {{ t('workflow.blocks.loop-data.reverse') }}
+    </ui-checkbox>
     <div class="mt-4 border-t pt-4 mb-8">
       <p class="text-sm text-gray-600 dark:text-gray-200">
         {{ t('workflow.blocks.loop-elements.loadMore') }}

src/content/commandPalette/App.vue

@@ -248,9 +248,10 @@ function onKeydown(event) {
     return;
   }
 
-  if (state.shortcutKeys.length < 1) return;
+  const shortcuts = window._automaShortcuts;
+  if (shortcuts.length < 1) return;
 
-  const automaShortcut = state.shortcutKeys.every((shortcutKey) => {
+  const automaShortcut = shortcuts.every((shortcutKey) => {
     if (shortcutKey === 'mod') return ctrlKey || metaKey;
     if (shortcutKey === 'shift') return shiftKey;
     if (shortcutKey === 'option') return altKey;
@@ -260,6 +261,7 @@ function onKeydown(event) {
   if (automaShortcut) {
     event.preventDefault();
     state.active = true;
+    state.shortcutKeys = shortcuts;
   }
 }
 function onInputKeydown(event) {
@@ -385,10 +387,11 @@ onMounted(() => {
   browser.storage.local.get('automaShortcut').then(({ automaShortcut }) => {
     if (Array.isArray(automaShortcut) && automaShortcut.length < 1) return;
 
-    let keys = ['mod', 'shift', 'a'];
+    let keys = ['mod', 'shift', 'e'];
     if (automaShortcut) keys = automaShortcut.split('+');
 
     state.shortcutKeys = keys;
+    window._automaShortcuts = keys;
   });
 
   window.addEventListener('keydown', onKeydown);

src/content/index.js

@@ -42,8 +42,7 @@ function messageToFrame(frameElement, blockData) {
 }
 async function executeBlock(data) {
   const removeExecutedBlock = showExecutedBlock(data, data.executedBlockOnWeb);
-
-  if (data.data?.selector?.includes('|>') && isMainFrame) {
+  if (data.data?.selector?.includes('|>')) {
     const [frameSelector, selector] = data.data.selector.split(/\|>(.+)/);
     const frameElement = document.querySelector(frameSelector);
     const frameError = (message) => {
@@ -136,18 +135,41 @@ function messageListener({ data, source }) {
 
   initCommandPalette();
 
+  let contextElement = null;
+  let $ctxLink = '';
+  let $ctxMediaUrl = '';
+  let $ctxTextSelection = '';
+
   window.isAutomaInjected = true;
   window.addEventListener('message', messageListener);
+  window.addEventListener(
+    'contextmenu',
+    ({ target }) => {
+      contextElement = target;
+      $ctxTextSelection = window.getSelection().toString();
 
-  let contextElement = null;
-  let $ctxTextSelection = '';
+      const tag = target.tagName;
+      if (tag === 'A') {
+        $ctxLink = target.href;
+      }
+
+      const mediaTags = ['AUDIO', 'VIDEO', 'IMG'];
+      if (mediaTags.includes(tag)) {
+        let mediaSrc = target.src || '';
+
+        if (!mediaSrc.src) {
+          const sourceEl = target.querySelector('source');
+          if (sourceEl) mediaSrc = sourceEl.src;
+        }
+
+        $ctxMediaUrl = mediaSrc;
+      }
+    },
+    true
+  );
 
   if (isMainFrame) {
     shortcutListener();
-    window.addEventListener('contextmenu', ({ target }) => {
-      contextElement = target;
-      $ctxTextSelection = window.getSelection().toString();
-    });
     // window.addEventListener('load', elementObserver);
   }
 
@@ -198,41 +220,21 @@ function messageListener({ data, source }) {
             break;
           }
           case 'context-element': {
-            let $ctxLink = '';
-            let $ctxMediaUrl = '';
             let $ctxElSelector = '';
 
             if (contextElement) {
               $ctxElSelector = findSelector(contextElement);
-
-              const tag = contextElement.tagName;
-              if (tag === 'A') {
-                $ctxLink = contextElement.href;
-              }
-
-              const mediaTags = ['AUDIO', 'VIDEO', 'IMG'];
-              if (mediaTags.includes(tag)) {
-                let mediaSrc = contextElement.src || '';
-
-                if (!mediaSrc.src) {
-                  const sourceEl = contextElement.querySelector('source');
-                  if (sourceEl) mediaSrc = sourceEl.src;
-                }
-
-                $ctxMediaUrl = mediaSrc;
-              }
-
               contextElement = null;
             }
             if (!$ctxTextSelection) {
               $ctxTextSelection = window.getSelection().toString();
             }
 
             resolve({
-              $ctxElSelector,
-              $ctxTextSelection,
               $ctxLink,
               $ctxMediaUrl,
+              $ctxElSelector,
+              $ctxTextSelection,
             });
             break;
           }

src/content/services/shortcutListener.js

@@ -63,20 +63,28 @@ function workflowShortcutsListener(findWorkflow, shortcutsObj) {
     return true;
   });
 }
+async function getWorkflows() {
+  const { workflows, workflowHosts } = await browser.storage.local.get([
+    'workflows',
+    'workflowHosts',
+  ]);
+  const localWorkflows = Array.isArray(workflows)
+    ? workflows
+    : Object.values(workflows);
+
+  return {
+    local: localWorkflows,
+    hosted: Object.values(workflowHosts || {}),
+  };
+}
 
 export default async function () {
   try {
-    const { shortcuts, workflows, workflowHosts } =
-      await browser.storage.local.get([
-        'shortcuts',
-        'workflows',
-        'workflowHosts',
-      ]);
-    const workflowsArr = Array.isArray(workflows)
-      ? workflows
-      : Object.values(workflows);
+    const storage = await browser.storage.local.get('shortcuts');
+    let workflows = await getWorkflows();
+
     const findWorkflow = (id, publicId = false) => {
-      let workflow = workflowsArr.find((item) => {
+      let workflow = workflows.local.find((item) => {
         if (publicId) {
           return item.settings.publicId === id;
         }
@@ -85,18 +93,38 @@ export default async function () {
       });
 
       if (!workflow) {
-        workflow = Object.values(workflowHosts || {}).find(
-          ({ hostId }) => hostId === id
-        );
+        workflow = workflows.hosted.find(({ hostId }) => hostId === id);
 
         if (workflow) workflow.id = workflow.hostId;
       }
 
       return workflow;
     };
 
+    browser.storage.onChanged.addListener(({ automaShortcut, shortcuts }) => {
+      if (automaShortcut) {
+        if (
+          Array.isArray(automaShortcut.newValue) &&
+          automaShortcut.newValue.length < 1
+        ) {
+          window._automaShortcuts = [];
+        } else {
+          const automaShortcutArr = automaShortcut.newValue.split('+');
+
+          window._automaShortcuts = automaShortcutArr;
+        }
+      }
+      if (shortcuts) {
+        Mousetrap.reset();
+        getWorkflows().then((updatedWorkflows) => {
+          workflows = updatedWorkflows;
+          workflowShortcutsListener(findWorkflow, shortcuts.newValue || {});
+        });
+      }
+    });
+
     automaCustomEventListener(findWorkflow);
-    workflowShortcutsListener(findWorkflow, shortcuts || {});
+    workflowShortcutsListener(findWorkflow, storage.shortcuts || {});
   } catch (error) {
     console.error(error);
   }

src/content/utils.js

@@ -13,11 +13,16 @@ export function simulateClickElement(element) {
 
 export function generateLoopSelectors(
   elements,
-  { max, attrId, frameSelector, startIndex = 0 }
+  { max, attrId, frameSelector, reverseLoop, startIndex = 0 }
 ) {
   const selectors = [];
+  let elementsList = elements;
 
-  elements.forEach((el, index) => {
+  if (reverseLoop) {
+    elementsList = Array.from(elements).reverse();
+  }
+
+  elementsList.forEach((el, index) => {
     if (max > 0 && selectors.length - 1 > max) return;
 
     const attrName = 'automa-loop';

src/newtab/pages/settings/SettingsShortcuts.vue

@@ -108,7 +108,7 @@ const { t } = useI18n();
 const toast = useToast();
 
 const shortcuts = ref(mapShortcuts);
-const automaShortcut = ref(getReadableShortcut('mod+shift+a'));
+const automaShortcut = ref(getReadableShortcut('mod+shift+e'));
 const recording = reactive({
   id: '',
   keys: [],

src/utils/shared.js

@@ -742,11 +742,12 @@ export const tasks = {
     data: {
       disableBlock: false,
       loopId: '',
+      selector: '',
       maxLoop: '0',
       description: '',
-      selector: '',
-      findBy: 'cssSelector',
+      reverseLoop: false,
       actionElSelector: '',
+      findBy: 'cssSelector',
       actionElMaxWaitTime: 5,
       actionPageMaxWaitTime: 10,
       loadMoreAction: 'none',
@@ -1241,7 +1242,7 @@ export const tasks = {
     outputs: 1,
     allowedInputs: true,
     maxConnection: 1,
-    refDataKeys: ['html', 'css'],
+    refDataKeys: ['html', 'css', 'selector'],
     data: {
       disableBlock: false,
       description: '',