Replaced calls to MezzuriteInspector in App.js with calls to Connection and Subscriber. Achieved feature parity, but it now exposes a chrome API to the app: getting the inspected tab id. This will be addressed later.

src/devpanel/components/App.js

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import Modal from 'react-modal';
 
-import MezzuriteInspector from '../services/MezzuriteInspector';
+import Connection from '../utilities/Connection';
+import Subscriber from '../utilities/Subscriber';
 import formatTimingsEvent from '../utilities/formatTimingsEvent';
+
 import './App.css';
 import Footer from './Footer/Footer';
 import Header from './Header/Header';
@@ -30,12 +32,24 @@ class App extends Component {
   }
 
   componentDidMount () {    
-    MezzuriteInspector.isMezzuritePresentAsync().then((mezzuritePresent) => {
+    // Obtain the inspected window's tab ID
-      if (mezzuritePresent) {
+    // TODO: this should honestly be passed into App as a prop...
-        MezzuriteInspector.listenForTimingEvents((timingEvent) => this.handleTimingEvent(timingEvent));
+    const inspectedWindowTabId = chrome.devtools.inspectedWindow.tabId;
-      } else {
+
-        this.setState({ loading: false });
+    // Set up the background page connection
-      }
+    const backgroundPageConnection = new Connection();
+    backgroundPageConnection.connect('devtools-page');
+
+    // Set up handlers for events or topics of interest that may come through the background page connection
+    // TODO: add handlers for events that indicate whether or not Mezzurite was found, which are currently available
+    const subscriber = new Subscriber(backgroundPageConnection);
+    subscriber.connect();
+    subscriber.subscribeToTopic('timing', timingEvent => this.handleTimingEvent(timingEvent));
+
+    // Notify the background page that we are ready to receive events
+    backgroundPageConnection.postMessage({
+      action: 'init',
+      tabId: inspectedWindowTabId
     });
   }
 

src/devpanel/utilities/Subscriber.js

@@ -14,7 +14,17 @@ class Subscriber {
   }
 
   connect () {
-    this.connection.addListener(this._handleMessages);
+    this.connection.addListener(message => {
+      const action = message.action;
+      for (const [topic, callback] of this.topicToHandlerMap.entries()) {
+        if (topic === action) {
+          callback(message.payload);
+          // Keys are unique, so once we find a matching key,
+          // there's no need to keep iterating.
+          break;
+        }
+      }
+    });
   }
 
   disconnect () {