Update webpack config

- write bundle to `/build`
- add support for SASS
- improve options view as a proof o concept for styling

.gitignore

@@ -1 +1,2 @@
-node_modules/*
+node_modules/
+build/

background.js

@@ -1,159 +0,0 @@
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = "./src/js/background.js");
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ "./src/js/background.js":
-/*!******************************!*\
-  !*** ./src/js/background.js ***!
-  \******************************/
-/*! no exports provided */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _services_DomainCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./services/DomainCheck */ "./src/js/services/DomainCheck.js");
-
-chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
-  // inject files only after the page is fully loaded
-  if (changeInfo.status != 'complete') return; // inject files only for supported websites
-
-  var domainCheck = new _services_DomainCheck__WEBPACK_IMPORTED_MODULE_0__["default"](tab.url);
-  if (!domainCheck.hasMatch) return; // inject css + js
-
-  chrome.tabs.insertCSS(tabId, {
-    file: "/styles.css"
-  }, function () {
-    chrome.tabs.executeScript(tabId, {
-      file: "/bubble.js"
-    }, function () {
-      // chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
-      console.log("injected bubble.js"); // })
-    });
-  });
-});
-
-/***/ }),
-
-/***/ "./src/js/services/DomainCheck.js":
-/*!****************************************!*\
-  !*** ./src/js/services/DomainCheck.js ***!
-  \****************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-var DomainCheck =
-/*#__PURE__*/
-function () {
-  function DomainCheck(url) {
-    _classCallCheck(this, DomainCheck);
-
-    this.url = url;
-  }
-
-  _createClass(DomainCheck, [{
-    key: "hasMatch",
-    get: function get() {
-      return this.url.match(/github/) || this.url.match(/trello/) || this.url.match(/mocoapp/);
-    }
-  }]);
-
-  return DomainCheck;
-}();
-
-/* harmony default export */ __webpack_exports__["default"] = (DomainCheck);
-
-/***/ })
-
-/******/ });

options.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset='utf-8'>
-</head>
-<body>
-  <div id="moco-bx-container"></div>
-  <script src="options.js"></script>
-</body>
-</html>

package.json

@@ -4,29 +4,41 @@
   "version": "0.9.20",
   "main": "bundle.js",
   "scripts": {
-    "webpack": "webpack --mode=development",
+    "start": "node_modules/.bin/webpack --watch",
     "release": "copyfiles main.css main.min.js background.min.js manifest.json popup.html options.html node_modules/jquery/dist/jquery.min.js node_modules/select2/select2.js src/images/* release"
   },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "mobx": "^5.5.0",
+    "mobx-react": "^5.2.8",
+    "prop-types": "^15.6.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "route-parser": "^0.0.5"
+  },
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-proposal-decorators": "^7.1.2",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "axios": "^0.18.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
     "babel-plugin-module-resolver": "^3.1.1",
+    "clean-webpack-plugin": "^1.0.1",
+    "copy-webpack-plugin": "^4.6.0",
     "copyfiles": "^2.1.0",
+    "css-loader": "^2.1.0",
     "eslint": "^5.7.0",
     "eslint-plugin-jest": "^21.25.0",
     "eslint-plugin-react": "^7.11.1",
-    "mobx": "^5.5.0",
+    "file-loader": "^3.0.1",
-    "mobx-react": "^5.2.8",
+    "html-webpack-plugin": "^3.2.0",
-    "prop-types": "^15.6.2",
+    "node-sass": "^4.11.0",
-    "react": "^16.5.2",
+    "sass-loader": "^7.1.0",
-    "react-dom": "^16.5.2",
+    "style-loader": "^0.23.1",
     "webpack": "^4.15.0",
-    "webpack-cli": "^3.0.8"
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.14"
   }
 }

popup.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset='utf-8'>
-</head>
-<body>
-  <div id="moco-bx-container"></div>
-  <script src="popup.js"></script>
-</body>
-</html>

src/css/_form.scss

@@ -0,0 +1,63 @@
+#moco-bx-container {
+  .form-group {
+    width: 100%;
+    margin: 1rem 0;
+
+    label {
+      display: block;
+      font-weight: bold;
+      margin-bottom: 0.25rem;
+    }
+
+    input {
+      padding: 0.5rem 0.75rem;
+      width: 100%;
+    }
+
+    text-muted {
+      color: #eee;
+    }
+
+    .input-group {
+      position: relative;
+      display: table;
+      border-collapse: separate;
+
+      input {
+        position: relative;
+        display: table-cell;
+      }
+
+      .input-group-addon {
+        padding: 0.5rem 0.75rem;
+        font-weight: normal;
+        color: #555555;
+        text-align: center;
+        background-color: #eeeeee;
+        border: 1px solid #cccccc;
+        border-left: none;
+        display: table-cell;
+        width: 1%;
+      }
+    }
+  }
+
+  button {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    color: white;
+    background-image: none;
+    background-color: #7dc332;
+    border-color: #7dc332;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #639a28;
+      border-color: #639a28;
+    }
+  }
+}

src/css/_mixins.scss

@@ -0,0 +1,63 @@
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: (
+    $spacer * 0.25
+  ),
+  2: (
+    $spacer * 0.5
+  ),
+  3: $spacer,
+  4: (
+    $spacer * 1.5
+  ),
+  5: (
+    $spacer * 3
+  )
+);
+
+@each $prop, $abbrev in (margin: m, padding: p) {
+  @each $size, $length in $spacers {
+    .#{$abbrev}-#{$size} {
+      #{$prop}: $length !important;
+    }
+    .#{$abbrev}t-#{$size},
+    .#{$abbrev}y-#{$size} {
+      #{$prop}-top: $length !important;
+    }
+    .#{$abbrev}r-#{$size},
+    .#{$abbrev}x-#{$size} {
+      #{$prop}-right: $length !important;
+    }
+    .#{$abbrev}b-#{$size},
+    .#{$abbrev}y-#{$size} {
+      #{$prop}-bottom: $length !important;
+    }
+    .#{$abbrev}l-#{$size},
+    .#{$abbrev}x-#{$size} {
+      #{$prop}-left: $length !important;
+    }
+  }
+}
+
+@each $size, $length in $spacers {
+  .m-auto {
+    margin: auto !important;
+  }
+  .mt-auto,
+  .my-auto {
+    margin-top: auto !important;
+  }
+  .mr-auto,
+  .mx-auto {
+    margin-right: auto !important;
+  }
+  .mb-auto,
+  .my-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-auto,
+  .mx-auto {
+    margin-left: auto !important;
+  }
+}

src/css/main.scss

@@ -0,0 +1,45 @@
+@import "mixins";
+@import "form";
+
+#moco-bx-bubble {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  margin-left: -30px;
+  z-index: 1000;
+
+  height: 60px;
+  width: 60px;
+  background-color: white;
+  border-radius: 50%;
+  box-shadow: -1px -1px 15px 4px rgba(0, 0, 0, 0.05),
+    2px 2px 15px 4px rgba(0, 0, 0, 0.05);
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  cursor: pointer;
+}
+
+#moco-bx-container {
+  .moco-bx-modal {
+    position: fixed; /* Stay in place */
+    z-index: 2000; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0, 0, 0); /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+  }
+
+  .moco-bx-modal-content {
+    background-color: white;
+    width: 600px;
+    padding: 40px;
+    margin: 0 auto;
+  }
+}

src/js/background.js

@@ -1,19 +1,16 @@
-import DomainCheck from './services/DomainCheck'
+import DomainCheck from "./services/DomainCheck";
 
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   // inject files only after the page is fully loaded
-  if (changeInfo.status != 'complete') return
+  if (changeInfo.status != "complete") return;
 
   // inject files only for supported websites
-  const domainCheck = new DomainCheck(tab.url)
+  const domainCheck = new DomainCheck(tab.url);
-  if (!domainCheck.hasMatch) return
+  if (!domainCheck.hasMatch) return;
 
-  // inject css + js
+  chrome.tabs.executeScript(tabId, { file: "/bubble.js" }, () => {
-  chrome.tabs.insertCSS(tabId, {file: "/styles.css"}, () => {
+    // chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
-    chrome.tabs.executeScript(tabId, {file: "/bubble.js"}, () => {
+    console.log("injected bubble.js");
-      // chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
+    // })
-        console.log("injected bubble.js")
+  });
-      // })
+});
-    })
-  })
-})

src/js/bubble.js

@@ -1,16 +1,17 @@
-import { createElement } from 'react'
+import { createElement } from "react";
-import ReactDOM from 'react-dom'
+import ReactDOM from "react-dom";
-import Bubble from './components/Bubble'
+import Bubble from "./components/Bubble";
+import "../css/main.scss";
 
 // don't initiate bubble twice
-if (!document.querySelector('#moco-bx-container')) {
+if (!document.querySelector("#moco-bx-container")) {
-  const domContainer = document.createElement('div')
+  const domContainer = document.createElement("div");
-  domContainer.setAttribute('id', 'moco-bx-container')
+  domContainer.setAttribute("id", "moco-bx-container");
-  document.body.appendChild(domContainer)
+  document.body.appendChild(domContainer);
 
-  const domBubble = document.createElement('div')
+  const domBubble = document.createElement("div");
-  domBubble.setAttribute('id', 'moco-bx-bubble')
+  domBubble.setAttribute("id", "moco-bx-bubble");
-  document.body.appendChild(domBubble)
+  document.body.appendChild(domBubble);
 
-  ReactDOM.render(createElement(Bubble), domBubble)
+  ReactDOM.render(createElement(Bubble), domBubble);
 }

src/js/components/Bubble.js

@@ -1,43 +1,44 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from "react";
-import Modal, { Content } from 'components/Modal'
+import Modal, { Content } from "components/Modal";
-import Form from 'components/Form'
+import Form from "components/Form";
-import { observable } from 'mobx'
+import { observable } from "mobx";
-import { observer } from 'mobx-react'
+import { observer } from "mobx-react";
+import logoUrl from "../../images/logo.png";
 
 @observer
 class Bubble extends Component {
-  @observable open = false
+  @observable open = false;
 
-  onOpen = (_e) => {
+  onOpen = _e => {
-    this.open = true
+    this.open = true;
-  }
+  };
 
-  onClose = (_e) => {
+  onClose = _e => {
-    this.open = false
+    this.open = false;
-  }
+  };
 
   // RENDER -------------------------------------------------------------------
 
   render() {
     return (
-      <Fragment>
+      <>
         <img
           onClick={this.onOpen}
-          src={chrome.extension.getURL('src/images/logo.png')}
+          src={chrome.extension.getURL(logoUrl)}
           width="50%"
         />
 
-        {this.open &&
+        {this.open && (
           <Modal>
             <Content>
               <Form />
               <button onClick={this.onClose}>Close</button>
             </Content>
           </Modal>
-        }
+        )}
-      </Fragment>
+      </>
-    )
+    );
   }
 }
 
-export default Bubble
+export default Bubble;

src/js/components/Setup.js

@@ -1,57 +1,74 @@
-import React, { Component } from 'react'
+import React, { Component } from "react";
-import { observable } from 'mobx'
+import { observable } from "mobx";
-import { observer } from 'mobx-react'
+import { observer } from "mobx-react";
 
 @observer
 class Setup extends Component {
-  @observable loading = true
+  @observable loading = true;
-  @observable subdomain = ""
+  @observable subdomain = "";
-  @observable apiKey = ""
+  @observable apiKey = "";
 
   componentDidMount() {
-    chrome.storage.sync.get(null, (store) => {
+    chrome.storage.sync.get(null, store => {
-      this.loading = false
+      this.loading = false;
-      this.subdomain = store.subdomain || ""
+      this.subdomain = store.subdomain || "";
-      this.apiKey = store.api_key || ""
+      this.apiKey = store.api_key || "";
-    })
+    });
   }
 
   // EVENTS
 
-  onChange = (e) => {
+  onChange = event => {
-    this[e.target.name] = e.target.value
+    this[event.target.name] = event.target.value;
-  }
+  };
 
-  onSubmit = (_e) => {
+  onSubmit = _event => {
-    chrome.storage.sync.set({
+    chrome.storage.sync.set(
-      subdomain: this.subdomain.trim(),
+      {
-      api_key: this.apiKey.trim(),
+        subdomain: this.subdomain.trim(),
-    }, () => window.close())
+        api_key: this.apiKey.trim()
-  }
+      },
+      () => window.close()
+    );
+  };
 
   // RENDER -------------------------------------------------------------------
 
   render() {
-    if (this.loading) return null
+    if (this.loading) return null;
 
     return (
       <form onSubmit={this.onSubmit}>
-        <input
+        <h2>Einstellungen</h2>
-          type="text"
+        <div className="form-group">
-          name="subdomain"
+          <label>Internetadresse</label>
-          value={this.subdomain}
+          <div className="input-group">
-          onChange={this.onChange}
+            <input
-        />
+              type="text"
-        <input
+              name="subdomain"
-          type="text"
+              value={this.subdomain}
-          name="apiKey"
+              onChange={this.onChange}
-          value={this.apiKey}
+            />
-          onChange={this.onChange}
+            <span className="input-group-addon">.mocoapp.com</span>
-        />
+          </div>
+        </div>
+        <div className="form-group">
+          <label>API Key</label>
+          <input
+            type="text"
+            name="apiKey"
+            value={this.apiKey}
+            onChange={this.onChange}
+          />
+          <div className="text-muted mt-1">
+            Deinen API-Schlüssel findest du in der MOCO-App unter
+            Profil/Integrationen.
+          </div>
+        </div>
         <button>Save</button>
       </form>
-    )
+    );
   }
 }
 
-export default Setup
+export default Setup;

src/js/options.js

@@ -1,6 +1,7 @@
-import { createElement } from 'react'
+import { createElement } from "react";
-import ReactDOM from 'react-dom'
+import ReactDOM from "react-dom";
-import Setup from './components/Setup'
+import Setup from "./components/Setup";
+import "../css/main.scss";
 
-const domContainer = document.querySelector('#moco-bx-container')
+const domContainer = document.querySelector("#moco-bx-container");
-ReactDOM.render(createElement(Setup), domContainer)
+ReactDOM.render(createElement(Setup), domContainer);

src/manifest.json

@@ -4,10 +4,12 @@
   "description": "MOCO Zeiterfassung Plugin",
   "version": "0.9.20",
   "manifest_version": 2,
-  "description" : "MOCO Time Tracking Plugin",
+  "description": "MOCO Time Tracking Plugin",
-  "icons": { "16": "src/images/logo.png",
+  "icons": {
-             "48": "src/images/logo.png",
+    "16": "src/images/logo.png",
-            "128": "src/images/logo.png" },
+    "48": "src/images/logo.png",
+    "128": "src/images/logo.png"
+  },
   "options_ui": {
     "page": "options.html",
     "chrome_style": true
@@ -19,24 +21,16 @@
     "tabs",
     "https://*/"
   ],
-  "optional_permissions": [
+  "optional_permissions": ["*://*/"],
-    "*://*/"
-  ],
   "background": {
-    "scripts": [
+    "scripts": ["background.js"]
-      // "node_modules/jquery/dist/jquery.min.js",
-      // "node_modules/select2/select2.js",
-      "background.js"
-    ]
   },
   "browser_action": {
     "default_icon": "src/images/logo.png",
     "default_title": "MOCO Time Tracking",
     "default_popup": "popup.html"
   },
-  "web_accessible_resources": [
+  "web_accessible_resources": ["src/images/*"],
-    "src/images/*"
-  ],
   "commands": {
     "_execute_browser_action": {
       "suggested_key": {

src/options.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="moco-bx-container"></div>
+  </body>
+</html>

src/popup.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="moco-bx-container"></div>
+  </body>
+</html>

styles.css

@@ -1,39 +0,0 @@
-#moco-bx-bubble {
-  position: fixed;
-  bottom: 40px;
-  left: 50%;
-  margin-left: -30px;
-  z-index: 1000;
-
-  height: 60px;
-  width: 60px;
-  background-color: white;
-  border-radius: 50%;
-  box-shadow: -1px -1px 15px 4px rgba(0,0,0,0.05), 2px 2px 15px 4px rgba(0,0,0,0.05);
-
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  cursor: pointer;
-}
-
-#moco-bx-container .moco-bx-modal {
-  position: fixed; /* Stay in place */
-  z-index: 2000; /* Sit on top */
-  padding-top: 100px; /* Location of the box */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-}
-
-#moco-bx-container .moco-bx-modal-content {
-  background-color: white;
-  width: 600px;
-  padding: 40px;
-  margin: 0 auto;
-}

webpack.config.js

@@ -1,29 +1,83 @@
-const path = require('path')
+const path = require("path");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
   entry: {
-    background: './src/js/background.js',
+    background: "./src/js/background.js",
-    bubble: './src/js/bubble.js',
+    bubble: "./src/js/bubble.js",
-    options: './src/js/options.js',
+    options: "./src/js/options.js",
-    popup: './src/js/popup.js',
+    popup: "./src/js/popup.js"
+  },
+  output: {
+    path: path.join(__dirname, "build"),
+    filename: "[name].js"
   },
   module: {
     rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              includePaths: [path.join(__dirname, "src/css")]
+            }
+          }
+        ],
+        exclude: /node_modules/
+      },
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
           loader: "babel-loader"
         }
+      },
+      {
+        test: /\.(png)$/,
+        loader: "file-loader",
+        options: {
+          name: "[path][name].[ext]"
+        },
+        exclude: /node_modules/
       }
     ]
   },
-  output: {
+  plugins: [
-    path: path.resolve(__dirname),
+    new CleanWebpackPlugin(["build"]),
-    filename: '[name].js',
+    new CopyWebpackPlugin([
-  },
+      {
+        from: "src/manifest.json",
+        transform: function(content, _path) {
+          // generates the manifest file using the package.json informations
+          return Buffer.from(
+            JSON.stringify({
+              description: process.env.npm_package_description,
+              version: process.env.npm_package_version,
+              ...JSON.parse(content.toString())
+            })
+          );
+        }
+      }
+    ]),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "src", "popup.html"),
+      filename: "popup.html",
+      chunks: ["popup"]
+    }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "src", "options.html"),
+      filename: "options.html",
+      chunks: ["options"]
+    })
+  ],
   // webpack creates sourcemaps by default and evals js code
   // this is not allowed by chrome extensions
   // https://stackoverflow.com/a/49100966
-  devtool: 'none'
+  devtool: "none",
-}
+  mode: process.env.NODE_ENV || "development"
+};