diff --git a/css/popup.css b/css/popup.css
index 8b13789..ba410fa 100644
--- 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;
+}
\ No newline at end of file
diff --git a/js/popup.js b/js/popup.js
index 1854774..a8ad828 100644
--- 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
index 4ab93c2..9883f16 100644
--- a/popup.html
+++ b/popup.html
@@ -8,7 +8,7 @@
-
+