feat: add toggle checkbox functionality

popup.css

@@ -85,4 +85,9 @@ body {
     background-color: #badb34;
     border-color: #b6b929;
   }
+
+  button#toggle-checkboxes {
+    background-color: #2287da;
+    border-color: #2758ab;
+  }
   

popup.html

@@ -15,6 +15,7 @@
             <button id="add-checkboxes"><span>Add</span><br><span>Checkboxes</span></button>
             <button id="remove-checkboxes"><span>Remove</span><br><span>Checkboxes</span></button>                       
         </div>
+        <button id="toggle-checkboxes">Toggle Checkboxes</button>
         <button id="bulk-delete">Bulk delete</button>
     </div>      
     <div class="footer">

popup.js

@@ -16,6 +16,15 @@ document.getElementById('bulk-delete').addEventListener('click', () => {
   });
 });
 
+document.getElementById('toggle-checkboxes').addEventListener('click', () => {
+  chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+    chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      files: ['toggleCheckboxes.js']
+    });
+  });
+});
+
 document.getElementById('remove-checkboxes').addEventListener('click', () => {
   chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
     chrome.scripting.executeScript({

toggleCheckboxes.js

@@ -0,0 +1,9 @@
+function toggleCheckboxes() {
+  const conversations = document.querySelectorAll(".conversation-checkbox");
+
+  conversations.forEach((checkbox) => {
+    checkbox.checked = !checkbox.checked;
+  });
+}
+
+toggleCheckboxes();