add styles, delete comments

css/popup.css

@@ -9,6 +9,7 @@ body {
   padding: 3px;
   box-sizing: border-box;
   font: 14px/1.15 Helvetica, Arial, sans-serif;
+  clear: both;
 }
 
 .ext-list {
@@ -19,25 +20,35 @@ body {
 
 .ext-list__item {
   width: 100%;
-  padding: 3px;
+  padding: 4px 3px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
+  box-sizing: border-box;
+  color: #222;
 }
 
 .ext-list__item--active {
-  color: lightgreen;
+  color: #4F8A10;
 }
 
 .ext-list__icon {
   max-width: 16px;
   width: 100%;
   height: auto;
-  vertical-align: middle;
   border: 0;
+  float: left;
+  margin-right: 5px;
+  filter: grayscale(1);
+  transition: filter .3s;
 }
 
-.ext-note {
+.ext-list__item--active .ext-list__icon,
+.ext-list__item:hover .ext-list__icon {
+  filter: grayscale(0);
+}
 
+.ext-note {
+  padding: 10px;
 }

js/popup.js

@@ -1,17 +1,10 @@
 
 ; (function () {
 
-  /**
-   * Get all extensions and then start callback
-   */
   function getExtensions() {
     chrome.management.getAll(renderExtensions);
   }
 
-  /**
-   * Render the list of extensions
-   * @param {object} extensions - List of all available extensions
-   */
   function renderExtensions(extensions) {
     extensions = getFilteredExtensions(extensions) || [];
 
@@ -28,20 +21,10 @@
     app.appendChild(getExtensionsNodeList(extensions));
   }
 
-  /**
-   * Filter the extensions
-   * @param {array} extensions - List of all available extensions
-   * @returns {array} - Filtered array of extensions
-   */
   function getFilteredExtensions(extensions) {
     return extensions.filter((item) => item.type === 'extension');
   }
 
-  /**
-   * Build the DOM Nodes
-   * @param {array} extensions - Filtered array of extensions
-   * @returns {object} - DOM Nodes
-   */
   function getExtensionsNodeList(extensions) {
     let list = document.createElement('ul');
     list.className = 'ext-list';
@@ -69,10 +52,6 @@
     return list;
   }
 
-  /**
-   * Set the extension enable/disable
-   * @param {object} event - Mouse click event
-   */
   function toggleExtension(event) {
     const item = event.target;
 
@@ -86,10 +65,6 @@
     item.classList.toggle('ext-list__item--active');
   }
 
-  /**
-   * Show the note
-   * @param {string} text - Message text
-   */
   function showNote(text) {
     let note = document.createElement('div');
     note.className = 'ext-note';

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
 
   "name": "Simple extension manager",
-  "description": "This addon allows you to manage your extensions.",
+  "description": "Just allows you to on/off your extensions.",
   "version": "0.1",
 
   "icons": {