feat: run JS before page load option

src/background/workflowEngine/blocksHandler/handlerCreateElement.js

@@ -27,7 +27,7 @@ async function handleCreateElement(block, { refData }) {
     payload.refData = { ...refData, secrets: {} };
   }
 
-  await this._sendMessageToTab(payload);
+  await this._sendMessageToTab(payload, {}, data.runBeforeLoad ?? false);
 
   return {
     data: '',

src/background/workflowEngine/blocksHandler/handlerJavascriptCode.js

@@ -24,7 +24,11 @@ export async function javascriptCode({ outputs, data, ...block }, { refData }) {
   if (!data.code.includes('automaNextBlock'))
     payload.data.code += `\nautomaNextBlock()`;
 
-  const result = await this._sendMessageToTab(payload);
+  const result = await this._sendMessageToTab(
+    payload,
+    {},
+    data.runBeforeLoad ?? false
+  );
   if (result) {
     if (result.columns.data?.$error) {
       throw new Error(result.columns.data.message);

src/background/workflowEngine/injectContentScript.js

@@ -30,7 +30,7 @@ export default function (tabId, frameId = 0) {
 
         await browser.tabs.executeScript(tabId, {
           allFrames: true,
-          runAt: 'document_end',
+          runAt: 'document_start',
           file: './contentScript.bundle.js',
         });
         const isScriptExists = await contentScriptExist(tabId, currentFrameId);

src/background/workflowEngine/worker.js

@@ -299,7 +299,7 @@ class Worker {
     };
   }
 
-  async _sendMessageToTab(payload, options = {}) {
+  async _sendMessageToTab(payload, options = {}, runBeforeLoad = false) {
     try {
       if (!this.activeTab.id) {
         const error = new Error('no-tab');
@@ -308,10 +308,12 @@ class Worker {
         throw error;
       }
 
-      await waitTabLoaded({
-        tabId: this.activeTab.id,
-        ms: this.settings?.tabLoadTimeout ?? 30000,
-      });
+      if (!runBeforeLoad) {
+        await waitTabLoaded({
+          tabId: this.activeTab.id,
+          ms: this.settings?.tabLoadTimeout ?? 30000,
+        });
+      }
 
       const { executedBlockOnWeb, debugMode } = this.settings;
       const messagePayload = {
@@ -333,7 +335,7 @@ class Worker {
       return data;
     } catch (error) {
       console.error(error);
-      const noConnection = error.message?.startsWith(
+      const noConnection = error.message?.includes(
         'Could not establish connection'
       );
       const channelClosed = error.message?.includes('message channel closed');
@@ -345,7 +347,11 @@ class Worker {
         );
 
         if (isScriptInjected) {
-          const result = await this._sendMessageToTab(payload, options);
+          const result = await this._sendMessageToTab(
+            payload,
+            options,
+            runBeforeLoad
+          );
           return result;
         }
         error.message = 'Could not establish connection to the active tab';

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

@@ -14,6 +14,13 @@
         {{ $t(`workflow.blocks.create-element.insertEl.items.${item}`) }}
       </option>
     </ui-select>
+    <ui-checkbox
+      :model-value="data.runBeforeLoad"
+      class="mt-2"
+      @change="updateData({ runBeforeLoad: $event })"
+    >
+      Run before page loaded
+    </ui-checkbox>
     <ui-button
       variant="accent"
       class="w-full mt-4"

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

@@ -32,6 +32,13 @@
     >
       {{ t('workflow.blocks.javascript-code.everyNewTab') }}
     </ui-checkbox>
+    <ui-checkbox
+      :model-value="data.runBeforeLoad"
+      class="mt-2"
+      @change="updateData({ runBeforeLoad: $event })"
+    >
+      Run before page loaded
+    </ui-checkbox>
     <ui-modal v-model="state.showCodeModal" content-class="max-w-3xl">
       <template #header>
         <ui-tabs v-model="state.activeTab" class="border-none">

src/utils/shared.js

@@ -530,6 +530,7 @@ export const tasks = {
       code: 'console.log("Hello world!");\nautomaNextBlock()',
       preloadScripts: [],
       everyNewTab: false,
+      runBeforeLoad: false,
     },
   },
   'trigger-event': {
@@ -1208,6 +1209,7 @@ export const tasks = {
       preloadScripts: [],
       findBy: 'cssSelector',
       insertAt: 'after',
+      runBeforeLoad: false,
       waitForSelector: false,
       waitSelectorTimeout: 5000,
       selector: 'body',