show extensions in popup

mdmen · Feb 9, 2018 · 8d2d612 · 8d2d612
1 parent fb61331
commit 8d2d612
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 2 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -1 +1,30 @@
 
+body {
+  margin: 0;
+}
+
+.ext-app {
+  width: 250px;
+  max-width: 100%;
+  font: 14px/1.15 BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  user-select: none;
+}
+
+.ext-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ext-list__item {
+  width: 100%;
+  padding: 3px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.ext-list__item--active {
+  color: lightgreen;
+}
diff --git a/js/popup.js b/js/popup.js
@@ -1,4 +1,56 @@
 
 ; (function () {
-
+
+  let app = null;
+  let extIds = [];
+
+  function init() {
+    getExtensions();
+
+    app = document.getElementById('ext-app');
+
+    app.addEventListener('click', toggleExtension);
+    app.onmousedown = () => false;
+  }
+
+  function getExtensions() {
+    chrome.management.getAll(render);
+  }
+
+  function render(extensions) {
+    extensions = extensions || [];
+    extensions = extensions.filter((item) => !item.isApp);
+
+    if (!extensions.length) return;
+
+    app.appendChild(buildList(extensions));
+  }
+
+  function buildList(extensions) {
+    let list = document.createElement('ul');
+    list.className = 'ext-list';
+
+    extensions.forEach((item) => {
+      let listItem = document.createElement('li');
+
+      listItem.textContent = item.name;
+      listItem.dataset.id = item.id;
+      listItem.className = 'ext-list__item';
+
+      list.appendChild(listItem);
+    });
+
+    return list;
+  }
+
+  function toggleExtension(event) {
+    const item = event.target;
+
+    if (!item.closest('.ext-list__item')) return;
+
+    item.classList.toggle('ext-list__item--active');
+  }
+
+  document.addEventListener('DOMContentLoaded', init);
+
 })();
diff --git a/popup.html b/popup.html
@@ -8,7 +8,7 @@
 </head>
 
 <body>
-  <div id="ex-app"></div>
+  <div id="ext-app" class="ext-app"></div>
 </body>
 
 </html>