feat: 增加了自动加载所有图片的逻辑

entrypoints/popup/main.ts

@@ -7,6 +7,8 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
     <div class="actions">
       <button id="collectBtn">📥 收集</button>
       <button id="clearBtn">🗑 清空</button>
+      <button id="start-btn">start-btn</button>
+      <button id="stop-btn">stop-btn</button>
     </div>
     <div id="status"></div>
     <div id="pinList"></div>
@@ -26,8 +28,9 @@ document.getElementById('collectBtn')!.addEventListener('click', async () => {
       type: 'COLLECT_PINS',
     });
     if (response?.success) {
-      await browser.storage.local.set({ collectedPins: response.pins });
-      renderPins(response.pins as PinData[]);
+      // await browser.storage.local.set({ collectedPins: response.pins });
+      // renderPins(response.pins as PinData[]);
+      await loadAndRender();
       showStatus(`✅ 已收集 ${response.count} 个 Pin`, 'success');
     }
   } catch (e) {
@@ -91,3 +94,31 @@ function escapeHtml(str: string): string {
   div.textContent = str;
   return div.innerHTML;
 }
+
+let activeTabId: number | null = null;
+// 获取当前标签页 ID
+browser.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+  activeTabId = tab.id!;
+  document.getElementById('start-btn')?.addEventListener('click', () => {
+    browser.tabs.sendMessage(activeTabId!, { action: 'start' });
+  });
+  document.getElementById('stop-btn')?.addEventListener('click', () => {
+    browser.tabs.sendMessage(activeTabId!, { action: 'stop' });
+  });
+});
+// 接收进度回调
+browser.runtime.onMessage.addListener(async (msg) => {
+  if (msg.type === 'progress') {
+    if (msg.error) {
+      document.getElementById('status')!.textContent = `❌ 错误: ${msg.error}`;
+    } else {
+      document.getElementById('status')!.textContent =
+        `第 ${msg.requestCount} 次 · 共 ${msg.totalItems} 条`;
+    }
+    if (msg.done) {
+      await loadAndRender();
+      document.getElementById('status')!.textContent =
+        `✅ 加载完成 · 共 ${msg.totalItems} 条`;
+    }
+  }
+});