feat(backround): add tab message listener

src/background/blocks-handler.js

@@ -52,10 +52,19 @@ export function openWebsite(block) {
 }
 
 export function eventClick(block) {
-  return new Promise(() => {
+  return new Promise((resolve) => {
     if (!this._connectedTab) return;
-    console.log(this._connectedTab);
-    /* listen tab message and then resolve */
+
     this._connectedTab.postMessage(block);
+    this._listenTabMessage(
+      'event-click',
+      () => {
+        resolve({
+          nextBlockId: getBlockConnection(block),
+          data: '',
+        });
+      },
+      { once: true }
+    );
   });
 }

src/background/workflow-engine.js

@@ -3,8 +3,14 @@ import browser from 'webextension-polyfill';
 import { toCamelCase } from '@/utils/helper';
 import * as blocksHandler from './blocks-handler';
 
-function tabMessageListener(a, b) {
-  console.log(a, b);
+function tabMessageListenerHandler({ type, data }) {
+  const listener = this.tabMessageListeners[type];
+
+  if (listener) {
+    listener.callback(data);
+
+    if (listener.once) delete this.tabMessageListeners[type];
+  }
 }
 
 class WorkflowEngine {
@@ -15,7 +21,8 @@ class WorkflowEngine {
     this.data = [];
     this.isDestroyed = false;
 
-    this.tabMessageListener = tabMessageListener.bind(this);
+    this.tabMessageListeners = {};
+    this.tabMessageListenerHandler = tabMessageListenerHandler.bind(this);
   }
 
   init() {
@@ -76,7 +83,9 @@ class WorkflowEngine {
       if (id !== tabId) return;
 
       this.destroy();
-      this.connectedTab.removeListener(this.tabMessageListener);
+      this.connectedTab.onMessage.removeListener(
+        this.tabMessageListenerHandler
+      );
       this.connectedTab.disconnect();
 
       delete this.connectedTab;
@@ -92,15 +101,29 @@ class WorkflowEngine {
     if (!this.connectedTab) {
       browser.tabs.onRemoved.addListener(tabRemovedListener);
     } else {
-      // Add connectedTab message listener
+      this.connectedTab.onMessage.removeListener(
+        this.tabMessageListenerHandler
+      );
+      this.connectedTab.disconnect();
     }
 
+    console.log('===Message Listener===');
+    connectedTab.onMessage.addListener(this.tabMessageListenerHandler);
+
     this.connectedTab = connectedTab;
     this.tabId = tabId;
 
     return connectedTab;
   }
 
+  _listenTabMessage(name, callback, options = { once: false }) {
+    this.tabMessageListeners[name] = { callback, ...options };
+
+    return () => {
+      delete this.tabMessageListeners[name];
+    };
+  }
+
   get _connectedTab() {
     if (!this.connectedTab) {
       this.destroy();

src/content/blocks-handler.js

@@ -12,9 +12,11 @@ function handleElement(data, callback) {
   }
 }
 
-export function eventClick({ data }) {
+export function eventClick({ data }, port) {
   handleElement(data, (element) => {
     console.log(element);
     element.click();
   });
+
+  port.postMessage({ type: 'event-click' });
 }

src/content/index.js

@@ -7,7 +7,7 @@ browser.runtime.onConnect.addListener((port) => {
     const handler = blocksHandler[toCamelCase(data.name)];
     console.log(`${data.name}(${toCamelCase(data.name)}):`, data);
     if (handler) {
-      handler(data);
+      handler(data, port);
     } else {
       console.error(`"${data.name}" doesn't have a handler`);
     }