Add listener

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "mart-bookmark",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

src/css/style.css

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   padding: 0;
   margin: 0;
@@ -16,14 +20,50 @@ body {
   margin-left: 10px;
 }
 
+.dev-engine > div {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .dev-engine button {
   margin: 0 10px 8px 0;
+  position: relative;
+}
+
+.item:hover .btn-del {
+  display: block;
+}
+
+.btn-del {
+  position: absolute;
+  top: -25%;
+  left: 80%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  z-index: 100;
+  background: black;
+}
+
+.btn-del span {
+  position: absolute;
+  width: 15px;
+  height: 5px;
+  top: 40%;
+  left: 12%;
+  border-radius: 20%;
+  z-index: 101;
+  background: white;
 }
 
 .group {
   margin-bottom: 20px;
 }
 
+.item {
+  position: relative;
+}
+
 .group legend {
   font-size: 17px !important;
   font-weight: 500;
@@ -38,6 +78,10 @@ body {
   margin: 8px 0 !important;
 }
 
+.btn-del {
+  display: none;
+}
+
 .ml {
   margin-left: 15px;
 }

src/js/main.js

@@ -1,34 +1,117 @@
-// Render
+/** ----------------------------- Util ---------------------------*/
+function genId(length) {
+  const characters = 'abc0123456789';
+  const charactersLength = characters.length;
 
+  let result = '';
+
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+
+  return result;
+}
+
+/** ----------------------------- Handler ---------------------------*/
+const BASE_API_URL = 'https://600e379f3bb1d100179de841.mockapi.io/api/v1';
+
+const keys = [
+  'browserSearch',
+  'color',
+  'converter',
+  'codeEditor',
+  'codeOptimize',
+  'dataGenerator',
+  'other'
+];
+
+// Render popup & add listener
 (() => {
-  $.getJSON('store.json', (allResource) => {
-    const keys = Object.keys(allResource);
+  fetch(`${BASE_API_URL}/tools`)
+    .then((response) => response.json())
+    .then((store) => {
+      keys.forEach((key) => {
+        const items = store.filter((el) => el.type === key);
 
-    keys.forEach((key) => {
-      if (!allResource[key].length) return;
+        if (!items.length) return;
 
-      let result = '';
+        let result = '';
 
-      allResource[key].map((resource) => {
-        result += `
-        <button type="button" class="btn btn-light btn-sm" src=${resource.link}>
-          <img class="icon" src=${resource.icon} alt=${resource.name} style="width: 18px; height: 18px;"/>
-          <span class="name">${resource.name}</span>
-        </button>
+        items.map((resource) => {
+          result += `
+          <div class="item">
+            <button type="button" class="btn btn-light btn-sm" src=${resource.link} id="${resource.id}">
+              <img class="icon" src=${resource.icon} alt=${resource.name} style="width: 18px; height: 18px;"/>
+              <span class="name">${resource.name}</span>
+            </button>
+            <div class="btn-del"><span></span></div>
+          </div>
         `;
+        });
+
+        document.getElementById(`${key}-list`).innerHTML = result;
       });
 
-      document.getElementById(`${key}-list`).innerHTML = result;
-    });
-  });
-})();
+      // Handle add listener: choose an item
+      $(window).ready(function () {
+        $('.dev-engine button')
+          .not('.btn-add')
+          .click(function () {
+            const url = $(this).attr('src');
 
-// Handle click add bookmark
-(() => {
-  $('.dev-engine .btn-add').click(() => {
-    const resourceKey = $(this).attr('data-resource');
-    console.log($(this).attr('class'));
+            // Create new tab
+            chrome.tabs.create(
+              {
+                url
+              },
+              function () {}
+            );
+          });
+      });
 
-    console.log(resourceKey);
-  });
+      // Handle add listener: add a bookmark
+      $('.dev-engine .btn-add').click(function () {
+        const resourceKey = $(this).attr('data-resource');
+
+        chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
+          const link = tabs[0].url;
+          const icon = tabs[0].favIconUrl;
+          const title = tabs[0].title;
+          const name = title.length < 13 ? title : `${title.slice(0, 10)}...`;
+          const type = resourceKey;
+
+          const newItem = {
+            id: genId(5),
+            name,
+            icon,
+            link,
+            type
+          };
+
+          fetch(`${BASE_API_URL}/tools`, {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(newItem)
+          })
+            .then((response) => response.json())
+            .then((store) => store);
+        });
+      });
+
+      // Handle add listener: del a bookmark
+      $('.dev-engine .btn-del').click(function (e) {
+        e.preventDefault();
+
+        const id = $(this).prev().attr('id');
+
+        fetch(`${BASE_API_URL}/tools/${id}`, {
+          method: 'DELETE'
+        })
+          .then((response) => response.json())
+          .then((result) => result);
+      });
+    });
 })();