Обновил оформление

extension/dist/popup.html

@@ -15,7 +15,6 @@
       </label>
     </div>
     <div id="id_list">
-      <div class="idToHide"></div>
     </div>
   <script src="popup.js"></script></body>
 </html>

src/popup/popup.css

@@ -1,5 +1,5 @@
 body {
-    min-width: 80px;
+    min-width: 120px;
 }
 /* The switch - the box around the slider */
 .switch {
@@ -78,21 +78,26 @@ input:checked + .slider:before {
 }
 
 .idToHide {
-    margin: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+    width: 100vw;
 }
 
 .idToHide:hover {
-    background-color: white;
+    background-color: #dcdfde;
 }
 
 #id_list {
-    background-color: #dcdfde;
     color: black;
-    width: 100vw;
     position: relative;
     margin-left: -50vw;
     left: 50%;
     margin-top: 10vw;
-    padding-top: 5px;
+}
-    padding-bottom: 5px;
+
+.del_item {
+    cursor: pointer;
 }

src/popup/popup.html

@@ -15,7 +15,6 @@
       </label>
     </div>
     <div id="id_list">
-      <div class="idToHide"></div>
     </div>
   </body>
 </html>

src/popup/popup.js

@@ -14,7 +14,11 @@ let disableText = "Выкл";
 function idBtnHTML(id) {
     const element = document.createElement('div');
     element.setAttribute('class', 'idToHide');
-    element.innerHTML = id;
+    element.innerHTML = `
+        <a href="https://vk.com/id${id}" target="_blank" title="Перейти в профиль">🧑 id${id}</a>
+        <span class="del_item" title="Удалить">🗑️</span>
+    `;
+    element.id = id;
     return element;
 }
 
@@ -36,16 +40,20 @@ chrome.storage.sync.get('idsToHide', function(data) {
         idList.appendChild(row);
     }
     for (const element of idsToHideElements) {
-        element.addEventListener('click', function() {
+        for (const child of element.childNodes) {
-            const index = idsToHide.indexOf(element.innerText)
+            if (child.className === "del_item") {
-            if (index > -1) {
+                child.addEventListener('click', function() {
-                idsToHide.splice(index, 1);
+                    const index = idsToHide.indexOf(element.id)
+                    if (index > -1) {
+                        idsToHide.splice(index, 1);
+                    }
+                    chrome.storage.sync.set({idsToHide: idsToHide}, function() {
+                        element.remove();
+                        console.log('Cleared idsToHide');
+                    });
+                });
             }
-            chrome.storage.sync.set({idsToHide: idsToHide}, function() {
+        }
-                element.innerText = '';
-                console.log('Cleared idsToHide');
-            });
-        });
     };    
 });