Use long-lived connections in order to support simultaneous instances

Author: zalmoxisus

package.json

@@ -53,7 +53,7 @@
     "webpack": "^1.12.2"
   },
   "dependencies": {
-    "crossmessaging": "^0.2.0",
+    "crossmessaging": "^0.2.1",
     "jsan": "^3.1.1",
     "react": "^0.14.6",
     "react-dom": "^0.14.6",

src/browser/extension/background/messaging.js

@@ -3,18 +3,44 @@ import updateState from 'remotedev-app/lib/store/updateState';
 import syncOptions from '../options/syncOptions';
 import createMenu from './contextMenus';
 import openDevToolsWindow from './openWindow';
-let connections = {};
+let panelConnections = {};
+let tabConnections = {};
 let catchedErrors = {};
 
 window.syncOptions = syncOptions; // Used in the options page
 
 const naMessage = { type: 'NA' };
 
-// Connect to devpanel
-onConnect((tabId) => {
-  if (tabId !== store.id) return naMessage;
-  return {};
-}, {}, connections);
+function initPanel(msg, port) {
+  panelConnections[msg.tabId] = port;
+  if (msg.tabId !== store.id) return naMessage;
+}
+
+function initInstance(msg, port) {
+  const id = port.sender.tab.id;
+  tabConnections[id] = port;
+  store.liftedStore.instances[id] = msg.instance;
+  store.id = id;
+  if (typeof id === 'number') chrome.pageAction.show(id);
+  return { type: 'START' };
+}
+
+function disconnect(port) {
+  if (!port.sender.tab) return;
+  const id = port.sender.tab.id;
+  delete tabConnections[id];
+  if (panelConnections[id]) panelConnections[id].postMessage(naMessage);
+  if (window.store.liftedStore.instances[id]) {
+    delete window.store.liftedStore.instances[id];
+    window.store.liftedStore.deleteInstance(id);
+  }
+}
+
+onConnect(undefined, {
+  INIT_PANEL: initPanel,
+  INIT_INSTANCE: initInstance,
+  RELAY: (msg, port) => { messaging(msg.message, port.sender); }
+}, panelConnections, disconnect);
 
 function handleInstancesChanged(instance, name) {
   window.store.liftedStore.instances[instance] = name || instance;
@@ -24,15 +50,6 @@ function handleInstancesChanged(instance, name) {
 function messaging(request, sender, sendResponse) {
   const tabId = sender.tab ? sender.tab.id : sender.id;
   if (tabId) {
-    if (request.type === 'PAGE_UNLOADED') {
-      handleInstancesChanged(tabId, undefined, true);
-      if (connections[tabId]) connections[tabId].postMessage(naMessage);
-      if (window.store.liftedStore.instances[tabId]) {
-        delete window.store.liftedStore.instances[tabId];
-        window.store.liftedStore.deleteInstance(tabId);
-      }
-      return true;
-    }
     if (request.type === 'GET_OPTIONS') {
       syncOptions.get(options => {
         sendResponse({options: options});
@@ -60,14 +77,9 @@ function messaging(request, sender, sendResponse) {
     const payload = updateState(store, request, handleInstancesChanged, store.liftedStore.instance);
     if (!payload) return true;
 
-    if (request.init) {
-      store.id = tabId;
-      createMenu(sender.url, tabId);
-    }
-
-    // Relay the message to the devTools page
-    if (tabId in connections) {
-      connections[tabId].postMessage(request);
+    // Relay the message to the devTools panel
+    if (tabId in panelConnections) {
+      panelConnections[tabId].postMessage(request);
     }
 
     // Notify when errors occur in the app
@@ -107,9 +119,9 @@ export function toContentScript(action) {
   const message = { type: 'DISPATCH', action: action };
   let id = store.liftedStore.instance;
   if (!id || id === 'auto') id = store.id;
-  if (id in connections) {
-    connections[id].postMessage(message);
+  if (id in panelConnections) {
+    panelConnections[id].postMessage(message);
   } else {
-    sendToTab(Number(id), message);
+    tabConnections[id].postMessage(message);
   }
 }

src/browser/extension/devpanel/index.js

@@ -56,7 +56,7 @@ function init(id) {
     'source: \'redux-cs\'' +
     '}, \'*\');'
   );
-  backgroundPageConnection.postMessage({ name: 'init', tabId: id });
+  backgroundPageConnection.postMessage({ name: 'INIT_PANEL', tabId: id });
 }
 
 if (chrome.devtools.inspectedWindow.tabId) {

src/browser/extension/inject/contentScript.js

@@ -1,27 +1,33 @@
-import { onMessage, sendToBg } from 'crossmessaging';
 import { getOptionsFromBg, isAllowed } from '../options/syncOptions';
+let bg;
 let payload;
-let sendMessage;
 
 if (!window.devToolsOptions) getOptionsFromBg();
 
-// Relay background script massages to the page script
-onMessage((message) => {
-  if (message.action) {
-    window.postMessage({
-      type: 'DISPATCH',
-      payload: message.action,
-      source: 'redux-cs'
-    }, '*');
+function connect(instance) {
+  // Connect to the background script
+  if (window.devToolsExtensionID) {
+    bg = chrome.runtime.connect(window.devToolsExtensionID);
+  } else {
+    bg = chrome.runtime.connect();
   }
-});
+  bg.postMessage({name: 'INIT_INSTANCE', instance});
 
-if (window.devToolsExtensionID) { // Send external messages
-  sendMessage = function(message) {
-    chrome.runtime.sendMessage(window.devToolsExtensionID, message);
-  };
-} else {
-  sendMessage = sendToBg;
+  // Relay background script massages to the page script
+  bg.onMessage.addListener((message) => {
+    if (message.action) {
+      window.postMessage({
+        type: 'DISPATCH',
+        payload: message.action,
+        source: 'redux-cs'
+      }, '*');
+    } else if (message.type === 'START') {
+      window.postMessage({
+        type: 'START',
+        source: 'redux-cs'
+      }, '*');
+    }
+  });
 }
 
 // Resend messages from the page to the background script
@@ -32,7 +38,9 @@ window.addEventListener('message', function(event) {
   if (message.source !== 'redux-page') return;
   if (message.payload) payload = message.payload;
   try {
-    sendMessage(message);
+    if (message.type === 'INIT_INSTANCE') {
+      connect(message.name);
+    } else bg.postMessage({ name: 'RELAY', message });
   } catch (err) {
     if (process.env.NODE_ENV !== 'production') console.error('Failed to send message', err);
   }
@@ -42,6 +50,6 @@ if (typeof window.onbeforeunload !== 'undefined') {
   // Prevent adding beforeunload listener for Chrome apps
   window.onbeforeunload = function() {
     if (!isAllowed()) return;
-    sendMessage({ type: 'PAGE_UNLOADED' });
+    bg.postMessage({ type: 'PAGE_UNLOADED' });
   };
 }

src/browser/extension/inject/pageScript.js

@@ -20,7 +20,7 @@ window.devToolsExtension = function(config = {}) {
   }
 
   function relaySerialized(message) {
-    message.payload = stringify(message.payload);
+    if (message.payload) message.payload = stringify(message.payload);
     if (message.action !== '') message.action = stringify(message.action);
     window.postMessage(message, '*');
   }
@@ -103,7 +103,7 @@ window.devToolsExtension = function(config = {}) {
 
   function init() {
     window.addEventListener('message', onMessage, false);
-    relay('STATE', store.liftedStore.getState());
+    relay('INIT_INSTANCE');
     notifyErrors(() => {
       errorOccurred = true;
       const state = store.liftedStore.getState();