feat(content): add block handlers

src/utils/blocks-handler.js → src/background/blocks-handler.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import browser from 'webextension-polyfill';
 
 function getBlockConnection(block, index = 1) {
@@ -31,13 +32,7 @@ export function openWebsite(block) {
                 file: './contentScript.bundle.js',
               })
               .then(() => {
-                this.connectedTab = browser.tabs.connect(tabId, {
-                  name: `${this.workflow.id}--${this.workflow.name.slice(
-                    0,
-                    10
-                  )}`,
-                });
-                this.tabId = tabId;
+                this._connectTab(tabId);
 
                 resolve({ nextBlockId: getBlockConnection(block) });
               });
@@ -52,3 +47,12 @@ export function openWebsite(block) {
       });
   });
 }
+
+export function eventClick(block) {
+  return new Promise(() => {
+    if (!this._connectedTab) return;
+    console.log(this._connectedTab);
+    /* listen tab message and then resolve */
+    this._connectedTab.postMessage(block);
+  });
+}

src/background/index.js

@@ -1,5 +1,5 @@
 import { MessageListener } from '@/utils/message';
-import WorkflowEngine from '@/utils/workflow-engine';
+import WorkflowEngine from './workflow-engine';
 
 chrome.runtime.onInstalled.addListener((details) => {
   if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {

src/utils/workflow-engine.js → src/background/workflow-engine.js

@@ -1,13 +1,21 @@
 /* eslint-disable no-underscore-dangle */
-import { toCamelCase } from './helper';
+import browser from 'webextension-polyfill';
+import { toCamelCase } from '@/utils/helper';
 import * as blocksHandler from './blocks-handler';
 
+function tabMessageListener(a, b) {
+  console.log(a, b);
+}
+
 class WorkflowEngine {
   constructor(workflow) {
     this.workflow = workflow;
     this.blocks = {};
     this.blocksArr = [];
     this.data = [];
+    this.isDestroyed = false;
+
+    this.tabMessageListener = tabMessageListener.bind(this);
   }
 
   init() {
@@ -33,10 +41,18 @@ class WorkflowEngine {
     this._blockHandler(triggerBlock);
   }
 
+  destroy() {
+    // Add 'destroyed' log
+
+    this.isDestroyed = true;
+  }
+
   _blockHandler(block) {
+    if (this.isDestroyed) return;
+
     console.log(`${block.name}(${toCamelCase(block.name)}):`, block);
     const handler = blocksHandler[toCamelCase(block?.name)];
-
+    /* pass data from prev block */
     if (handler) {
       handler
         .call(this, block)
@@ -54,6 +70,46 @@ class WorkflowEngine {
       console.error(`"${block.name}" block doesn't have a handler`);
     }
   }
+
+  _connectTab(tabId) {
+    const tabRemovedListener = (id) => {
+      if (id !== tabId) return;
+
+      this.destroy();
+      this.connectedTab.removeListener(this.tabMessageListener);
+      this.connectedTab.disconnect();
+
+      delete this.connectedTab;
+      delete this.tabId;
+
+      browser.tabs.onRemoved.removeListener(tabRemovedListener);
+    };
+
+    const connectedTab = browser.tabs.connect(tabId, {
+      name: `${this.workflow.id}--${this.workflow.name.slice(0, 10)}`,
+    });
+
+    if (!this.connectedTab) {
+      browser.tabs.onRemoved.addListener(tabRemovedListener);
+    } else {
+      // Add connectedTab message listener
+    }
+
+    this.connectedTab = connectedTab;
+    this.tabId = tabId;
+
+    return connectedTab;
+  }
+
+  get _connectedTab() {
+    if (!this.connectedTab) {
+      this.destroy();
+
+      return null;
+    }
+
+    return this.connectedTab;
+  }
 }
 
 export default WorkflowEngine;

src/content/blocks-handler.js

@@ -0,0 +1,20 @@
+function handleElement(data, callback) {
+  if (!data.selector) return;
+
+  const element = data.multiple
+    ? document.querySelectorAll(data.selector)
+    : document.querySelector(data.selector);
+
+  if (data.multiple) {
+    element.forEach(callback);
+  } else if (element) {
+    callback(element);
+  }
+}
+
+export function eventClick({ data }) {
+  handleElement(data, (element) => {
+    console.log(element);
+    element.click();
+  });
+}

src/content/index.js

@@ -1,13 +1,15 @@
 import browser from 'webextension-polyfill';
-import { printLine } from './modules/print';
+import { toCamelCase } from '@/utils/helper';
+import * as blocksHandler from './blocks-handler';
 
-console.log('Content script works!');
-console.log('Must reload extension for modifications to take effect.');
-
-printLine("Using the 'printLine' function from the Print Module");
-
-(() => {
-  browser.runtime.onConnect.addListener((a, b) => {
-    console.log(a, b);
+browser.runtime.onConnect.addListener((port) => {
+  port.onMessage.addListener((data) => {
+    const handler = blocksHandler[toCamelCase(data.name)];
+    console.log(`${data.name}(${toCamelCase(data.name)}):`, data);
+    if (handler) {
+      handler(data);
+    } else {
+      console.error(`"${data.name}" doesn't have a handler`);
+    }
   });
-})();
+});

src/content/modules/print.js

@@ -1,3 +0,0 @@
-export const printLine = (line) => {
-  console.log('===> FROM THE PRINT MODULE:', line);
-};