add bulk archive button

bulkArchiveCoversations.js

@@ -0,0 +1,100 @@
+console.log("bulkArchiveConversations.js loaded");
+
+async function bulkArchiveConversations() {
+  const selectedConversations = getSelectedConversations();
+
+  if (selectedConversations.length === 0) {
+    console.log("No conversations to archive.");
+    removeAllCheckboxes();
+    return;
+  }
+
+  console.log("Selected Conversations:", selectedConversations);
+
+  for (const element of selectedConversations) {
+    await archiveConversation(element);
+  }
+}
+
+function getSelectedConversations() {
+  return [...document.querySelectorAll(Selectors.conversationsCheckbox)];
+}
+
+function removeAllCheckboxes() {
+  const allCheckboxes = document.querySelectorAll(`.${CHECKBOX_CLASS}`);
+  allCheckboxes.forEach((checkbox) => checkbox.remove());
+}
+
+async function archiveConversation(checkbox) {
+  await delay(100);
+
+  const conversationElement = checkbox.parentElement;
+  const hoverEvent = new MouseEvent("mouseover", {
+    view: window,
+    bubbles: true,
+    cancelable: true,
+  });
+
+  console.log("1. Hovering over conversation...", conversationElement);
+  conversationElement.dispatchEvent(hoverEvent);
+  await delay(200);
+
+  const pointerDownEvent = new PointerEvent("pointerdown", {
+    bubbles: true,
+    cancelable: true,
+    pointerType: "mouse",
+  });
+  const threeDotButton = await waitForElement(
+    Selectors.threeDotButton,
+    conversationElement.parentElement
+  );
+  console.log("2. Clicking three dot button...", threeDotButton);
+  threeDotButton.dispatchEvent(pointerDownEvent);
+  await delay(300);
+
+  const archiveButton = await waitForArchiveButton();
+
+  if (archiveButton) {
+    console.log("3. Clicking archive button...", archiveButton);
+    archiveButton.click();
+    await delay(500);
+  }
+
+  console.log("4. Archiving completed.");
+}
+
+async function waitForArchiveButton(parent = document, timeout = 2000) {
+  const selector = 'div[role="menuitem"]';
+  const textContent = "Archive";
+  const startedAt = Date.now();
+
+  while (Date.now() - startedAt < timeout) {
+    const elements = parent.querySelectorAll(selector);
+    const element = Array.from(elements).find(
+      (el) => el.textContent.trim() === textContent
+    );
+    if (element) return element;
+    await delay(100);
+  }
+
+  return null;
+}
+
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function waitForElement(selector, parent = document, timeout = 2000) {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeout) {
+    const element = parent.querySelector(selector);
+    if (element) return element;
+    await delay(100);
+  }
+
+  throw new Error(
+    `Element ${selector} not found within ${timeout}ms in the specified parent`
+  );
+}
+
+bulkArchiveConversations();

popup.css

@@ -33,9 +33,9 @@ button {
   padding: 8px 12px;
   font-size: 14px;
   cursor: pointer;
-  background-color: #1ABC9C;
+  background-color: #1abc9c;
   color: white;
-  border: 1px solid #16A085;
+  border: 1px solid #16a085;
   border-radius: 6px;
   text-align: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -44,17 +44,21 @@ button {
 }
 
 button:hover {
-  background-color: #16A085;
+  background-color: #16a085;
-  border-color: #14967F;
+  border-color: #14967f;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
-button#bulk-delete, button#toggle-checkboxes {
+button#bulk-delete,
+button#toggle-checkboxes,
+button#bulk-archive {
   font-size: 16px;
   background-color: #e74c3c;
   border-color: #c0392b;
   margin-top: 10px;
-  width: calc(200px + 40px); /* bulk-delete 宽度等于 body 的宽度减去左右内边距再加上两者之间的距离 */
+  width: calc(
+    200px + 40px
+  ); /* bulk-delete 宽度等于 body 的宽度减去左右内边距再加上两者之间的距离 */
 }
 
 .buttons-wrapper {
@@ -94,12 +98,17 @@ button#toggle-checkboxes {
   border-color: #2758ab;
 }
 
+button#bulk-archive {
+  background-color: #da6922;
+  border-color: #dc661c;
+}
+
 #sponsorLink {
   display: inline-flex;
   align-items: center;
   padding: 10px 20px;
-  background-color: #383E46;
+  background-color: #383e46;
-  border-color: #78838F;
+  border-color: #78838f;
   border-radius: 5px;
   color: #fff;
   text-decoration: none;

popup.html

@@ -1,28 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ChatGPT Bulk Delete</title>
-    <link rel="stylesheet" href="popup.css">
+    <link rel="stylesheet" href="popup.css" />
-</head>
+  </head>
-<body>
+  <body>
     <div class="header">
       <h1>bulk-delete-chatGPT</h1>
     </div>
     <div class="buttons-wrapper">
       <div class="buttons-row">
-            <button id="add-checkboxes"><span>Add</span><br><span>Checkboxes</span></button>
+        <button id="add-checkboxes">
-            <button id="remove-checkboxes"><span>Remove</span><br><span>Checkboxes</span></button>                       
+          <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-archive" class="locked">
+        <span>🔒</span> Bulk Archive
+      </button>
       <button id="bulk-delete">Bulk Delete</button>
     </div>
 
     <div class="footer">
-        <a href="https://github.com/sponsors/qcrao" target="_blank" id="sponsorLink">            
+      <a
-            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart icon-sponsor mr-1 v-align-middle color-fg-sponsors anim-pulse-in" style="fill: #BC6796; vertical-align: middle;">
+        href="https://github.com/sponsors/qcrao"
-                <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path>
+        target="_blank"
+        id="sponsorLink"
+      >
+        <svg
+          aria-hidden="true"
+          height="16"
+          viewBox="0 0 16 16"
+          version="1.1"
+          width="16"
+          data-view-component="true"
+          class="octicon octicon-heart icon-sponsor mr-1 v-align-middle color-fg-sponsors anim-pulse-in"
+          style="fill: #bc6796; vertical-align: middle"
+        >
+          <path
+            d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"
+          ></path>
         </svg>
         &nbsp;Sponsor
       </a>
@@ -30,5 +52,5 @@
     </div>
 
     <script src="popup.js"></script>
-</body>
+  </body>
 </html>