1

manifest.config.ts

@@ -27,4 +27,9 @@ export default defineManifest({
         service_worker: 'src/background/index.ts',
         type: 'module',
     },
+    externally_connectable: {
+        matches: [
+            "http://localhost:3000/*",
+        ]
+    }
 });

src/background/domScraper.ts

@@ -225,4 +225,4 @@ async function processTable(config: PlatformFieldConfig, rootDom: ParentNode) {
     }
 
     return allTableData;
-}
+}

src/background/index.ts

@@ -1,35 +1,41 @@
-import { handleBackgroundCommand, handleInstalled, handleStartup, handleWindowRemoved } from './service';
+import {handleBackgroundCommand, handleWindowRemoved} from './service';
-import type { BackgroundCommand } from './types';
+import type {BackgroundCommand} from './types';
 
-chrome.runtime.onInstalled.addListener(() => {
-  void handleInstalled();
-});
 
-chrome.runtime.onStartup.addListener(() => {
-  void handleStartup();
-});
 
 chrome.runtime.onMessage.addListener((message: BackgroundCommand, _sender, sendResponse) => {
-  void handleBackgroundMessage(message, sendResponse);
+    void handleBackgroundMessage(message, sendResponse);
-  return true;
+    return true;
 });
 
 chrome.windows.onRemoved.addListener((windowId) => {
-  void handleWindowRemoved(windowId);
+    void handleWindowRemoved(windowId);
+});
+
+chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
+    if (message.type === "STORE_AI_PING") {
+        // 返回版本号等信息
+        sendResponse({
+            success: true,
+            version: chrome.runtime.getManifest().version
+        });
+    }
+    // 注意：外部消息处理必须返回 true 才能支持异步 sendResponse
+    return true;
 });
 
 /**
  * 统一包装后台消息处理，确保异步错误能回给调用方。
  */
 async function handleBackgroundMessage(
-  message: BackgroundCommand,
+    message: BackgroundCommand,
-  sendResponse: (response?: unknown) => void,
+    sendResponse: (response?: unknown) => void,
 ) {
-  try {
+    try {
-    const result = await handleBackgroundCommand(message);
+        const result = await handleBackgroundCommand(message);
-    sendResponse(result);
+        sendResponse(result);
-  } catch (error: unknown) {
+    } catch (error: unknown) {
-    const messageText = error instanceof Error ? error.message : 'Unknown error';
+        const messageText = error instanceof Error ? error.message : 'Unknown error';
-    sendResponse({ ok: false, error: messageText });
+        sendResponse({ok: false, error: messageText});
-  }
+    }
 }

src/background/service/crawlTask.ts

@@ -1,11 +1,12 @@
 import { getPlatformById } from '@/config/platforms';
 import type { CrawlPauseInfo, CrawlProgressStep, CrawlTaskState, PlatformConfig, PlatformStepConfig } from '@/types';
+import type { DomScrapeResult } from '../domScraper';
 import type { CrawlStateResponse } from '../types';
 import { getCrawlTaskState, setCrawlTaskState, updateCrawlTaskState } from './taskState';
 
 interface PageRunnerResponse {
     ok: boolean;
-    data?: any | null;
+    data?: DomScrapeResult | null;
     interrupt?: CrawlPauseInfo;
     error?: string;
 }
@@ -225,10 +226,6 @@ async function runCrawlSteps(platform: PlatformConfig, initialState: CrawlTaskSt
             status: 'completed',
             steps: state.steps.map((step) => (step.status === 'running' ? { ...step, status: 'success' } : step)),
         }));
-
-        await chrome.windows.remove(initialState.windowId).catch((error: unknown) => {
-            console.warn('[crawl] 爬取完成后关闭窗口失败', error);
-        });
     } catch (error: unknown) {
         console.error('[crawl] 执行失败', error);
 

src/config/platforms.ts

@@ -1,6 +1,6 @@
 import type {PlatformConfig} from '@/types';
 
-export const PLATFORM_CONFIGS: PlatformConfig[] = [
+export const platformConfigs: PlatformConfig[] = [
     {
         id: 'Shopee',
         name: 'Shopee 后台',
@@ -306,5 +306,5 @@ export const PLATFORM_CONFIGS: PlatformConfig[] = [
  * 根据平台 ID 返回对应的平台抓取配置。
  */
 export function getPlatformById(platformId: string) {
-    return PLATFORM_CONFIGS.find((item) => item.id === platformId) ?? null;
+    return platformConfigs.find((item) => item.id === platformId) ?? null;
 }

src/content/pageRunner.ts

@@ -1,4 +1,4 @@
-import { processFields} from '@/background/domScraper';
+import { processFields, type DomScrapeResult } from '@/background/domScraper';
 import type { CrawlPauseInfo, PlatformFieldConfig } from '@/types';
 
 interface ScrapeStepMessage {
@@ -17,7 +17,7 @@ type PageRunnerMessage = ScrapeStepMessage | CheckInterruptMessage;
 
 interface PageRunnerResponse {
     ok: boolean;
-    data?: any | null;
+    data?: DomScrapeResult | null;
     interrupt?: CrawlPauseInfo;
     error?: string;
 }

src/popup/App.vue

@@ -1,118 +1,44 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import {useLogin} from "./hook/use-login";
-import { PLATFORM_CONFIGS } from '@/config/platforms';
+import {platformConfigs} from "@/config/platforms";
-import { getToken, logout, mockLogin } from '@/shared/auth';
+import {useScan} from "./hook/use-scan";
-import type { CrawlTaskState } from '@/types';
+import {computed} from "vue";
+import {formatSeconds} from "@/shared/time_format";
 
-const token = ref<string | null>(null);
+/**
-const selectedPlatformId = ref(PLATFORM_CONFIGS[0]?.id ?? '');
+ * 登录逻辑
-const isLoading = ref(true);
+ */
-const isScanning = ref(false);
+const {isLoggedIn, handleLogin, handleLogout} = useLogin()
-const errorMessage = ref('');
-const crawlState = ref<CrawlTaskState | null>(null);
-const elapsedSeconds = ref(0);
-let timer: number | undefined;
 
-const selectedPlatform = computed(() =>
+/**
-    PLATFORM_CONFIGS.find((platform) => platform.id === selectedPlatformId.value) ?? null,
+ * 爬取逻辑的数据
+ */
+const {
+    selectedPlatformId,
+    isScanning,
+    crawlState,
+    handleScan,
+    elapsedSeconds
+} = useScan()
+
+
+/**
+ * 显示进度条
+ */
+const shouldShowCrawlProgress = computed<boolean>(() =>
+    crawlState.value != null
 );
 
-const isLoggedIn = computed(() => token.value !== null);
+/**
-const shouldShowCrawlProgress = computed(() =>
+ * 取消爬取
-    crawlState.value ? ['running', 'paused', 'completed', 'failed'].includes(crawlState.value.status) : false,
+ */
-);
+const handleCancelCrawl = () => {
 
-onMounted(async () => {
-    token.value = await getToken();
-    await refreshCrawlState();
-    timer = window.setInterval(() => {
-        updateElapsedSeconds();
-        void refreshCrawlState();
-    }, 1000);
-    isLoading.value = false;
-});
-
-onUnmounted(() => {
-    if (timer) {
-        window.clearInterval(timer);
-    }
-});
-
-async function handleLogin() {
-    errorMessage.value = '';
-    token.value = await mockLogin();
-}
-
-async function handleLogout() {
-    errorMessage.value = '';
-    await logout();
-    token.value = null;
-}
-
-async function handleScan() {
-    errorMessage.value = '';
-
-    if (!selectedPlatform.value) {
-        errorMessage.value = '请选择要爬取的平台';
-        return;
-    }
-
-    isScanning.value = true;
-
-    try {
-        const response = await sendBackgroundMessage<CrawlTaskState>({
-            action: 'START_CRAWL',
-            payload: { platformId: selectedPlatform.value.id },
-        });
-
-        if (!response.ok) {
-            errorMessage.value = response.error ?? '打开平台窗口失败';
-            return;
-        }
-
-        crawlState.value = response.data ?? null;
-        updateElapsedSeconds();
-    } catch (error: unknown) {
-        errorMessage.value = error instanceof Error ? error.message : '打开平台窗口失败';
-    } finally {
-        isScanning.value = false;
-    }
-}
-
-async function handleCancelCrawl() {
-    const response = await sendBackgroundMessage<CrawlTaskState>({ action: 'CANCEL_CRAWL' });
-    crawlState.value = response.data ?? null;
-}
-
-async function handleResumeCrawl() {
-    const response = await sendBackgroundMessage<CrawlTaskState>({ action: 'RESUME_CRAWL' });
-    crawlState.value = response.data ?? null;
-}
-
-async function refreshCrawlState() {
-    const response = await sendBackgroundMessage<CrawlTaskState | null>({ action: 'GET_CRAWL_STATE' });
-
-    if (response.ok) {
-        crawlState.value = response.data ?? null;
-        updateElapsedSeconds();
-    }
-}
-
-function updateElapsedSeconds() {
-    if (!crawlState.value) {
-        elapsedSeconds.value = 0;
-        return;
-    }
-
-    elapsedSeconds.value = Math.max(0, Math.floor((Date.now() - crawlState.value.startedAt) / 1000));
-}
-
-function formatElapsed(totalSeconds: number): string {
-    const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
-    const seconds = (totalSeconds % 60).toString().padStart(2, '0');
-    return `${minutes}:${seconds}`;
 }
 
+/**
+ * 获取进度样式
+ */
 function getStepClass(status: string): string {
     if (status === 'running') {
         return 'border-emerald-500 bg-emerald-50 text-emerald-700';
@@ -140,13 +66,6 @@ function getStepText(status: string): string {
     return textMap[status] ?? status;
 }
 
-function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data?: T; error?: string }> {
-    if (typeof chrome === 'undefined' || !chrome.runtime?.sendMessage) {
-        return Promise.resolve({ ok: true, data: null as T });
-    }
-
-    return chrome.runtime.sendMessage(message);
-}
 </script>
 
 <template>
@@ -157,14 +76,11 @@ function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data
                 <p class="text-sm leading-5 text-slate-600">自动打开商家后台，按平台配置顺序采集页面数据</p>
             </header>
 
-            <div v-if="isLoading" class="rounded-md border border-slate-200 bg-white px-3 py-4 text-sm text-slate-500">
-                正在读取登录状态...
-            </div>
 
-            <template v-else-if="!isLoggedIn">
+            <template v-if="!isLoggedIn">
                 <button type="button"
-                    class="rounded-md bg-slate-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-slate-700"
+                        class="rounded-md bg-slate-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-slate-700"
-                    @click="handleLogin">
+                        @click="handleLogin">
                     请登录
                 </button>
             </template>
@@ -175,33 +91,35 @@ function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data
                         <div>
                             <p class="text-sm font-medium text-slate-800">{{ crawlState.platformName }}</p>
                             <p class="text-xs text-slate-500">
-                                {{ crawlState.status === 'paused' ? '已暂停' : '已运行 ' + formatElapsed(elapsedSeconds) }}
+                                {{
+                                    crawlState.status === 'paused' ? '已暂停' : '已运行 ' + formatSeconds(elapsedSeconds)
+                                }}
                             </p>
                         </div>
                         <div class="flex items-center gap-2">
-                            <button v-if="crawlState.status === 'paused'" type="button"
+                            <!--                            <button v-if="crawlState.status === 'paused'" type="button"-->
-                                class="text-xs text-emerald-600 transition hover:text-emerald-700"
+                            <!--                                    class="text-xs text-emerald-600 transition hover:text-emerald-700"-->
-                                @click="handleResumeCrawl">
+                            <!--                                    @click="handleResumeCrawl">-->
-                                继续
+                            <!--                                继续-->
-                            </button>
+                            <!--                            </button>-->
                             <button type="button" class="text-xs text-red-600 transition hover:text-red-700"
-                                @click="handleCancelCrawl">
+                                    @click="handleCancelCrawl">
                                 取消
                             </button>
                         </div>
                     </div>
 
                     <div v-if="crawlState.status === 'paused' && crawlState.pause"
-                        class="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
+                         class="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
                         {{ crawlState.pause.message }}
                     </div>
 
                     <ol class="space-y-3">
                         <li v-for="(step, index) in crawlState.steps" :key="step.uniqueKey"
                             class="relative border-l-2 border-slate-200 pl-4">
-                            <span
+                                        <span
-                                class="absolute -left-[7px] top-1 h-3 w-3 rounded-full border-2 border-white bg-slate-300"
+                                            class="absolute -left-[7px] top-1 h-3 w-3 rounded-full border-2 border-white bg-slate-300"
-                                :class="{ 'bg-emerald-500': step.status === 'running' || step.status === 'success', 'bg-red-500': step.status === 'failed' }"></span>
+                                            :class="{ 'bg-emerald-500': step.status === 'running' || step.status === 'success', 'bg-red-500': step.status === 'failed' }"></span>
                             <div class="rounded-md border px-3 py-2 text-sm" :class="getStepClass(step.status)">
                                 <div class="flex items-center justify-between gap-3">
                                     <span class="font-medium">{{ index + 1 }}. {{ step.name }}</span>
@@ -209,7 +127,9 @@ function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data
                                 </div>
                                 <p v-if="step.message" class="mt-1 text-xs">{{ step.message }}</p>
                                 <pre v-if="step.result !== undefined"
-                                    class="mt-2 max-h-32 overflow-auto rounded bg-slate-950 p-2 text-[11px] leading-4 text-slate-100">{{ JSON.stringify(step.result, null, 2) }}</pre>
+                                     class="mt-2 max-h-32 overflow-auto rounded bg-slate-950 p-2 text-[11px] leading-4 text-slate-100">{{
+                                        JSON.stringify(step.result, null, 2)
+                                    }}</pre>
                             </div>
                         </li>
                     </ol>
@@ -220,28 +140,27 @@ function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data
                 <label class="space-y-2">
                     <span class="text-sm font-medium text-slate-700">平台选择</span>
                     <select v-model="selectedPlatformId"
-                        class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm outline-none transition focus:border-slate-800 focus:ring-2 focus:ring-slate-200">
+                            class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm outline-none transition focus:border-slate-800 focus:ring-2 focus:ring-slate-200">
-                        <option v-for="platform in PLATFORM_CONFIGS" :key="platform.id" :value="platform.id">
+                        <option v-for="platform in platformConfigs"
+                                :key="platform.id"
+                                :value="platform.id">
                             {{ platform.name }}
                         </option>
                     </select>
                 </label>
 
                 <button type="button"
-                    class="rounded-md bg-emerald-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-300"
+                        class="rounded-md bg-emerald-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-300"
-                    :disabled="isScanning" @click="handleScan">
+                        :disabled="isScanning" @click="handleScan">
                     {{ isScanning ? '正在打开...' : '立即爬取' }}
                 </button>
             </template>
 
-            <p v-if="errorMessage" class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">
-                {{ errorMessage }}
-            </p>
 
             <footer
                 class="mt-auto flex items-center justify-between border-t border-slate-200 pt-4 text-xs text-slate-500">
                 <button v-if="isLoggedIn" type="button" class="text-slate-600 transition hover:text-slate-900"
-                    @click="handleLogout">
+                        @click="handleLogout">
                     退出
                 </button>
                 <span v-else></span>

src/popup/hook/use-login.ts

@@ -0,0 +1,35 @@
+import {computed, onMounted, ref} from "vue";
+import {getToken, logout, setToken} from "@/shared/auth";
+
+export const useLogin = () => {
+    const token = ref<string | null>(null);
+
+    const isLoggedIn = computed(() => token.value !== null);
+
+    /**
+     * 登录
+     */
+    const handleLogin = async () => {
+        let value = "xxx"
+        await setToken(value)
+        token.value = value
+    }
+
+    /**
+     * 退出登录
+     */
+    const handleLogout = async () => {
+        await logout()
+        token.value = null
+    }
+
+    onMounted(async () => {
+        token.value = await getToken()
+    })
+
+    return {
+        isLoggedIn,
+        handleLogin,
+        handleLogout,
+    }
+}

src/popup/hook/use-scan.ts

@@ -0,0 +1,85 @@
+import {onMounted, onUnmounted, ref} from "vue";
+import {platformConfigs} from "@/config/platforms";
+import {CrawlTaskState} from "@/types";
+import {sendBackgroundMessage} from "@/shared/message";
+
+export const useScan = () => {
+    //选中id
+    const selectedPlatformId = ref(platformConfigs[0]?.id ?? '');
+    //防抖
+    const isScanning = ref<boolean>(false)
+    //步骤数据
+    const crawlState = ref<CrawlTaskState | null>(null);
+    //爬取时间
+    const elapsedSeconds = ref<number>(0)
+
+
+    let timer: number | undefined;
+    /**
+     * 开始爬取
+     */
+    const handleScan = async () => {
+        if (isScanning.value) return
+        isScanning.value = true
+        try {
+            updateSeconds()
+            //定时器
+            timer = window.setInterval(() => {
+                updateSeconds();
+            }, 1000);
+            //发送
+            const response = await sendBackgroundMessage<CrawlTaskState>({
+                action: 'START_CRAWL',
+                payload: {platformId: selectedPlatformId.value},
+            });
+            if (response.data) {
+                crawlState.value = response.data;
+            }
+        } finally {
+            isScanning.value = false;
+        }
+    }
+
+
+    /**
+     * 更新时间
+     */
+    function updateSeconds() {
+        if (!crawlState.value) {
+            elapsedSeconds.value = 0;
+            return;
+        }
+
+        elapsedSeconds.value = Math.max(0, Math.floor((Date.now() - crawlState.value.startedAt) / 1000));
+    }
+
+    /**
+     * 同步爬取状态
+     */
+    async function refreshCrawlState() {
+        const response = await sendBackgroundMessage<CrawlTaskState | null>({action: 'GET_CRAWL_STATE'});
+
+        if (response.data) {
+            crawlState.value = response.data ?? null;
+            updateSeconds();
+        }
+    }
+
+    onMounted(async () => {
+        await refreshCrawlState()
+    })
+
+    onUnmounted(() => {
+        if (timer) {
+            window.clearInterval(timer);
+        }
+    })
+
+    return {
+        selectedPlatformId,
+        isScanning,
+        crawlState,
+        handleScan,
+        elapsedSeconds,
+    }
+}

src/shared/auth.ts

@@ -1,5 +1,4 @@
 const AUTH_TOKEN_KEY = 'token';
-const MOCK_TOKEN = 'mock-extension-token';
 
 /**
  * 获取当前登录 token。
@@ -16,13 +15,6 @@ export async function getToken(): Promise<string | null> {
     return window.localStorage.getItem(AUTH_TOKEN_KEY);
 }
 
-/**
- * 模拟登录，写入一个临时 token，方便后续替换真实登录逻辑。
- */
-export async function mockLogin(): Promise<string> {
-    await setToken(MOCK_TOKEN);
-    return MOCK_TOKEN;
-}
 
 /**
  * 清除当前登录 token。
@@ -34,11 +26,12 @@ export async function logout(): Promise<void> {
         await storage.remove(AUTH_TOKEN_KEY);
         return;
     }
+    console.log("溢出")
 
     window.localStorage.removeItem(AUTH_TOKEN_KEY);
 }
 
-async function setToken(token: string): Promise<void> {
+export async function setToken(token: string): Promise<void> {
     const storage = getChromeStorage();
 
     if (storage) {

src/shared/message.ts

@@ -0,0 +1,24 @@
+export type MessageAction =
+    | "GET_CRAWL_STATE"  // 获取爬虫的当前状态
+    | "START_CRAWL" // 开始爬取
+
+interface BackgroundMessage<T = any> {
+    action: MessageAction; // 标识要执行的操作
+    payload?: T;    // 附带的数据
+}
+
+interface BackgroundResponse<T = any> {
+    data: T | null
+}
+
+/**
+ * 定义发送给 Background Script 的消息类型
+ */
+export function sendBackgroundMessage<T>(data: BackgroundMessage): Promise<BackgroundResponse<T>> {
+    // 检查是否在 Chrome 扩展环境中运行
+    if (typeof chrome === 'undefined' || !chrome.runtime?.sendMessage) {
+        return Promise.resolve({data: null});
+    }
+
+    return chrome.runtime.sendMessage(data);
+}

src/shared/time_format.ts

@@ -0,0 +1,9 @@
+/**
+ * 秒格式化成 00:00
+ * @param totalSeconds
+ */
+export function formatSeconds(totalSeconds: number): string {
+    const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
+    const seconds = (totalSeconds % 60).toString().padStart(2, '0');
+    return `${minutes}:${seconds}`;
+}

src/types/crawl.ts

@@ -26,7 +26,9 @@ export interface CrawlPauseInfo {
     message: string;
 }
 
-// 当前正在执行的爬取任务快照，供 popup 和 content script 同步展示。
+/**
+ * 当前正在执行的爬取任务快照，供 popup 和 content script 同步展示。
+ */
 export interface CrawlTaskState {
     // 任务唯一标识。
     id: string;

tsconfig.json

@@ -15,7 +15,7 @@
       "@crxjs/vite-plugin/client",
       "chrome"
     ],
-    "allowImportingTsExtensions": true,
+    "allowImportingTsExtensions": false,
     "allowJs": true,
     "strict": true,
     "strictNullChecks": true,