Optimize bulk deletion flow and handle UI residuals

- Check for existing delete button before initiating deletion.
- Remove lingering delete button from DOM if present.
- Ensure sequential deletion of selected conversations.
This commit is contained in:
qcrao
2023-10-19 17:21:59 +08:00
parent 42fc405595
commit b760a1837b
2 changed files with 40 additions and 38 deletions

View File

@@ -1,3 +1,9 @@
const Selectors = {
conversationsCheckbox: '.conversation-checkbox:checked',
deleteButton: 'nav div a>div>button:nth-child(2)',
confirmDeleteButton: 'button.btn.btn-danger',
};
async function bulkDeleteConversations() { async function bulkDeleteConversations() {
const selectedConversations = getSelectedConversations(); const selectedConversations = getSelectedConversations();
@@ -7,68 +13,65 @@ async function bulkDeleteConversations() {
return; return;
} }
let deleteButton = document.querySelector(Selectors.deleteButton);
if (deleteButton) {
deleteButton.remove();
}
console.log("Selected Conversations:", selectedConversations); console.log("Selected Conversations:", selectedConversations);
// 使用 for 循环按顺序删除选中的对话
for (const element of selectedConversations) { for (const element of selectedConversations) {
await deleteConversation(element); await deleteConversation(element);
await delay(300);
} }
} }
function getSelectedConversations() { function getSelectedConversations() {
return [...document.querySelectorAll('.conversation-checkbox:checked')]; return [...document.querySelectorAll(Selectors.conversationsCheckbox)];
} }
function removeAllCheckboxes() { function removeAllCheckboxes() {
const allCheckboxes = document.querySelectorAll('.conversation-checkbox'); const allCheckboxes = document.querySelectorAll(Selectors.conversationsCheckbox);
allCheckboxes.forEach(checkbox => checkbox.remove()); allCheckboxes.forEach(checkbox => checkbox.remove());
} }
async function deleteConversation(checkbox) { async function deleteConversation(checkbox) {
const conversationElement = await checkbox.closest('.flex.p-3.items-center.gap-3.relative.rounded-md') const conversationElement = await checkbox.closest('.flex.p-3.items-center.gap-3.relative.rounded-md');
console.log("1. 点击对话", conversationElement); console.log("1. Clicking conversation", conversationElement);
conversationElement.click(); // 点击对话 conversationElement.click();
// debugger const deleteButton = await waitForElement(Selectors.deleteButton);
const deleteButton = await waitForElement("nav div a>div>button:nth-child(2)");
if (deleteButton) { if (deleteButton) {
console.log("2. 点击删除按钮"); console.log("2. Clicking delete button", deleteButton);
deleteButton.click(); // 点击删除按钮 deleteButton.click();
await delay(300); const confirmButton = await waitForElement(Selectors.confirmDeleteButton);
// 等待确认删除对话框的按钮出现
const confirmButton = await waitForElement('button.btn.btn-danger');
if (confirmButton) { if (confirmButton) {
console.log("3. 点击确认按钮"); console.log("3. Clicking confirm button");
confirmButton.click(); confirmButton.click();
// 等待删除按钮消失 await waitForElementToDisappear(Selectors.confirmDeleteButton);
await waitForElementToDisappear('button.btn.btn-danger');
} }
} }
console.log("4. 完成删除"); console.log("4. Deletion completed");
} }
// 用于等待某元素出现的函数 async function waitForElement(selector, timeout = 2000) {
async function waitForElement(selector, timeout = 5000) {
const startedAt = Date.now(); const startedAt = Date.now();
while ((Date.now() - startedAt) < timeout) { while ((Date.now() - startedAt) < timeout) {
const element = document.querySelector(selector); const element = document.querySelector(selector);
if (element) return element; if (element) return element;
await delay(100); await delay(100);
} }
console.log('do not found delete confirm button') console.log(`Element ${selector} not found within ${timeout}ms`);
throw new Error(`Element ${selector} not found within ${timeout}ms`); throw new Error(`Element ${selector} not found within ${timeout}ms`);
} }
// 用于等待某元素消失的函数 async function waitForElementToDisappear(selector, timeout = 2000) {
async function waitForElementToDisappear(selector, timeout = 5000) {
const startedAt = Date.now(); const startedAt = Date.now();
while ((Date.now() - startedAt) < timeout) { while ((Date.now() - startedAt) < timeout) {
const element = document.querySelector(selector); const element = document.querySelector(selector);
@@ -78,7 +81,6 @@ async function waitForElementToDisappear(selector, timeout = 5000) {
throw new Error(`Element ${selector} did not disappear within ${timeout}ms`); throw new Error(`Element ${selector} did not disappear within ${timeout}ms`);
} }
// 延迟函数
function delay(ms) { function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
} }

View File

@@ -1,7 +1,7 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "ChatGPT Bulk Delete", "name": "ChatGPT Bulk Delete",
"version": "2.8", "version": "2.9",
"description": "A Chrome extension to bulk delete ChatGPT conversations", "description": "A Chrome extension to bulk delete ChatGPT conversations",
"icons": { "icons": {
"48": "icon48.png" "48": "icon48.png"