Notification

manifest.json

@@ -9,9 +9,7 @@
     "48": "src/icons/popup.png",
     "128": "src/icons/popup.png"
   },
-
   "author": "PA_NQT",
-
   "browser_action": {
     "default_icon": {
       "16": "src/icons/popup.png",
@@ -21,13 +19,13 @@
     "default_title": "Smart bookmark",
     "default_popup": "popup.html"
   },
-  "permissions": [
-    "contextMenus",
-    "tabs",
-    "storage",
-    "http://*/*",
-    "https://*/*"
-  ],
-
+  "permissions": ["tabs"],
+  "toggle-feature-foo": {
+    "suggested_key": {
+      "default": "Shift+S+B",
+      "mac": "Shift+S+B"
+    },
+    "description": "Toggle feature smart bookmark"
+  },
   "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
 }

popup.html

@@ -106,6 +106,7 @@
       </div>
     </div>
 
+    <script src="src/js/util.js"></script>
     <script src="src/js/main.js"></script>
   </body>
 </html>

src/css/style.css

@@ -78,10 +78,22 @@ body {
   margin: 8px 0 !important;
 }
 
+.btn-add:focus,
+.btn-add:active {
+  outline: none !important;
+  box-shadow: none;
+}
+
 .btn-del {
   display: none;
 }
 
+.msg-success {
+  font-size: 14px;
+  font-style: italic;
+  margin-left: 8px;
+}
+
 .ml {
   margin-left: 15px;
 }

src/js/main.js

@@ -1,17 +1,3 @@
-/** ----------------------------- 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';
 
@@ -25,69 +11,54 @@ const keys = [
   'other'
 ];
 
-// Render popup & add listener
+/** Render popup & add listener */
 (() => {
+  // Popup render
   fetch(`${BASE_API_URL}/tools`)
     .then((response) => response.json())
     .then((store) => {
       keys.forEach((key) => {
+        // Filter each category
         const items = store.filter((el) => el.type === key);
 
+        // Resource is empty
         if (!items.length) return;
 
+        // Update view
         let result = '';
-
         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>
-        `;
+          result += itemTemplate(resource);
         });
-
         document.getElementById(`${key}-list`).innerHTML = result;
       });
 
-      // Handle add listener: choose an item
+      // Handle add listener: choose an item (create new tab)
       $(window).ready(function () {
-        $('.dev-engine button')
-          .not('.btn-add')
-          .click(function () {
-            const url = $(this).attr('src');
-
-            // Create new tab
-            chrome.tabs.create(
-              {
-                url
-              },
-              function () {}
-            );
-          });
+        addEventNewTabForEachBtn('.dev-engine button', '.btn-add', 'src');
       });
 
-      // Handle add listener: add a bookmark
+      // Handle add listener: Add a new bookmark on btn add
       $('.dev-engine .btn-add').click(function () {
-        const resourceKey = $(this).attr('data-resource');
+        const curr = $(this);
 
         chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
+          // Create a new item
+          const resourceKey = curr.attr('data-resource');
+
           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 name = title;
           const type = resourceKey;
 
           const newItem = {
-            id: genId(5),
             name,
             icon,
             link,
             type
           };
 
+          // Call API -  send new item
           fetch(`${BASE_API_URL}/tools`, {
             method: 'POST',
             headers: {
@@ -97,21 +68,36 @@ const keys = [
             body: JSON.stringify(newItem)
           })
             .then((response) => response.json())
-            .then((store) => store);
+            .then((newResource) => {
+              // Text notification
+              const msg = `<span class="msg-success text-success">Thêm thành công</span>`;
+
+              $(msg).insertAfter(curr);
+              setTimeout(function () {
+                curr.next().html('');
+              }, 2000);
+
+              // Update view
+              let newNode = itemTemplate(newResource);
+              curr.prev().append(newNode);
+            });
         });
       });
 
       // Handle add listener: del a bookmark
-      $('.dev-engine .btn-del').click(function (e) {
-        e.preventDefault();
+      $('.dev-engine .btn-del').click(function () {
+        const curr = $(this);
 
-        const id = $(this).prev().attr('id');
+        const id = curr.prev().attr('id');
 
         fetch(`${BASE_API_URL}/tools/${id}`, {
           method: 'DELETE'
         })
           .then((response) => response.json())
-          .then((result) => result);
+          .then((result) => {
+            // Update view
+            curr.parent().addClass('d-none');
+          });
       });
     });
 })();

src/js/util.js

@@ -0,0 +1,41 @@
+/** Utils func */
+
+// Item template
+const itemTemplate = (resource) => {
+  return `
+    <div class="item">
+      <button type="button" class="btn btn-light btn-sm" src=${
+        resource.link
+      } id="${resource.id}"
+      data-toggle="tooltip" data-placement="bottom" title="${resource.name}"
+      >
+        <img class="icon" src=${resource.icon} alt=${
+    resource.name
+  } style="width: 18px; height: 18px;"/>
+        <span class="name">${
+          resource.name.length < 13
+            ? resource.name
+            : `${resource.name.slice(0, 10)}...`
+        }</span>
+      </button>
+      <div class="btn-del"><span></span></div>
+    </div>
+  `;
+};
+
+// Add event click on an item
+const addEventNewTabForEachBtn = (selector, except_selector, attr_url) => {
+  $(selector)
+    .not(except_selector)
+    .click(function () {
+      const url = $(this).attr(attr_url);
+
+      // Create new tab
+      chrome.tabs.create(
+        {
+          url
+        },
+        function () {}
+      );
+    });
+};