Refactored the project entirely. Removed having a separate chrome/ folder and deduplicated all files across chrome/ and src/. Configured webpack to have multiple entry points: one per separately executing Chrome extension script. Updated scripts and manifest.json to correctly reference the *.bundle.js files. Reorganized images under a res/img/ folder.

chrome/extension/background.js

@@ -1,22 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-// 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/main.js

@@ -1,64 +0,0 @@
-'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

@@ -1,15 +0,0 @@
-<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/manifest.json

@@ -1,36 +0,0 @@
-{
-    "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"
-    ],
-    "browser_action": {
-        "default_icon": {
-            "16": "img/icon16.png",
-            "24": "img/icon24.png",
-            "32": "img/icon32.png"
-        }
-    },
-    "icons": {
-        "16": "img/icon16.png",
-        "48": "img/icon48.png",
-        "128": "img/icon128.png"
-    }
-}

chrome/webpack.config.js

@@ -1,37 +0,0 @@
-// 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

@@ -17,18 +17,13 @@
     "babel-loader": "^8.0.2",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-loader": "^2.1.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1",
+    "html-webpack-plugin": "^3.2.0",
     "style-loader": "^0.23.0",
     "webpack": "^4.19.1",
-    "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.1.8"
+    "webpack-cli": "^3.1.1"
   },
   "scripts": {
-    "build:chrome": "webpack --config ./chrome/webpack.config.js --mode development"
+    "build": "webpack --config ./webpack.config.js --mode development"
   },
   "repository": {
     "type": "git",

src/components/Header.js

@@ -13,7 +13,6 @@ class Header extends Component {
     render() {
         return (
             <header className="Header">
-                <img src='./icon.png'></img>
                 <h1>Mezzurite Developer Tools</h1>
             </header>
         );

src/extension/background.js

@@ -15,7 +15,7 @@ function onInstalled() {
 
         if (message.action === "bg_mountContentScript") {
             chrome.tabs.executeScript(message.tabId, {
-                file: 'content.js'
+                file: 'content.bundle.js' // Relative path is apparently determined from the manifest.json's position
             });
         }
     });

src/extension/content.js

@@ -5,7 +5,7 @@
 'use strict';
 
 document.addEventListener('MezzuriteTiming_toExtension', onTimingEvent);
-injectScript('injected.js');
+injectScript('inject.bundle.js'); // Relative path is apparently determined from the manifest.json's position
 
 ////////////////////////////////
 

src/extension/devpanel/template.html

@@ -1,4 +1,3 @@
-<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
 <!DOCTYPE html>
 <html>
 
@@ -13,7 +12,6 @@
   <noscript>
     You need to enable JavaScript to run this app.
   </noscript>
-  <script src="dist/bundle.js"></script>
 </body>
 
 </html>

src/extension/main.js

@@ -16,7 +16,7 @@ const mezzuriteLoadCheckInterval = setInterval(
 function createPanel() {
     const title = "Mezzurite";
     const iconPath = null;
-    const pagePath = "panel.html";
+    const pagePath = "devpanel.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!");
     });

src/injected.js

@@ -1,29 +0,0 @@
-// 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);
-    });
-})();

src/main.html

@@ -1,13 +0,0 @@
-<!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>

src/manifest.json

@@ -6,10 +6,10 @@
     "version": "0.1.0",
     "minimum_chrome_version": "10.0",
     "background": {
-        "scripts": ["background.js"],
+        "scripts": ["background.bundle.js"],
         "persistent": false
     },
-    "devtools_page": "main.html",
+    "devtools_page": "devtools.html",
     "permissions": [
         "activeTab",
         "tabs",
@@ -19,6 +19,18 @@
     ],
     "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
     "web_accessible_resources": [
-        "injected.js"
-    ]
+        "inject.bundle.js"
+    ],
+    "browser_action": {
+        "default_icon": {
+            "16": "img/icon16.png",
+            "24": "img/icon24.png",
+            "32": "img/icon32.png"
+        }
+    },
+    "icons": {
+        "16": "img/icon16.png",
+        "48": "img/icon48.png",
+        "128": "img/icon128.png"
+    }
 }

src/panel.html

@@ -1,15 +0,0 @@
-<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>

src/panel.js

@@ -1,88 +0,0 @@
-'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
-    });
-}

webpack.config.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  context: __dirname,
+  entry: {
+    background: './src/extension/background.js',
+    devpanel: './src/index.js',
+    devtools: './src/extension/main.js',
+    content: './src/extension/content.js',
+    inject: './src/extension/injected.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/"),
+    filename: "[name].bundle.js"
+  },
+  plugins: [
+    new CopyWebpackPlugin([
+      { from: './src/manifest.json', to: 'manifest.json'},
+      { from: './res/img', to: 'img'}
+    ], {}),
+    new HtmlWebpackPlugin({
+      template: './src/extension/devpanel/template.html',
+      chunks: ['devpanel'],
+      filename: 'devpanel.html'
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['devtools'],
+      filename: 'devtools.html'
+    })
+  ]
+};