Add linting and prop types

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true,
+    "webextensions": true
+  },
+  "extends": "semistandard-react",
+  "parser": "babel-eslint"
+}

package.json

@@ -9,26 +9,31 @@
     "normalize.css": "^8.0.1",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
-    "react-router-dom": "^4.3.1",
-    "typeface-roboto": "0.0.54"
+    "react-router-dom": "^4.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.0",
     "@babel/core": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.2",
     "clean-webpack-plugin": "^1.0.0",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.0",
+    "eslint": "^5.12.0",
+    "eslint-config-semistandard-react": "^4.2.0",
+    "eslint-plugin-semistandard-react": "^4.1.0",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "prop-types": "^15.6.2",
     "style-loader": "^0.23.0",
     "webpack": "^4.19.1",
     "webpack-cli": "^3.1.1"
   },
   "scripts": {
-    "build": "webpack --config ./webpack.config.js --mode development"
+    "build": "webpack --config ./webpack.config.js --mode development",
+    "lint": "eslint ./src"
   },
   "repository": {
     "type": "git",

src/background/index.js

@@ -7,16 +7,16 @@ chrome.runtime.onInstalled.addListener(onInstalled);
  * 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. 
+ * content script onto the inspected page.
  */
-function onInstalled() {
-    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-        console.log(`BG: Got a message! ${message}, ${sender}, ${sendResponse}`);
+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: 'content.bundle.js' // Relative path is apparently determined from the manifest.json's position
-            });
-        }
-    });
+    if (message.action === 'bg_mountContentScript') {
+      chrome.tabs.executeScript(message.tabId, {
+        file: 'content.bundle.js' // Relative path is apparently determined from the manifest.json's position
+      });
+    }
+  });
 }

src/devpanel/components/App.js

@@ -3,27 +3,26 @@ import './App.css';
 
 import Header from './Header/Header.js';
 import Main from './Main/Main.js';
-import Footer from './Footer/Footer.js'
+import Footer from './Footer/Footer.js';
 
 class App extends Component {
+  componentDidMount () {
 
-    componentDidMount() {
-        
-    }
+  }
 
-    componentWillUnMount() {
+  componentWillUnMount () {
 
-    }
+  }
 
-    render() {
-        return (
-            <div className="App">
-                <Header />
-                <Main />
-                <Footer />
-            </div>
-        );
-    }
+  render () {
+    return (
+      <div className='App'>
+        <Header />
+        <Main />
+        <Footer />
+      </div>
+    );
+  }
 }
 
 export default App;

src/devpanel/components/Container.js

@@ -1,13 +1,19 @@
 import React from 'react';
+import { node, string } from 'prop-types';
 import './Container.css';
 
 const MezzuriteDetails = (props) => (
-    <div className="Container">
-        { props.title && 
-            <p className="title">{props.title}</p>
-        }
-        {props.children}
-    </div>
+  <div className='Container'>
+    { props.title &&
+    <p className='title'>{props.title}</p>
+    }
+    {props.children}
+  </div>
 );
 
-export default MezzuriteDetails;
+MezzuriteDetails.propTypes = {
+  children: node,
+  title: string
+};
+
+export default MezzuriteDetails;

src/devpanel/components/Footer/Footer.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import './Footer.css'
+import './Footer.css';
 
-import githubLogo from './GitHub-Mark-Light-32px.png'
+import githubLogo from './GitHub-Mark-Light-32px.png';
 
 const Footer = () => (
-    <footer className="Footer">
-        <a href="https://github.com/Microsoft/Mezzurite-DevTools" target="_blank">
-            <img id="gh-logo" src={githubLogo} />
-        </a>
-        <span>Visit us on GitHub! ~ The Mezzurite Development Team</span>
-    </footer>
+  <footer className='Footer'>
+    <a href='https://github.com/Microsoft/Mezzurite-DevTools' target='_blank'>
+      <img id='gh-logo' src={githubLogo} />
+    </a>
+    <span>Visit us on GitHub! ~ The Mezzurite Development Team</span>
+  </footer>
 );
 
-export default Footer;
+export default Footer;

src/devpanel/components/Header/Header.js

@@ -1,23 +1,22 @@
 import React, { Component } from 'react';
-import './Header.css'
+import './Header.css';
 
 class Header extends Component {
+  componentDidMount () {
 
-    componentDidMount() {
-        
-    }
+  }
 
-    componentWillUnMount() {
+  componentWillUnMount () {
 
-    }
+  }
 
-    render() {
-        return (
-            <header className="Header">
-                <h1>Mezzurite Developer Tools</h1>
-            </header>
-        );
-    }
+  render () {
+    return (
+      <header className='Header'>
+        <h1>Mezzurite Developer Tools</h1>
+      </header>
+    );
+  }
 }
 
-export default Header;
+export default Header;

src/devpanel/components/Main/Main.js

@@ -1,24 +1,23 @@
 import React, { Component } from 'react';
-import './Main.css'
+import './Main.css';
 import MezzuriteInfo from '../MezzuriteInfo/MezzuriteInfo.js';
 
 class Main extends Component {
+  componentDidMount () {
 
-    componentDidMount() {
-        
-    }
+  }
 
-    componentWillUnMount() {
+  componentWillUnMount () {
 
-    }
+  }
 
-    render() {
-        return (
-            <main className="Main">
-                <MezzuriteInfo />
-            </main>
-        );
-    }
+  render () {
+    return (
+      <main className='Main'>
+        <MezzuriteInfo />
+      </main>
+    );
+  }
 }
 
-export default Main;
+export default Main;

src/devpanel/components/MezzuriteInfo/MezzuriteDetails.js

@@ -1,16 +1,22 @@
 import React from 'react';
-import './MezzuriteDetails.css'
+import { string } from 'prop-types';
+import './MezzuriteDetails.css';
 import Container from '../Container.js';
 
 const MezzuriteDetails = (props) => (
-    <Container title="Mezzurite Framework Details">
-        <div id="mezzurite-package">
-            <span>Mezzurite Package Name: </span>{props.mezzuritePackage}
-        </div>
-        <div id="mezzurite-version">
-            <span>Mezzurite Package Version: </span>{props.mezzuriteVersion}
-        </div>
-    </Container>
+  <Container title='Mezzurite Framework Details'>
+    <div id='mezzurite-package'>
+      <span>Mezzurite Package Name: </span>{props.mezzuritePackage}
+    </div>
+    <div id='mezzurite-version'>
+      <span>Mezzurite Package Version: </span>{props.mezzuriteVersion}
+    </div>
+  </Container>
 );
 
-export default MezzuriteDetails;
+MezzuriteDetails.propTypes = {
+  mezzuritePackage: string,
+  mezzuriteVersion: string
+};
+
+export default MezzuriteDetails;

src/devpanel/components/MezzuriteInfo/MezzuriteInfo.js

@@ -4,60 +4,60 @@ import MezzuriteTimings from './MezzuriteTimings.js';
 import MezzuriteInspector from '../../services/MezzuriteInspector.js';
 
 class MezzuriteInfo extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            mezzuriteFoundMessage: "",
-            mezzuritePackage: "",
-            mezzuriteVersion: "",
-            timings: []
-        };
-    }
+  constructor (props) {
+    super(props);
+    this.state = {
+      mezzuriteFoundMessage: '',
+      mezzuritePackage: '',
+      mezzuriteVersion: '',
+      timings: []
+    };
+  }
 
-    componentDidMount() {
-        MezzuriteInspector.getMezzuriteObjectAsync().then(value => {
-            const strNotFound = "Mezzurite has not been detected on this page";
-            const strFound = "Mezzurite has been detected on this page";
+  componentDidMount () {
+    MezzuriteInspector.getMezzuriteObjectAsync().then(value => {
+      const strNotFound = 'Mezzurite has not been detected on this page';
+      const strFound = 'Mezzurite has been detected on this page';
 
-            if (value === undefined) {
-                this.setState({ mezzuriteFoundMessage: strNotFound });
-            } else {
-                this.setState({ mezzuriteFoundMessage: strFound });
-            }
+      if (value === undefined) {
+        this.setState({ mezzuriteFoundMessage: strNotFound });
+      } else {
+        this.setState({ mezzuriteFoundMessage: strFound });
+      }
 
-            MezzuriteInspector.listenForTimingEvents(event => {
-                this.setState({ 
-                    mezzuritePackage: event.Framework.name,
-                    mezzuriteVersion: event.Framework.version
-                });
-
-                this.setState({
-                    timings: [...this.state.timings, ...event.Timings]
-                });
-            });
-
-            // Tell the background page to programmatically inject the content script.
-            MezzuriteInspector.tellBackgroundToMountContentScript();
+      MezzuriteInspector.listenForTimingEvents(event => {
+        this.setState({
+          mezzuritePackage: event.Framework.name,
+          mezzuriteVersion: event.Framework.version
         });
-    }
 
-    componentWillUnMount() {
+        this.setState({
+          timings: [...this.state.timings, ...event.Timings]
+        });
+      });
 
-    }
+      // Tell the background page to programmatically inject the content script.
+      MezzuriteInspector.tellBackgroundToMountContentScript();
+    });
+  }
 
-    render() {
-        return (
-            <div className="MezzuriteInfo">
-                <MezzuriteDetails
-                    mezzuritePackage={this.state.mezzuritePackage}
-                    mezzuriteVersion={this.state.mezzuriteVersion}
-                />
-                <MezzuriteTimings 
-                    timings={this.state.timings}
-                />
-            </div>
-        );
-    }
+  componentWillUnMount () {
+
+  }
+
+  render () {
+    return (
+      <div className='MezzuriteInfo'>
+        <MezzuriteDetails
+          mezzuritePackage={this.state.mezzuritePackage}
+          mezzuriteVersion={this.state.mezzuriteVersion}
+        />
+        <MezzuriteTimings
+          timings={this.state.timings}
+        />
+      </div>
+    );
+  }
 }
 
-export default MezzuriteInfo;
+export default MezzuriteInfo;

src/devpanel/components/MezzuriteInfo/MezzuriteTimings.js

@@ -1,18 +1,27 @@
 import React from 'react';
+import { arrayOf, number, objectOf, string } from 'prop-types';
 import Container from '../Container.js';
 
 const MezzuriteTimings = (props) => {
-    const timingItems = props.timings.map(timing => 
-        <li>{timing.metricType + ", " + timing.value + ", " + timing.data}</li>
-    );
+  const timingItems = props.timings.map(timing =>
+    <li>{timing.metricType + ', ' + timing.value + ', ' + timing.data}</li>
+  );
 
-    return (
-        <Container title="Mezzurite Timings">
-            <ul id="mezzurite-timings-list">
-                {timingItems}
-            </ul>
-        </Container>
-    )
+  return (
+    <Container title='Mezzurite Timings'>
+      <ul id='mezzurite-timings-list'>
+        {timingItems}
+      </ul>
+    </Container>
+  );
 };
 
-export default MezzuriteTimings;
+MezzuriteTimings.propTypes = {
+  timings: arrayOf(objectOf({
+    data: string,
+    metricType: string,
+    value: number
+  }))
+};
+
+export default MezzuriteTimings;

src/devpanel/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MemoryRouter } from 'react-router-dom';
 
 import 'normalize.css';
 import './index.css';
@@ -10,8 +9,8 @@ import App from './components/App.js';
 // The only reason for using React Router DOM is to have ALT for the chrome extension
 // MemoryRouter is used because this is not a traditional browser environment
 ReactDOM.render((
-    // <MemoryRouter>
-        <App />
-    // </MemoryRouter>
-    ),document.getElementById('root')
+  // <MemoryRouter>
+  <App />
+// </MemoryRouter>
+), document.getElementById('root')
 );

src/devpanel/services/MezzuriteInspector.js

@@ -1,72 +1,42 @@
-/**
- * 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);
-}
-
-function getMezzuriteObjectAsync() {
-    const expression = `window.mezzurite`;
-    return new Promise(function(resolve, reject) {
-        chrome.devtools.inspectedWindow.eval(expression, (result, exceptionInfo) => {
-            if (exceptionInfo.isException === true) {
-                reject(Error(exceptionInfo));
-            } else {
-                resolve(result); // Return the object, which can be undefined. Let caller handle it.
-            }
-        });
-    });
-}
-
 class MezzuriteInspector {
-    static getMezzuriteObjectAsync() {
-        const expression = `window.mezzurite`;
-        return new Promise(function(resolve, reject) {
-            chrome.devtools.inspectedWindow.eval(expression, (result, exceptionInfo) => {
-                if (exceptionInfo !== undefined) {
-                    reject(Error(exceptionInfo));
-                } else {
-                    resolve(result); // Return the object, which can be undefined. Let caller handle it.
-                }
-            });
-        });
-    }
+  static getMezzuriteObjectAsync () {
+    const expression = `window.mezzurite`;
+    return new Promise(function (resolve, reject) {
+      chrome.devtools.inspectedWindow.eval(expression, (result, exceptionInfo) => {
+        if (exceptionInfo !== undefined) {
+          reject(Error(exceptionInfo));
+        } else {
+          resolve(result); // Return the object, which can be undefined. Let caller handle it.
+        }
+      });
+    });
+  }
 
-    /**
+  /**
      * Set up an event listener to grab Mezzurite timing events forwarded
      * by the content script and execute a callback method.
      */
-    static listenForTimingEvents(callback) {
-        chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-            console.log(`DT: Got a message! ${message}, ${sender}, ${sendResponse}`);
+  static listenForTimingEvents (callback) {
+    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+      console.log(`DT: Got a message! ${message}, ${sender}, ${sendResponse}`);
 
-            if (message.action === "timing") {
-                callback(message.payload);
-            }
-        });
-    }
+      if (message.action === 'timing') {
+        callback(message.payload);
+      }
+    });
+  }
 
-    /**
+  /**
      * Send a Chrome runtime message to the background script
      * to instruct it to mount the content script into the
      * inspected page.
      */
-    static tellBackgroundToMountContentScript() {
-        chrome.runtime.sendMessage({
-            action: "bg_mountContentScript",
-            tabId: chrome.devtools.inspectedWindow.tabId
-        });
-    }
+  static tellBackgroundToMountContentScript () {
+    chrome.runtime.sendMessage({
+      action: 'bg_mountContentScript',
+      tabId: chrome.devtools.inspectedWindow.tabId
+    });
+  }
 }
 
-export default MezzuriteInspector;
+export default MezzuriteInspector;

src/devtools/index.js

@@ -5,21 +5,21 @@ let isPanelCreated = false;
 // Check if Mezzurite has loaded every second
 const intervalMs = 1000;
 const mezzuriteLoadCheckInterval = setInterval(
-    createPanelIfMezzuriteLoaded, 
-    intervalMs);
+  createPanelIfMezzuriteLoaded,
+  intervalMs);
 
-////////////////////////////////
+/// /////////////////////////////
 
 /**
  * Creates the Mezzurite panel in the Chrome Developer Tools page.
  */
-function createPanel() {
-    const title = "Mezzurite";
-    const iconPath = null;
-    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!");
-    });
+function createPanel () {
+  const title = 'Mezzurite';
+  const iconPath = null;
+  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!');
+  });
 }
 
 /**
@@ -34,31 +34,31 @@ function createPanel() {
  * 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);
+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;
+function createPanelIfMezzuriteLoaded () {
+  if (isPanelCreated) {
+    return;
+  }
+
+  getMezzuriteObject((result, exceptionInfo) => {
+    if (result === undefined) {
+      return; // Mezzurite not found
     }
 
-    getMezzuriteObject((result, exceptionInfo) => {
-        if (result === undefined) {
-            return; // Mezzurite not found
-        }
+    console.log('Mezzurite was found!');
 
-        console.log("Mezzurite was found!");
+    // Stop checking for Mezzurite every second, as we have found it.
+    clearInterval(mezzuriteLoadCheckInterval);
+    isPanelCreated = true;
 
-        // Stop checking for Mezzurite every second, as we have found it.
-        clearInterval(mezzuriteLoadCheckInterval);
-        isPanelCreated = true;
-
-        createPanel();
-    });
+    createPanel();
+  });
 }

src/inject/content.js

@@ -1,13 +1,13 @@
 // 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 
+// like window. That is isolated. This is why we inject the
 // additional script
 'use strict';
 
 document.addEventListener('MezzuriteTiming_toExtension', onTimingEvent);
 injectScript('inject.bundle.js'); // Relative path is apparently determined from the manifest.json's position
 
-////////////////////////////////
+/// /////////////////////////////
 
 /**
  * The event listener callback that listens for forwarded Mezzurite
@@ -15,14 +15,14 @@ injectScript('inject.bundle.js'); // Relative path is apparently determined from
  * @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
-    });
+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
+  });
 }
 
 /**
@@ -30,10 +30,10 @@ function onTimingEvent(timingEvent) {
  * 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);
+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);
 }

src/inject/injected.js

@@ -2,28 +2,28 @@
 // as a <script> tag with full access to the DOM and window objects.
 
 (function () {
-    'use strict';
+  '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
-        });
+  // 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('');
+  }
 
-        // 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);
+  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);
+  });
 })();

webpack.config.js

@@ -12,18 +12,18 @@ module.exports = {
     content: './src/inject/content.js',
     inject: './src/inject/injected.js'
   },
-  mode: "development",
+  mode: 'development',
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /(node_modules|bower_components)/,
-        loader: "babel-loader",
-        options: { presets: ["@babel/env"] }
+        loader: 'babel-loader',
+        options: { presets: ['@babel/env'] }
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"]
+        use: ['style-loader', 'css-loader']
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
@@ -31,16 +31,16 @@ module.exports = {
       }
     ]
   },
-  resolve: { extensions: ["*", ".js", ".jsx"] },
+  resolve: { extensions: ['*', '.js', '.jsx'] },
   output: {
-    path: path.resolve(__dirname, "dist/"),
-    filename: "[name].bundle.js"
+    path: path.resolve(__dirname, 'dist/'),
+    filename: '[name].bundle.js'
   },
   plugins: [
     new CleanWebpackPlugin(['dist']),
     new CopyWebpackPlugin([
-      { from: './src/manifest.json', to: 'manifest.json'},
-      { from: './res/img', to: 'img'}
+      { from: './src/manifest.json', to: 'manifest.json' },
+      { from: './res/img', to: 'img' }
     ], {}),
     new HtmlWebpackPlugin({
       template: './src/devpanel/template.html',
@@ -52,4 +52,4 @@ module.exports = {
       filename: 'devtools.html'
     })
   ]
-};
+};