From 7ecebedf8e8493428c2037b290863fd9293f38d5 Mon Sep 17 00:00:00 2001 From: Ahmad Kholid Date: Sat, 5 Mar 2022 17:59:46 +0800 Subject: [PATCH] fix: automa element selector not working --- src/content/element-selector/AppHeader.vue | 0 src/content/element-selector/comps-ui.js | 2 + src/content/element-selector/index.js | 49 ++++++++++++++-------- src/content/element-selector/main.js | 21 +++++----- src/content/index.js | 5 --- src/popup/pages/Home.vue | 14 +++---- webpack.config.js | 2 +- 7 files changed, 51 insertions(+), 42 deletions(-) delete mode 100644 src/content/element-selector/AppHeader.vue diff --git a/src/content/element-selector/AppHeader.vue b/src/content/element-selector/AppHeader.vue deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/content/element-selector/comps-ui.js b/src/content/element-selector/comps-ui.js index e871a12b9..d80f10ef7 100644 --- a/src/content/element-selector/comps-ui.js +++ b/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); diff --git a/src/content/element-selector/index.js b/src/content/element-selector/index.js index c4a986a60..fb40a51c0 100644 --- a/src/content/element-selector/index.js +++ b/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); } -} +})(); diff --git a/src/content/element-selector/main.js b/src/content/element-selector/main.js index a287f40f0..6f80baf74 100644 --- a/src/content/element-selector/main.js +++ b/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); +} diff --git a/src/content/index.js b/src/content/index.js index e295410f3..dc87d2253 100644 --- a/src/content/index.js +++ b/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', diff --git a/src/popup/pages/Home.vue b/src/popup/pages/Home.vue index 87f590692..0634fac6a 100644 --- a/src/popup/pages/Home.vue +++ b/src/popup/pages/Home.vue @@ -18,7 +18,7 @@ " icon class="mr-2" - @click="selectElement" + @click="initElementSelector" > @@ -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); diff --git a/webpack.config.js b/webpack.config.js index 03d04016f..a0e234019 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -69,7 +69,7 @@ const options = { 'src', 'content', 'element-selector', - 'main.js' + 'index.js' ), }, chromeExtensionBoilerplate: {