Got an example React application to load properly in the DevTools panel page. Rolled out a simple custom webpack setup for building the application.

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/env", "@babel/preset-react"]
+}

.gitignore

@@ -328,3 +328,7 @@ ASALocalRun/
 
 # MFractors (Xamarin productivity tool) working folder 
 .mfractor/
+
+# Custom
+build/
+dist/

chrome/extension/background.js

@@ -0,0 +1,22 @@
+'use strict';
+
+chrome.runtime.onInstalled.addListener(onInstalled);
+
+/**
+ * Callback function to be called when the extension has
+ * successfully finished installing. It sets up a Chrome
+ * runtime event listener the ChromeDevTools panel page
+ * uses to tell this Background page to mount the
+ * content script onto the inspected page. 
+ */
+function onInstalled() {
+    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+        console.log(`BG: Got a message! ${message}, ${sender}, ${sendResponse}`);
+
+        if (message.action === "bg_mountContentScript") {
+            chrome.tabs.executeScript(message.tabId, {
+                file: 'extension/content.js' // Relative path is apparently determined from the manifest.json's position
+            });
+        }
+    });
+}

chrome/extension/content.js

@@ -0,0 +1,39 @@
+// This script will be run in the context of the inspected window
+// It will have shared access to the DOM, but not global variables
+// like window. That is isolated. This is why we inject the 
+// additional script
+'use strict';
+
+document.addEventListener('MezzuriteTiming_toExtension', onTimingEvent);
+injectScript('extension/injected.js'); // Relative path is apparently determined from the manifest.json's position
+
+////////////////////////////////
+
+/**
+ * The event listener callback that listens for forwarded Mezzurite
+ * timing events and forwards them to the DevTools panel.
+ * @param {CustomEvent} timingEvent - The forwarded Mezzurite timing event
+ * @listens CustomEvent
+ */
+function onTimingEvent(timingEvent) {
+    // Forward the event to the Mezzurite DevTools panel
+    console.log(`CS: Got a timing event! ${timingEvent}`);
+    console.log(timingEvent);
+    chrome.runtime.sendMessage({
+        action: "timing",
+        payload: timingEvent.detail
+    });
+}
+
+/**
+ * Injects the script at the provided filepath as a script tag
+ * inside the window this content script is running on.
+ * @param {string} filepath - The filepath to the script to be injected.
+ */
+function injectScript(filepath) {
+    const bodyTag = document.getElementsByTagName('body')[0];
+    const scriptTag = document.createElement('script');
+    scriptTag.setAttribute('type', 'text/javascript');
+    scriptTag.setAttribute('src', chrome.extension.getURL(filepath));
+    bodyTag.appendChild(scriptTag);
+}

chrome/extension/injected.js

@@ -0,0 +1,29 @@
+// This script will be run within the context of the inspected page
+// as a <script> tag with full access to the DOM and window objects.
+
+(function () {
+    'use strict';
+
+    // We assume that by the time we inject this script,
+    // the extension has already verified the existence of `window.mezzurite`.
+    if (!window.mezzurite.EventElement) {
+        window.mezzurite.EventElement = {};
+        window.mezzurite.EventElement = document.createTextNode("");
+    }
+    
+    window.mezzurite.EventElement.addEventListener('Timing', (timingEvent) => {
+        //chrome.runtime.sendMessage({action: "timing", value: e});
+        // No access to chrome dev tools or chrome APIs
+        // Need to forward these messages via some DOM element 
+        // to the content script that injected this function in the first place.
+        
+        const eventToContentScript = new CustomEvent('MezzuriteTiming_toExtension', {
+            detail: timingEvent.detail
+        });
+
+        // This call to setTimeOut with 0 delay schedules this call to occur after
+        // already existing events in the browser's queue, which includes rendering events.
+        // This is to minimize the performance impact on the page due to the extension.
+        setTimeout(() => document.dispatchEvent(eventToContentScript), 0);
+    });
+})();

chrome/extension/main.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Mezzurite DevTools</title>
+    <script src="main.js"></script>
+</head>
+<body>
+    
+</body>
+</html>

chrome/extension/main.js

@@ -0,0 +1,64 @@
+'use strict';
+
+let isPanelCreated = false;
+
+// Check if Mezzurite has loaded every second
+const intervalMs = 1000;
+const mezzuriteLoadCheckInterval = setInterval(
+    createPanelIfMezzuriteLoaded, 
+    intervalMs);
+
+////////////////////////////////
+
+/**
+ * Creates the Mezzurite panel in the Chrome Developer Tools page.
+ */
+function createPanel() {
+    const title = "Mezzurite";
+    const iconPath = null;
+    const pagePath = "index.html"; // Relative path is apparently determined from the manifest.json's position
+    chrome.devtools.panels.create(title, iconPath, pagePath, function(panel) {
+        console.log("The Mezzurite panel in DevTools was created!");
+    });
+}
+
+/**
+ * This is a callback function signature for handling the response that
+ * is asynchronously returned by `chrome.devtools.inspectedWindow.eval()`.
+ * @callback evalCallback
+ * @param {Object} result - The result of the evaluated statement.
+ * @param {Object} exceptionInfo - The exception details, if present.
+ */
+
+/**
+ * Attempts to get the `window.mezzurite` object from the inspected window.
+ * @param {evalCallback} callback - The callback that handles the response.
+ */
+function getMezzuriteObject(callback) {
+    const expression = `window.mezzurite`;
+    chrome.devtools.inspectedWindow.eval(expression, callback);
+}
+
+/**
+ * Creates the `Mezzurite` panel in the DevTools page if Mezzurite
+ * is present on the inspected page.
+ */
+function createPanelIfMezzuriteLoaded() {
+    if (isPanelCreated) {
+        return;
+    }
+
+    getMezzuriteObject((result, exceptionInfo) => {
+        if (result === undefined) {
+            return; // Mezzurite not found
+        }
+
+        console.log("Mezzurite was found!");
+
+        // Stop checking for Mezzurite every second, as we have found it.
+        clearInterval(mezzuriteLoadCheckInterval);
+        isPanelCreated = true;
+
+        createPanel();
+    });
+}

chrome/extension/panel.html

@@ -0,0 +1,15 @@
+<html>
+    <head>
+    </head>
+    <body>
+        <!-- This is where the DevTools extension's SPA (React) will mount. -->
+        <div id="container">
+            <h2>Mezzurite Developer Tools</h2>
+            <div id="mezzurite-found"></div>
+            <div id="mezzurite-package"></div>
+            <div id="mezzurite-version"></div>
+            <ul id="timings"></ul>
+        </div>
+        <script src="panel.js"></script>
+    </body>
+</html>

chrome/extension/panel.js

@@ -0,0 +1,88 @@
+'use strict';
+
+getMezzuriteObject((result, exceptionInfo) => {
+    const strNotFound = "Mezzurite has not been detected on this page";
+    const strFound = "Mezzurite has been detected on this page";
+
+    if (result === undefined) {
+        updateMezzuriteFoundStatus(strNotFound);
+    } else {
+        updateMezzuriteFoundStatus(strFound);
+    }
+
+    listenForTimingEvents();
+
+    // Tell the background page to programmatically inject the content script.
+    tellBackgroundToMountContentScript();
+});
+
+////////////////////////////////
+
+/**
+ * Insert provided text inside the tag with id:"mezzurite-found".
+ * @param {string} text - The text to be inserted
+ */
+function updateMezzuriteFoundStatus(text) {
+    document.getElementById("mezzurite-found").innerHTML = text;
+}
+
+/**
+ * Updates the DevTools panel page to display the Mezzurite
+ * package name and version information.
+ * @param {Object} info - An object containing the `name` and `version` of Mezzurite present on the page.
+ */
+function updateMezzuriteFrameworkInformation(info) {
+    document.getElementById("mezzurite-package").innerHTML = "Mezzurite Package Name: " + info.name;
+    document.getElementById("mezzurite-version").innerHTML = "Mezzurite Package Version: " + info.version;
+}
+
+////////////////////////////////
+
+/**
+ * This is a callback function signature for handling the response that
+ * is asynchronously returned by `chrome.devtools.inspectedWindow.eval()`.
+ * @callback evalCallback
+ * @param {Object} result - The result of the evaluated statement.
+ * @param {Object} exceptionInfo - The exception details, if present.
+ */
+
+/**
+ * Attempts to get the `window.mezzurite` object from the inspected window.
+ * @param {evalCallback} callback - The callback that handles the response.
+ */
+function getMezzuriteObject(callback) {
+    const expression = `window.mezzurite`;
+    chrome.devtools.inspectedWindow.eval(expression, callback);
+}
+
+/**
+ * Set up an event listener to grab Mezzurite timing events forwarded
+ * by the content script and display them to the user.
+ */
+function listenForTimingEvents() {
+    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+        console.log(`DT: Got a message! ${message}, ${sender}, ${sendResponse}`);
+
+        if (message.action === "timing") {
+            updateMezzuriteFrameworkInformation(message.payload.Framework);
+
+            message.payload.Timings.forEach(timing => {
+                const item = document.createElement('li');
+                item.appendChild(document.createTextNode(timing.metricType + ", " + timing.value + ", " + timing.data))
+                document.getElementById("timings").appendChild(item);
+            });
+        }
+    });
+}
+
+/**
+ * Send a Chrome runtime message to the background script
+ * to instruct it to mount the content script into the
+ * inspected page.
+ */
+function tellBackgroundToMountContentScript() {
+    chrome.runtime.sendMessage({
+        action: "bg_mountContentScript",
+        tabId: chrome.devtools.inspectedWindow.tabId
+    });
+}

chrome/index.html

@@ -0,0 +1,19 @@
+<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Mezzurite DevTools</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <script src="dist/bundle.js"></script>
+</body>
+
+</html>

chrome/manifest.json

@@ -0,0 +1,24 @@
+{
+    "manifest_version": 2,
+    "author": "Microsoft Corporation",
+    "name": "Mezzurite Developer Tools",
+    "description": "Adds Mezzurite debugging tools to the Chrome Developer Tools",
+    "version": "0.1.0",
+    "minimum_chrome_version": "10.0",
+    "background": {
+        "scripts": ["extension/background.js"],
+        "persistent": false
+    },
+    "devtools_page": "extension/main.html",
+    "permissions": [
+        "activeTab",
+        "tabs",
+        "file:///*",
+        "http://*/*",
+        "https://*/*"
+    ],
+    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+    "web_accessible_resources": [
+        "extension/injected.js"
+    ]
+}

chrome/webpack.config.js

@@ -0,0 +1,37 @@
+// Sourced from: https://gist.github.com/paradoxinversion/a529d12db704bb78248368c202a2cd2d#file-react-app-tutorial-webpack-config-js
+const path = require("path");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  entry: "./src/index.js",
+  mode: "development",
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: "babel-loader",
+        options: { presets: ["@babel/env"] }
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  resolve: { extensions: ["*", ".js", ".jsx"] },
+  output: {
+    path: path.resolve(__dirname, "dist/"),
+    publicPath: "/dist/",
+    filename: "bundle.js"
+  },
+  plugins: [
+    new CopyWebpackPlugin([
+      { from: './src/background.js'},
+      { from: './src/main.js' },
+      { from: './src/panel.js' },
+      { from: './src/content.js'},
+      { from: './src/injected.js' }
+    ], {})
+  ]
+};

package.json

@@ -2,14 +2,26 @@
   "name": "mezzurite-devtools",
   "version": "0.1.0",
   "description": "A Chrome DevTools extension for helping developers onboard onto and debug their Mezzurite setup",
-  "main": "src/main.js",
+  "main": "index.js",
   "dependencies": {
-    "chrome-launcher": "^0.10.5",
+    "react": "^16.5.2",
-    "adm-zip": "^0.4.11"
+    "react-dom": "^16.5.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.1.0",
+    "@babel/core": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.2",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^1.0.0",
+    "style-loader": "^0.23.0",
+    "webpack": "^4.19.1",
+    "webpack-cli": "^3.1.1",
+    "webpack-dev-server": "^3.1.8"
   },
-  "devDependencies": {},
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build:chrome": "webpack --config ./chrome/webpack.config.js --mode development"
   },
   "repository": {
     "type": "git",

src/App.css

@@ -0,0 +1,4 @@
+.App {
+  margin: 1rem;
+  font-family: Arial, Helvetica, sans-serif;
+}

src/App.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './App.css';
+
+class App extends Component{
+  render(){
+    return(
+      <div className="App">
+        <h1> Hello, World! </h1>
+      </div>
+    );
+  }
+}
+
+export default App;

src/index.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.js';
+
+ReactDOM.render(<App />, document.getElementById('root'));