Implement crossmessaging

Author: zalmoxisus

package.json

@@ -50,6 +50,7 @@
     "webpack": "^1.12.2"
   },
   "dependencies": {
+    "crossmessaging": "^0.1.1",
     "json-stringify-safe": "^5.0.1",
     "react": "^0.14.0",
     "react-dom": "^0.14.0",

src/browser/extension/background/messaging.js

@@ -1,3 +1,4 @@
+import { onConnect, onMessage, sendToTab } from 'crossmessaging';
 import { MENU_DEVTOOLS } from '../../../app/constants/ContextMenus.js';
 let connections = {};
 
@@ -8,35 +9,10 @@ function sendNAMessage(port) {
   });
 }
 
-// Listen to messages sent from the DevTools page
-chrome.runtime.onConnect.addListener(function(port) {
-
-  function extensionListener(message) {
-    if (message.name === 'init') {
-      connections[message.tabId] = port;
-      if (message.tabId !== store.tabId) {
-        sendNAMessage(port);
-        return;
-      }
-      connections[message.tabId].postMessage({
-        payload: store.liftedStore.getState(),
-        source: 'redux-page'
-      });
-    }
-  }
-
-  port.onMessage.addListener(extensionListener);
-
-  port.onDisconnect.addListener(function(portDiscon) {
-    portDiscon.onMessage.removeListener(extensionListener);
-
-    Object.keys(connections).forEach(function(id) {
-      if (connections[id] === portDiscon) {
-        delete connections[id];
-      }
-    });
-  });
-});
+onConnect(() => ({
+  payload: window.store.liftedStore.getState(),
+  source: 'redux-page'
+}), {}, connections, window.store, sendNAMessage);
 
 // Receive message from content script and relay to the devTools page
 function messaging(request, sender) {
@@ -48,7 +24,7 @@ function messaging(request, sender) {
     }
     if (request.payload) store.liftedStore.setState(request.payload);
     if (request.init) {
-      store.tabId = tabId;
+      store.id = tabId;
       if (typeof tabId === 'number') {
         chrome.contextMenus.update(MENU_DEVTOOLS, {documentUrlPatterns: [sender.url], enabled: true});
         chrome.pageAction.show(tabId);
@@ -61,15 +37,13 @@ function messaging(request, sender) {
   return true;
 }
 
-chrome.runtime.onMessage.addListener(messaging);
+onMessage(messaging);
 chrome.runtime.onMessageExternal.addListener(messaging);
 
 export function toContentScript(action) {
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-    if (store.tabId in connections) {
-      connections[ store.tabId ].postMessage({action: action});
-    } else {
-      chrome.tabs.sendMessage(store.tabId, {action: action});
-    }
-  });
+  if (store.id in connections) {
+    connections[ store.id ].postMessage({action: action});
+  } else {
+    sendToTab(store.id, {action: action});
+  }
 }

src/browser/extension/devpanel/index.js

@@ -1,9 +1,12 @@
+import { connect } from 'crossmessaging';
 import React from 'react';
 import { render } from 'react-dom';
 import Provider from '../../../app/containers/Provider';
 import DevTools from '../../../app/containers/DevTools';
 import createDevStore from '../../../app/store/createDevStore';
 
+const backgroundPageConnection = connect();
+
 function dispatch(action) {
   chrome.devtools.inspectedWindow.eval(
     'window.postMessage({' +
@@ -31,10 +34,6 @@ function showDevTools() {
   }
 }
 
-const backgroundPageConnection = chrome.runtime.connect({
-  name: 'panel'
-});
-
 backgroundPageConnection.onMessage.addListener((message) => {
   if (message.na) {
     render(

src/browser/extension/inject/contentScript.js

@@ -1,14 +1,25 @@
+import { onMessage, sendToBg } from 'crossmessaging';
 let payload;
+let sendMessage;
 
-const sendMessage = (
-  window.devToolsExtensionID ?
-    function(message) {
-      chrome.runtime.sendMessage(window.devToolsExtensionID, message);
-    }
-    : chrome.runtime.sendMessage
-);
+// Relay background script massages to the page script
+onMessage((message) => {
+  if (message.action) {
+    window.postMessage({
+      type: 'ACTION',
+      payload: message.action,
+      source: 'redux-cs'
+    }, '*');
+  }
+});
+
+if (window.devToolsExtensionID) { // Send external messages
+  sendMessage = function(message) {
+    chrome.runtime.sendMessage(window.devToolsExtensionID, message);
+  };
+} else {
+  sendMessage = sendToBg;
 
-if (!window.devToolsExtensionID) {
   let s = document.createElement('script');
   s.src = chrome.extension.getURL('js/page.bundle.js');
   s.onload = function() {
@@ -35,19 +46,6 @@ window.addEventListener('message', function(event) {
   sendMessage(message);
 });
 
-// Request from the background script to send actions to the page
-if (chrome.runtime.onMessage) {
-  chrome.runtime.onMessage.addListener((message) => {
-    if (message.action) {
-      window.postMessage({
-        type: 'ACTION',
-        payload: message.action,
-        source: 'redux-cs'
-      }, '*');
-    }
-  });
-}
-
 if (typeof window.onbeforeunload !== 'undefined') {
   // Prevent adding beforeunload listener for Chrome apps
   window.onbeforeunload = function() {