fix: element selector not showing up

src/background/workflow-engine/engine.js

@@ -337,7 +337,7 @@ class WorkflowEngine {
               if (tab.status === 'loading') {
                 setTimeout(() => {
                   activeTabStatus();
-                }, 1000);
+                }, 500);
                 return;
               }
 

src/components/newtab/workflow/WorkflowSettings.vue

@@ -15,14 +15,6 @@
         </ui-radio>
       </div>
     </div>
-    <div class="mb-6">
-      <p class="mb-1">{{ t('workflow.settings.timeout.title') }}</p>
-      <ui-input
-        v-model="settings.timeout"
-        type="number"
-        class="w-full max-w-sm"
-      />
-    </div>
     <div>
       <p class="mb-1">
         {{ t('workflow.settings.blockDelay.title') }}

src/content/element-selector/App.vue

@@ -268,17 +268,21 @@ const handleScroll = debounce(() => {
   lastScrollPosY = window.scrollY;
 }, 100);
 function destroy() {
-  window.removeEventListener('scroll', handleScroll);
-  window.removeEventListener('mouseup', handleMouseUp);
-  window.removeEventListener('mousemove', handleMouseMove);
-  document.removeEventListener('click', handleClick, true);
-
-  const automaElements = document.querySelectorAll('automa-element-selector');
-  automaElements.forEach((element) => {
-    element.remove();
+  rootElement.style.display = 'none';
+
+  Object.assign(state, {
+    activeTab: '',
+    elSelector: '',
+    isDragging: false,
+    isExecuting: false,
+    selectedElements: [],
+  });
+  Object.assign(hoverElementRect, {
+    x: 0,
+    y: 0,
+    height: 0,
+    width: 0,
   });
-
-  rootElement.remove();
 }
 
 window.addEventListener('scroll', handleScroll);

src/content/element-selector/index.js

@@ -23,17 +23,21 @@ async function getStyles() {
     return '';
   }
 }
-function getLocale() {
-  return new Promise((resolve) => {
-    chrome.storage.local.get('settings', ({ settings }) => {
-      resolve(settings?.locale || 'en');
-    });
-  });
-}
 
 export default async function () {
   try {
+    const rootElementExist = document.querySelector(
+      '#app-container.automa-element-selector'
+    );
+
+    if (rootElementExist) {
+      rootElementExist.style.display = 'block';
+
+      return;
+    }
+
     const rootElement = document.createElement('div');
+    rootElement.setAttribute('id', 'app-container');
     rootElement.classList.add('automa-element-selector');
     rootElement.attachShadow({ mode: 'open' });
 
@@ -48,15 +52,9 @@ export default async function () {
       chrome.runtime.getURL('/elementSelector.bundle.js')
     );
 
-    const appContainer = document.createElement('div');
-    appContainer.setAttribute('data-id', chrome.runtime.id);
-    appContainer.setAttribute('data-locale', await getLocale());
-    appContainer.setAttribute('id', 'app');
-
     const appStyle = document.createElement('style');
     appStyle.innerHTML = await getStyles();
 
-    rootElement.shadowRoot.appendChild(appContainer);
     rootElement.shadowRoot.appendChild(appStyle);
     rootElement.shadowRoot.appendChild(scriptEl);
 

src/content/element-selector/main.js

@@ -7,7 +7,10 @@ import vueI18n from './vue-i18n';
 import '@/assets/css/tailwind.css';
 
 const rootElement = document.querySelector('div.automa-element-selector');
-const appRoot = rootElement.shadowRoot.querySelector('#app');
+const appRoot = document.createElement('div');
+appRoot.setAttribute('id', 'app');
+
+rootElement.shadowRoot.appendChild(appRoot);
 
 createApp(App)
   .provide('rootElement', rootElement)