Added options with blacklist and theme. Created a function for changing the extension icon color.

assets/js/components/MainList.react.js

@@ -7,11 +7,22 @@ class MainList extends React.Component
 
     }
 
+    _openOptionsPage()
+    {
+      if (chrome.runtime.openOptionsPage) {
+        // New way to open options pages, if supported (Chrome 42+).
+        chrome.runtime.openOptionsPage();
+      } else {
+        // Reasonable fallback.
+        window.open(chrome.runtime.getURL('options.html'));
+      }
+    }
+
     render()
     {
         return(
             <div className="list-group">
-                <a href="#" className="list-group-item">
+                <a href="#" className="list-group-item" onClick={this._openOptionsPage}>
                     Options
                 </a>
                 <a href="#" className="list-group-item">

assets/js/components/WakaTime.react.js

@@ -3,11 +3,22 @@ var React = require("react");
 var NavBar = require('./NavBar.react');
 var MainList = require('./MainList.react');
 
+var changeExtensionIcon = require('../helpers/changeExtensionIcon');
+
 class WakaTime extends React.Component
 {
     componentDidMount()
     {
-
+      chrome.storage.sync.get({
+        theme: 'light'
+      }, function(items) {
+        if(items.theme == 'light') {
+          changeExtensionIcon();
+        }
+        else {
+          changeExtensionIcon('white');
+        }
+      });
     }
 
     render()

assets/js/helpers/changeExtensionIcon.js

@@ -0,0 +1,34 @@
+/**
+ * It changes the extension icon color.
+ * Supported values are: 'red', 'white' and ''.
+ *
+ * @param  string color = ''
+ * @return null
+ */
+export default function changeExtensionIcon(color = '') {
+
+    var canvas = document.getElementById('icon');
+    var context = canvas.getContext('2d');
+
+    var x = 0;
+    var y = 0;
+    var width = 19;
+    var height = 19;
+    var imageObj = new Image();
+
+    imageObj.onload = function() {
+      context.drawImage(imageObj, x, y, width, height);
+
+      var imageData = context.getImageData(x, y, width, height);
+
+      chrome.browserAction.setIcon({
+          imageData: imageData
+      });
+    };
+
+    if(color !== ''){
+        color = '-' + color;
+    }
+
+    imageObj.src = 'graphics/wakatime-logo-48' + color + '.png';
+}

assets/js/options.js

@@ -0,0 +1,44 @@
+/* This is a fix for Bootstrap requiring jQuery */
+global.jQuery = require('jquery');
+require('bootstrap');
+
+// Saves options to chrome.storage.sync.
+function save_options(e) {
+  e.preventDefault();
+
+  var theme = document.getElementById('theme').value;
+  var blacklist = document.getElementById('blacklist').value;
+
+  chrome.storage.sync.set({
+    theme: theme,
+    blacklist: blacklist
+  }, function() {
+    // Update status to let user know options were saved.
+    var status = document.getElementById('status');
+    status.style.display = 'block';
+    status.innerHTML = '<strong>Well done!</strong> Options have been saved.';
+
+    //TODO: This is a nice place for fade in and fade out...
+    
+    setTimeout(function() {
+      status.textContent = '';
+      status.style.display = 'none';
+    }, 1500);
+  });
+}
+
+// Restores select box and checkbox state using the preferences
+// stored in chrome.storage.
+function restore_options() {
+  // Use default value color = 'red' and likesColor = true.
+  chrome.storage.sync.get({
+    theme: 'light',
+    blacklist: ''
+  }, function(items) {
+    document.getElementById('theme').value = items.theme;
+    document.getElementById('blacklist').value = items.blacklist;
+  });
+}
+
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('save').addEventListener('click', save_options);

assets/less/app.less

@@ -19,3 +19,11 @@ a.navbar-brand {
 div.container {
     margin-top: 20px;
 }
+
+canvas#icon {
+    display: none;
+}
+
+div#status {
+  display: none;
+}