fix: automa element selector not working

package.json

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

src/content/elementSelector/index.js

@@ -1,39 +1,14 @@
-import browser from 'webextension-polyfill';
+import { elementSelectorInstance } from '../utils';
 import initElementSelector from './main';
 import injectAppStyles from '../injectAppStyles';
 import selectorFrameContext from './selectorFrameContext';
 
-function elementSelectorInstance() {
-  const rootElementExist = document.querySelector(
-    '#app-container.automa-element-selector'
-  );
-
-  if (rootElementExist) {
-    rootElementExist.style.display = 'block';
-
-    return true;
-  }
-
-  return false;
-}
-
 (async function () {
-  browser.runtime.onMessage.addListener((data) => {
-    return new Promise((resolve) => {
-      if (data.type === 'automa-element-selector') {
-        elementSelectorInstance();
-
-        resolve(true);
-      }
-    });
-  });
-
   try {
     const isMainFrame = window.self === window.top;
 
     if (isMainFrame) {
       const isAppExists = elementSelectorInstance();
-
       if (isAppExists) return;
 
       const rootElement = document.createElement('div');

src/content/index.js

@@ -4,6 +4,7 @@ import blocksHandler from './blocksHandler';
 import showExecutedBlock from './showExecutedBlock';
 import handleTestCondition from './handleTestCondition';
 import shortcutListener from './services/shortcutListener';
+import { elementSelectorInstance } from './utils';
 
 const isMainFrame = window.self === window.top;
 
@@ -150,7 +151,14 @@ function messageListener({ data, source }) {
         case 'content-script-exists':
           resolve(true);
           break;
+        case 'automa-element-selector': {
+          const selectorInstance = elementSelectorInstance();
+
+          resolve(selectorInstance);
+          break;
+        }
         default:
+          resolve(null);
       }
     });
   });

src/content/utils.js

@@ -1,3 +1,17 @@
+export function elementSelectorInstance() {
+  const rootElementExist = document.querySelector(
+    '#app-container.automa-element-selector'
+  );
+
+  if (rootElementExist) {
+    rootElementExist.style.display = 'block';
+
+    return true;
+  }
+
+  return false;
+}
+
 export function getElementRect(target, withAttributes) {
   if (!target) return {};
 

src/popup/pages/Home.vue

@@ -211,27 +211,18 @@ function openDashboard(url) {
 }
 async function initElementSelector() {
   const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+  const result = await browser.tabs.sendMessage(tab.id, {
+    type: 'automa-element-selector',
+  });
 
-  try {
-    const result = await browser.tabs.sendMessage(tab.id, {
-      type: 'automa-element-selector',
+  if (!result) {
+    await browser.tabs.executeScript(tab.id, {
+      allFrames: true,
+      file: './elementSelector.bundle.js',
     });
-
-    if (!result) throw new Error('not-found');
-
-    window.close();
-  } catch (error) {
-    if (error.message.includes('Could not establish connection.')) {
-      await browser.tabs.executeScript(tab.id, {
-        allFrames: true,
-        file: './elementSelector.bundle.js',
-      });
-
-      initElementSelector();
-    }
-
-    console.error(error);
   }
+
+  window.close();
 }
 async function recordWorkflow(options = {}) {
   try {