fix: automa element selector not working

src/content/element-selector/comps-ui.js

@@ -4,6 +4,7 @@ import UiTabs from '@/components/ui/UiTabs.vue';
 import UiInput from '@/components/ui/UiInput.vue';
 import UiButton from '@/components/ui/UiButton.vue';
 import UiSelect from '@/components/ui/UiSelect.vue';
+import UiExpand from '@/components/ui/UiExpand.vue';
 import UiTextarea from '@/components/ui/UiTextarea.vue';
 import UiCheckbox from '@/components/ui/UiCheckbox.vue';
 import UiTabPanel from '@/components/ui/UiTabPanel.vue';
@@ -16,6 +17,7 @@ export default function (app) {
   app.component('UiInput', UiInput);
   app.component('UiButton', UiButton);
   app.component('UiSelect', UiSelect);
+  app.component('UiExpand', UiExpand);
   app.component('UiTextarea', UiTextarea);
   app.component('UiCheckbox', UiCheckbox);
   app.component('UiTabPanel', UiTabPanel);

src/content/element-selector/index.js

@@ -1,3 +1,6 @@
+import browser from 'webextension-polyfill';
+import initElementSelector from './main';
+
 async function getStyles() {
   try {
     const response = await fetch(chrome.runtime.getURL('/elementSelector.css'));
@@ -24,17 +27,35 @@ async function getStyles() {
   }
 }
 
-export default async function () {
-  try {
-    const rootElementExist = document.querySelector(
-      '#app-container.automa-element-selector'
-    );
+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);
+      }
+    });
+  });
 
-    if (rootElementExist) {
-      rootElementExist.style.display = 'block';
+  try {
+    const isAppExists = elementSelectorInstance();
 
-      return;
-    }
+    if (isAppExists) return;
 
     const rootElement = document.createElement('div');
     rootElement.setAttribute('id', 'app-container');
@@ -45,22 +66,16 @@ export default async function () {
     automaStyle.classList.add('automa-element-selector');
     automaStyle.innerHTML = `.automa-element-selector { pointer-events: none } \n [automa-isDragging] { user-select: none }`;
 
-    const scriptEl = document.createElement('script');
-    scriptEl.setAttribute('type', 'module');
-    scriptEl.setAttribute(
-      'src',
-      chrome.runtime.getURL('/elementSelector.bundle.js')
-    );
+    initElementSelector(rootElement);
 
     const appStyle = document.createElement('style');
     appStyle.innerHTML = await getStyles();
 
     rootElement.shadowRoot.appendChild(appStyle);
-    rootElement.shadowRoot.appendChild(scriptEl);
 
     document.documentElement.appendChild(rootElement);
     document.documentElement.appendChild(automaStyle);
   } catch (error) {
     console.error(error);
   }
-}
+})();

src/content/element-selector/main.js

@@ -6,15 +6,16 @@ import icons from './icons';
 import vueI18n from './vue-i18n';
 import '@/assets/css/tailwind.css';
 
-const rootElement = document.querySelector('div.automa-element-selector');
-const appRoot = document.createElement('div');
-appRoot.setAttribute('id', 'app');
+export default function (rootElement) {
+  const appRoot = document.createElement('div');
+  appRoot.setAttribute('id', 'app');
 
-rootElement.shadowRoot.appendChild(appRoot);
+  rootElement.shadowRoot.appendChild(appRoot);
 
-createApp(App)
-  .provide('rootElement', rootElement)
-  .use(vueI18n)
-  .use(vRemixicon, icons)
-  .use(compsUi)
-  .mount(appRoot);
+  createApp(App)
+    .provide('rootElement', rootElement)
+    .use(vueI18n)
+    .use(vRemixicon, icons)
+    .use(compsUi)
+    .mount(appRoot);
+}

src/content/index.js

@@ -1,7 +1,6 @@
 import browser from 'webextension-polyfill';
 import { nanoid } from 'nanoid';
 import { toCamelCase } from '@/utils/helper';
-import elementSelector from './element-selector';
 import executedBlock from './executed-block';
 import blocksHandler from './blocks-handler';
 
@@ -40,10 +39,6 @@ import blocksHandler from './blocks-handler';
         case 'content-script-exists':
           resolve(true);
           break;
-        case 'select-element':
-          elementSelector();
-          resolve(true);
-          break;
         case 'give-me-the-frame-id':
           browser.runtime.sendMessage({
             type: 'this-is-the-frame-id',

src/popup/pages/Home.vue

@@ -18,7 +18,7 @@
         "
         icon
         class="mr-2"
-        @click="selectElement"
+        @click="initElementSelector"
       >
         <v-remixicon name="riFocus3Line" />
       </ui-button>
@@ -124,25 +124,21 @@ function deleteWorkflow({ id, name }) {
 function openDashboard(url) {
   sendMessage('open:dashboard', url, 'background');
 }
-async function selectElement() {
+async function initElementSelector() {
   const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
 
   try {
     await browser.tabs.sendMessage(tab.id, {
-      type: 'content-script-exists',
-    });
-
-    browser.tabs.sendMessage(tab.id, {
-      type: 'select-element',
+      type: 'automa-element-selector',
     });
   } catch (error) {
     if (error.message.includes('Could not establish connection.')) {
       await browser.tabs.executeScript(tab.id, {
         allFrames: true,
-        file: './contentScript.bundle.js',
+        file: './elementSelector.bundle.js',
       });
 
-      selectElement();
+      initElementSelector();
     }
 
     console.error(error);

webpack.config.js

@@ -69,7 +69,7 @@ const options = {
       'src',
       'content',
       'element-selector',
-      'main.js'
+      'index.js'
     ),
   },
   chromeExtensionBoilerplate: {