add promises

css/popup.css

@@ -1,14 +1,14 @@
 
 body {
   margin: 0;
+  font: 14px/1.15 Helvetica, Arial, sans-serif;
+  color: #222;
 }
 
 .ext-app {
-  width: 250px;
+  width: 210px;
   max-width: 100%;
-  padding: 3px;
   box-sizing: border-box;
-  font: 14px/1.15 Helvetica, Arial, sans-serif;
   clear: both;
 }
 
@@ -20,13 +20,12 @@ body {
 
 .ext-list__item {
   width: 100%;
-  padding: 4px 3px;
+  padding: 5px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
   box-sizing: border-box;
-  color: #222;
 }
 
 .ext-list__item--active {
@@ -41,7 +40,10 @@ body {
   float: left;
   margin-right: 5px;
   filter: grayscale(1);
-  transition: filter .3s;
+}
+
+.ext-list__item:hover {
+  background: rgba(0, 0, 0, .02);
 }
 
 .ext-list__item--active .ext-list__icon,

js/popup.js

@@ -1,18 +1,48 @@
 
 ; (function () {
 
+  let extensions = [];
+  let selfExtension = {};
+
+  function init() {
+    Promise.all([getExtensions(), getSelf()])
+      .catch(showNote)
+      .then(filterExtensions)
+      .then(renderExtensions)
+      .catch(() => {
+        showNote('Sorry, an error occurred');
+      });
+  }
+
   function getExtensions() {
-    chrome.management.getAll(renderExtensions);
+    return new Promise((resolve, reject) => {
+      chrome.management.getAll(result => {
+        if (result.length - 1 > 0) {
+          extensions = result;
+          resolve();
+        } else {
+          reject('You have no extensions yet');
+        }
+      });
+    });
   }
 
-  function renderExtensions(extensions) {
-    extensions = getFilteredExtensions(extensions) || [];
+  function getSelf() {
+    return new Promise(resolve => {
+      chrome.management.getSelf(response => {
+        selfExtension = response;
+        resolve();
+      });
+    });
+  }
 
-    if (!extensions.length) {
-      showNote('You have no extensions yet');
-      return;
-    }
+  function filterExtensions() {
+    extensions = extensions.filter(item => {
+      return item.type === 'extension' && item.id !== selfExtension.id
+    });
+  }
 
+  function renderExtensions() {
     const app = document.getElementById('ext-app');
 
     app.addEventListener('click', toggleExtension);
@@ -21,18 +51,14 @@
     app.appendChild(getExtensionsNodeList(extensions));
   }
 
-  function getFilteredExtensions(extensions) {
-    return extensions.filter((item) => item.type === 'extension');
-  }
-
   function getExtensionsNodeList(extensions) {
     let list = document.createElement('ul');
     list.className = 'ext-list';
 
     extensions.forEach((item) => {
       let listItem = document.createElement('li');
 
-      listItem.textContent = item.name;
+      listItem.textContent = item.shortName || item.name;
       listItem.dataset.id = item.id;
       listItem.className = 'ext-list__item';
 
@@ -73,6 +99,6 @@
     document.getElementById('ext-app').appendChild(note);
   }
 
-  document.addEventListener('DOMContentLoaded', getExtensions);
+  document.addEventListener('DOMContentLoaded', init);
 
 })();

manifest.json

@@ -2,6 +2,7 @@
   "manifest_version": 2,
 
   "name": "Simple extension manager",
+  "short_name": "Extension manager",
   "description": "Just allows you to on/off your extensions.",
   "version": "0.1",