1

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,23 @@
+# 浏览器扩展需求
+需求：爬取部分平台的商家后台数据，如评论中心、广告数据等
+技术：使用扩展打开一个新的浏览器窗口后，加载其网页地址后，注入脚本内容获取到dom后，提取其中关键信息，因为一个后台下会有侧边菜单（如评论中心，广告数据），所以需要控制脚本点击后到下一个页面，然后继续执行注入脚本爬取内容，完毕后在继续下一个，
+注意点：
+1.因为多平台的商家后台布局和菜单都不一致，无法广告数据->评论中心，这些写死顺序菜单，在多个平台爬，所以需要根据平台来配置爬取页面顺序
+2.因为后台会有登录才能访问，或者是验证码撞盾，所以在这种特殊情况下时，需要告知用户，让用户手动解决后，在继续执行顺序爬取
+3.在爬取页面时，存在网络加载慢，或者其他原因，导致dom出现没那么及时，所以需要做特殊处理，如一个页面过了4,5秒还没开始抓，就刷新一下页面
+
+
+# 流程
+倾向是全自动，但是如果强制跳转到登录或者撞盾或者其他等异常情况只能让用户手动解决后在开始自动了，数据的话，先只打印到控制台即可，
+然后我说下扩展的交互
+1.点击扩展图标后，出现一个popup，里面放一个登陆按钮，必须登录后才能用，而登录暂且先写死，点击一下后自动登录，写一个假token存储，方便后续替换真的
+2.在登录后，popup中，放置一个平台选择，如shop、淘宝等等，就用你说的Manifest配置来循环，当指定后，点击立即爬取即打开一个新的浏览器窗口
+3.因为扩展是必须目标网页在前台才能爬取数据，而打开新tab会导致用户不能干别的，不够自动，所以要打开新的窗口
+4.爬取时的交互逻辑这样，当打开窗口后，在所有网页的右下角（包括新打开的浏览器窗口和当前的，因为我想让用户知道有东西在后台跑）都放一个按钮，显示脚本运行了多长时间即00:00即可，当鼠标点击按钮后，就在按钮那弹出一个窗口，显示这个平台的网页爬取顺序，用时间轴那样表示进度，如果爬取成功就是绿色，失败了就变成了红色，显示爬取失败这样子
+5.当都完成后，3秒后自动关闭这个新的浏览器窗口
+6.在爬取过程中，点击扩展按钮时的popup内容和4中的点击按钮的窗口内容一致，都显示当前爬取的进度
+7.在窗口中记得显示一个取消按钮，点击后关闭窗口，取消爬取
+
+
+# 具体代码实现流程
+请阅读./step.md文档，并严格按照步骤进行执行

manifest.config.ts

@@ -0,0 +1,30 @@
+import { defineManifest } from '@crxjs/vite-plugin';
+import pkg from './package.json';
+
+export default defineManifest({
+  manifest_version: 3,
+  name: pkg.name,
+  version: pkg.version,
+  icons: {
+    48: 'public/logo.png',
+  },
+  action: {
+    default_icon: {
+      48: 'public/logo.png',
+    },
+    default_popup: 'src/popup/index.html',
+  },
+  options_page: 'src/options/index.html',
+  content_scripts: [
+    {
+      js: ['src/content/main.ts'],
+      matches: ['https://*/*', 'http://*/*'],
+    },
+  ],
+  host_permissions: ['https://*/*', 'http://*/*'],
+  permissions: ['storage', 'tabs', 'scripting', 'activeTab', 'windows'],
+  background: {
+    service_worker: 'src/background/index.ts',
+    type: 'module',
+  },
+});

message.js

@@ -0,0 +1,269 @@
+/**
+ * type：0普通元素(默认），1列表，2表格（带分页）
+ * condition:{
+ *      list:[]  点击条件
+ *      time:2000 点击后的等待世界
+ * }
+ * keys：子元素，如果type是0则是普通的键值，否则是数组键值
+ * tableParts：表格专用：兼容多table或分段table的情况
+ * pagination：分页配置，
+ */
+
+/**
+ * 数据类型
+ * 1. 纯文字或图片
+ * 2. 列表类型
+ * 3.row布局下的子元素（综合1和2的）
+ * 4. 列表
+ */
+
+(async function () {
+    let column = [
+        {
+            label: "低星评论",
+            className: ".border-solid.rounded",
+            condition: {
+                list: [
+                    ".flex.items-center.mt-6 div:nth-child(3)",
+                    ".eds-react-checkbox-group label:nth-child(2)",
+                    ".eds-react-checkbox-group label:nth-child(3)",
+                    ".eds-react-checkbox-group label:nth-child(4)"
+                ],
+                time: 200,
+            },
+            type: 1,
+            keys: [
+                {
+                    label: "用户",
+                    className: ".flex.items-center.justify-start .ml-2"
+                },
+                {
+                    label: "订单编号",
+                    className: ".underline.px-1"
+                },
+                {
+                    label: "商品名称",
+                    className: ".min-w-0.font-medium.break-all"
+                },
+                {
+                    label: "规格",
+                    className: ".min-w-0.font-medium.break-all + div"
+                },
+                {
+                    label: "评价内容",
+                    className: ".min-w-0.overflow-hidden",
+                    condition: {
+                        list: [
+                            "span.cursor-pointer"
+                        ],
+                        time: 200,
+                    },
+
+                },
+            ],
+            pagination: {
+                nextBtn: ".eds-react-pagination-pager__button-next",
+                maxPage: 2, // 最大爬取页数
+                delay: 2000 // 翻页后的等待加载时间
+            },
+
+        },
+    ]
+    //自定义睡眠
+    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms || 1500));
+
+    /**
+     * 递归结构
+     * @param {*列表} columns 
+     * @param {* 父dom节点} dom 
+     * @returns 
+     */
+    async function process(columns, dom) {
+        if (!dom) return null;
+        let result = {}
+        for (const item of columns) {
+            //判断条件，如果存在执行点击
+            await autoClick(item, dom)
+
+            const element = dom.querySelector(item.className);
+            //如果不存在
+            if (!element) {
+                result[item.label] = "没找到该元素"
+                continue;
+            }
+            //如果是普通元素
+            if (!item.type) {
+                //如果是row布局
+                if (item.keys && item.keys.length > 0) {
+                    await autoClick(item, element)
+                    result[item.label] = await process(item.keys, element);
+                } else {
+                    await autoClick(item, element)
+                    //正常取值
+                    result[item.label] = extractValue(element, item);
+                }
+            } else if (item.type == 1) {
+                result[item.label] = await processList(item, dom)
+            } else if (item.type == 2) {
+                result[item.label] = await processTable(item, element)
+            }
+        }
+
+        return result
+    }
+
+    /**
+     * 触发点击事件
+     */
+    async function autoClick(config, rootDom) {
+        if (config?.condition) {
+            for (const condition of config.condition.list) {
+                let targets = rootDom.querySelectorAll(condition)
+                for (const target of targets) {
+                    target.click();
+                    await sleep(config?.condition.time);
+                }
+            }
+        }
+    }
+
+    /**
+     * 提取具体值的辅助函数
+     */
+    function extractValue(el, config) {
+        // 如果指定提取某个属性（如 class, href, src, data-v 等）
+        if (config.attr) {
+            return (el.getAttribute(config.attr) || "").trim();
+        }
+        if (el == null) {
+            return "未找到"
+        }
+
+        const tagName = el.tagName;
+        if (tagName === "IMG") return el.getAttribute("src");
+        if (tagName === "A") {
+            let href = el.getAttribute("href");
+            return href && !href.startsWith("http") ? window.location.origin + href : href;
+        }
+
+        // 默认提取文字，并清洗
+        return el.innerText.replace(/\n/g, "").trim();
+    }
+
+    /**
+     * 提取列表的数据
+     * @param {*配置} config 
+     * @param {*父节点} rootDom 
+     */
+    async function processList(config, rootDom) {
+        let allList = [];
+        let pageCount = 0;
+        while (true) {
+            pageCount++;
+            const allElements = rootDom.querySelectorAll(config.className);
+
+            const elements = Array.from(allElements);
+            for (const element of elements) {
+                let itemData = await process(config.keys, element)
+                allList.push(itemData)
+            }
+            //1.如果没有配置分页，抓一页自动退出
+            if (!config.pagination) {
+                console.log("未配置分页信息，抓取单页后结束。");
+                break;
+            }
+            // 2.如果达到最大页数限制，强制停止
+            if (config.pagination.maxPage && pageCount >= config.pagination.maxPage) {
+                console.log("已达到配置的最大页数，停止。");
+                break;
+            }
+            // 3. 如果找不到下一页按钮，结束
+            const nextBtn = document.querySelector(config.pagination.nextBtn);
+            if (!nextBtn) {
+                console.log("未找到下一页按钮，抓取结束。");
+                break;
+            } else {
+                nextBtn.click();
+                await sleep(config.pagination.delay);
+            }
+        }
+        return allList
+
+    }
+
+    /**
+     * 提取表格的数据
+     */
+    async function processTable(config, rootDom) {
+        let allTableData = [];
+        let pageCount = 0;
+
+        while (true) {
+            pageCount++;
+            //锁定所有 Table Parts 的 tr
+            const partsNodes = {};
+
+            config.tableParts.forEach(part => {
+                partsNodes[part.name] = rootDom.querySelectorAll(`${part.select} tr`);
+            });
+
+
+            // //以第一个part的行数为准，进行横向扫描
+            const rowCount = partsNodes[config.tableParts[0].name]?.length || 0
+            for (let i = 0; i < rowCount; i++) {
+                let rowData = {};
+                //遍历keys，根据part映射，取对应的里面找
+                for (const keyItem of config.keys) {
+                    const targetRowNode = partsNodes[keyItem.part][i];
+
+                    if (targetRowNode) {
+                        //提取值
+                        if (keyItem.keys) {
+                            rowData[keyItem.label] = await process(keyItem.keys, targetRowNode)
+                        } else {
+                            rowData[keyItem.label] = extractValue(targetRowNode.querySelector(keyItem.className), keyItem);
+                        }
+                    }
+                }
+                allTableData.push(rowData);
+            }
+            //1.如果没有配置分页，抓一页自动退出
+            if (!config.pagination) {
+                console.log("未配置分页信息，抓取单页后结束。");
+                break;
+            }
+            // 2.如果达到最大页数限制，强制停止
+            if (config.pagination.maxPage && pageCount >= config.pagination.maxPage) {
+                console.log("已达到配置的最大页数，停止。");
+                break;
+            }
+            // 3. 如果找不到下一页按钮，结束
+            const nextBtn = document.querySelector(config.pagination.nextBtn);
+            if (!nextBtn) {
+                console.log("未找到下一页按钮，抓取结束。");
+                break;
+            }
+            // 4.检擦按钮是否被禁用
+            const isDisabled = config.pagination.disabledClass ? nextBtn.classList.contains(config.pagination.disabledClass) : nextBtn.disabled;
+
+            if (isDisabled) {
+                console.log("下一页按钮已禁用，抓取结束。");
+                break;
+            }
+
+            //下一页
+            nextBtn.click();
+            await sleep(config.pagination.delay);
+        }
+        return allTableData;
+    }
+
+
+
+    let data = await process(column, document.body)
+
+
+    console.log("==== 提取成功 ====");
+    console.log(data);
+    return data
+})()

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^3.0.4",
+    "vue": "^3.5.32",
+    "vue-router": "^5.0.6"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "^2.4.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/chrome": "^0.1.40",
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "sass": "^1.99.0",
+    "tailwindcss": "^4.2.4",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.4",
+    "vue-tsc": "^3.2.6"
+  }
+}

src/background/index.ts

@@ -0,0 +1,33 @@
+import { handleBackgroundCommand, handleInstalled, handleStartup, handleWindowRemoved } from './service';
+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);
+  return true;
+});
+
+chrome.windows.onRemoved.addListener((windowId) => {
+  void handleWindowRemoved(windowId);
+});
+
+/** 统一包装后台消息处理，确保异步错误能回给调用方。 */
+async function handleBackgroundMessage(
+  message: BackgroundCommand,
+  sendResponse: (response?: unknown) => void,
+) {
+  try {
+    const result = await handleBackgroundCommand(message);
+    sendResponse(result);
+  } catch (error: unknown) {
+    const messageText = error instanceof Error ? error.message : 'Unknown error';
+    sendResponse({ ok: false, error: messageText });
+  }
+}

src/background/service.ts

@@ -0,0 +1,18 @@
+import type { BackgroundCommand } from './types';
+
+export async function handleInstalled(): Promise<void> {
+  console.log('[background] installed');
+}
+
+export async function handleStartup(): Promise<void> {
+  console.log('[background] startup');
+}
+
+export async function handleWindowRemoved(windowId: number): Promise<void> {
+  console.log('[background] window removed', windowId);
+}
+
+export async function handleBackgroundCommand(message: BackgroundCommand): Promise<unknown> {
+  console.log('[background] message', message);
+  return { ok: true };
+}

src/background/types.ts

@@ -0,0 +1,4 @@
+export interface BackgroundCommand {
+  action: string;
+  payload?: unknown;
+}

src/config/platforms.ts

@@ -0,0 +1,130 @@
+
+import type { PlatformConfig } from '@/types';
+
+export const PLATFORM_CONFIGS: PlatformConfig[] = [
+    {
+        id: 'Shopee',
+        name: 'Shopee 后台',
+        baseUrl: 'https://seller.shopee.com.my/',
+        steps: [
+            {
+                name: '数据看板',
+                uniqueKey: 'databoard',
+                url: 'https://seller.shopee.com.my/',
+                checkSelector: '.rate-manager-content',
+                fields: [
+                    {
+                        label: "出货统计",
+                        className: ".status .custom-row",
+                        keys: [
+                            {
+                                label: "待处理出货",
+                                className: ".custom-col-5:nth-child(1) .item-title"
+                            },
+                            {
+                                label: "已处理出货",
+                                className: ".custom-col-5:nth-child(2) .item-title"
+                            },
+                            {
+                                label: "退货/退款/取消",
+                                className: ".custom-col-5:nth-child(3) .item-title"
+                            },
+                            {
+                                label: "已禁止/压制商品",
+                                className: ".custom-col-5:nth-child(4) .item-title"
+                            },
+                        ]
+                    },
+                    {
+                        label: "商业分析",
+                        className: ".data-dashboard-async-data-wrapper .custom-row",
+                        keys: [
+                            {
+                                label: "销售",
+                                className: ".custom-col-5:nth-child(1) ",
+                                keys: [
+                                    { label: "value", className: ".dashboard-item-value" },
+                                    { label: "change", className: ".dashboard-item-rate-number" }
+                                ]
+                            },
+                            {
+                                label: "访客数",
+                                className: ".custom-col-5:nth-child(2) ",
+                                keys: [
+                                    { label: "value", className: ".dashboard-item-value" },
+                                    { label: "change", className: ".dashboard-item-rate-number" }
+                                ]
+                            },
+                            {
+                                label: "Product Clicks",
+                                className: ".custom-col-5:nth-child(3)",
+                                keys: [
+                                    { label: "value", className: ".dashboard-item-value" },
+                                    { label: "change", className: ".dashboard-item-rate-number" }
+                                ]
+                            },
+                            {
+                                label: "订单",
+                                className: ".custom-col-5:nth-child(4)",
+                                keys: [
+                                    { label: "value", className: ".dashboard-item-value" },
+                                    { label: "change", className: ".dashboard-item-rate-number" }
+                                ]
+                            },
+                            {
+                                label: "Order Conversion Rate",
+                                className: ".custom-col-5:nth-child(5)",
+                                keys: [
+                                    { label: "value", className: ".dashboard-item-value" },
+                                    { label: "change", className: ".dashboard-item-rate-number" }
+                                ]
+                            },
+                        ]
+                    },
+                    {
+                        label: "Shopee广告",
+                        className: ".ads-data-container",
+                        keys: [
+                            {
+                                label: "广告余额",
+                                className: ".ads-data-cell:nth-of-type(1) ",
+                                keys: [
+                                    { label: "value", className: ".ads-data-report-number" },
+                                ]
+                            },
+                            {
+                                label: "销售额",
+                                className: ".ads-data-cell:nth-child(3) ",
+                                keys: [
+                                    { label: "value", className: ".ads-data-report-number" },
+                                    { label: "change", className: ".ratio " }
+                                ]
+                            },
+                            {
+                                label: "花费",
+                                className: ".ads-data-cell:nth-child(4)",
+                                keys: [
+                                    { label: "value", className: ".ads-data-report-number" },
+                                    { label: "change", className: ".ratio " }
+                                ]
+                            },
+                            {
+                                label: "广告支出回报率",
+                                className: ".ads-data-cell:nth-child(5)",
+                                keys: [
+                                    { label: "value", className: ".ads-data-report-number" },
+                                    { label: "change", className: ".ratio " }
+                                ]
+                            },
+                        ]
+                    },
+                ],
+            },
+        ],
+    },
+]
+
+/** 根据平台 ID 返回对应的平台抓取配置。 */
+export function getPlatformById(platformId: string) {
+    return PLATFORM_CONFIGS.find((item) => item.id === platformId) ?? null;
+}

src/content/App.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template></template>
+
+<style lang="scss"></style>

src/content/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+/** 将内容脚本应用挂载到页面的 Shadow DOM 中。 */
+function mountApp() {
+  if (document.getElementById('dianshan-crx-root')) {
+    return;
+  }
+
+  const container = document.createElement('div');
+  container.id = 'dianshan-crx-root';
+
+  const shadowRoot = container.attachShadow({ mode: 'open' });
+  const appRoot = document.createElement('div');
+  shadowRoot.appendChild(appRoot);
+  document.documentElement.appendChild(container);
+
+  createApp(App).mount(appRoot);
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', mountApp, { once: true });
+} else {
+  mountApp();
+}

src/options/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <main class="page">
+    <h1>店闪设置</h1>
+    <p>当前版本先以内置平台配置和 popup 控制为主，这里预留给后续高级设置。</p>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  padding: 32px;
+  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
+  background: #f5efe3;
+  color: #193144;
+}
+
+h1 {
+  margin: 0 0 12px;
+}
+
+p {
+  margin: 0;
+}
+</style>

src/options/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="./main.ts"></script>
+</body>
+</html>
+

src/options/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+

src/popup/App.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { PLATFORM_CONFIGS } from '@/config/platforms';
+import { getToken, logout, mockLogin } from '@/shared/auth';
+
+const token = ref<string | null>(null);
+const selectedPlatformId = ref(PLATFORM_CONFIGS[0]?.id ?? '');
+const isLoading = ref(true);
+const isScanning = ref(false);
+const errorMessage = ref('');
+
+const manifest = getRuntimeManifest();
+const extensionName = manifest?.name ?? '店闪';
+const extensionVersion = manifest?.version ?? '0.0.0';
+const extensionDescription =
+    manifest?.description || '自动打开商家后台，按平台配置顺序采集页面数据。';
+
+const selectedPlatform = computed(() =>
+    PLATFORM_CONFIGS.find((platform) => platform.id === selectedPlatformId.value) ?? null,
+);
+
+const isLoggedIn = computed(() => token.value !== null);
+
+onMounted(async () => {
+    token.value = await getToken();
+    isLoading.value = false;
+});
+
+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 {
+        await openPlatformWindow(selectedPlatform.value.baseUrl);
+    } catch (error: unknown) {
+        errorMessage.value = error instanceof Error ? error.message : '打开平台窗口失败';
+    } finally {
+        isScanning.value = false;
+    }
+}
+
+function openPlatformWindow(url: string): Promise<void> {
+    if (typeof chrome === 'undefined' || !chrome.windows?.create) {
+        window.open(url, '_blank', 'width=1280,height=900');
+        return Promise.resolve();
+    }
+
+    return new Promise((resolve, reject) => {
+        chrome.windows.create(
+            {
+                url,
+                type: 'popup',
+                focused: true,
+                width: 1280,
+                height: 900,
+            },
+            () => {
+                const runtimeError = chrome.runtime.lastError;
+
+                if (runtimeError) {
+                    reject(new Error(runtimeError.message));
+                    return;
+                }
+
+                resolve();
+            },
+        );
+    });
+}
+
+function getRuntimeManifest(): chrome.runtime.Manifest | null {
+    if (typeof chrome === 'undefined' || !chrome.runtime?.getManifest) {
+        return null;
+    }
+
+    return chrome.runtime.getManifest();
+}
+</script>
+
+<template>
+    <main class="w-80 bg-slate-50 text-slate-900">
+        <section class="flex min-h-64 flex-col gap-5 p-5">
+            <header class="space-y-2">
+                <p class="text-lg font-semibold leading-6">{{ extensionName }}</p>
+                <p class="text-sm leading-5 text-slate-600">{{ extensionDescription }}</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">
+                <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"
+                    @click="handleLogin">
+                    请登录
+                </button>
+            </template>
+
+            <template v-else>
+                <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">
+                        <option v-for="platform in PLATFORM_CONFIGS" :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"
+                    :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">
+                    退出
+                </button>
+                <span v-else></span>
+                <span>v{{ extensionVersion }}</span>
+            </footer>
+        </section>
+    </main>
+</template>
+
+<style>
+@import "tailwindcss";
+</style>

src/popup/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="./main.ts"></script>
+</body>
+</html>
+

src/popup/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
+

src/shared/auth.ts

@@ -0,0 +1,52 @@
+const AUTH_TOKEN_KEY = 'token';
+const MOCK_TOKEN = 'mock-extension-token';
+
+/** 获取当前登录 token。 */
+export async function getToken(): Promise<string | null> {
+    const storage = getChromeStorage();
+
+    if (storage) {
+        const result = await storage.get(AUTH_TOKEN_KEY);
+        const value = result[AUTH_TOKEN_KEY];
+        return typeof value === 'string' && value.length > 0 ? value : null;
+    }
+
+    return window.localStorage.getItem(AUTH_TOKEN_KEY);
+}
+
+/** 模拟登录，写入一个临时 token，方便后续替换真实登录逻辑。 */
+export async function mockLogin(): Promise<string> {
+    await setToken(MOCK_TOKEN);
+    return MOCK_TOKEN;
+}
+
+/** 清除当前登录 token。 */
+export async function logout(): Promise<void> {
+    const storage = getChromeStorage();
+
+    if (storage) {
+        await storage.remove(AUTH_TOKEN_KEY);
+        return;
+    }
+
+    window.localStorage.removeItem(AUTH_TOKEN_KEY);
+}
+
+async function setToken(token: string): Promise<void> {
+    const storage = getChromeStorage();
+
+    if (storage) {
+        await storage.set({ [AUTH_TOKEN_KEY]: token });
+        return;
+    }
+
+    window.localStorage.setItem(AUTH_TOKEN_KEY, token);
+}
+
+function getChromeStorage(): chrome.storage.StorageArea | null {
+    if (typeof chrome === 'undefined' || !chrome.storage?.local) {
+        return null;
+    }
+
+    return chrome.storage.local;
+}

src/types/index.ts

@@ -0,0 +1,9 @@
+export type {
+  PlatformClickCondition,
+  PlatformConfig,
+  PlatformFieldConfig,
+  PlatformFieldType,
+  PlatformPaginationConfig,
+  PlatformStepConfig,
+  PlatformTablePartConfig,
+} from './platform';

src/types/platform.ts

@@ -0,0 +1,94 @@
+/**
+ * 字段采集类型：0 普通元素（默认），1 列表，2 表格（带分页）。
+ */
+export type PlatformFieldType = 0 | 1 | 2;
+
+/**
+ * 条件点击配置，用于进入某个页面或采集某个字段前按顺序点击页面元素。
+ */
+export interface PlatformClickCondition {
+    /** 需要点击的元素选择器列表，会按数组顺序依次执行。 */
+    list: string[];
+    /** 点击后的等待时间，单位毫秒。 */
+    time: number;
+}
+
+/**
+ * 分页配置，用于列表或表格字段存在翻页时控制下一页采集。
+ */
+export interface PlatformPaginationConfig {
+    /** 下一页按钮的 CSS 选择器。 */
+    nextBtn: string;
+    /** 最多采集页数，避免无限翻页。 */
+    maxPage?: number;
+    /** 每次翻页后的等待时间，单位毫秒。 */
+    delay?: number;
+    /** 下一页按钮不可用时的 class 名称。 */
+    disabledClass?: string;
+}
+
+/**
+ * 表格分段配置，用于兼容一个数据块由多个 table 或多个 table 片段组成的情况。
+ */
+export interface PlatformTablePartConfig {
+    /** 当前 table 或表格片段的名称。 */
+    label: string;
+    /** 当前 table 或表格片段的 CSS 选择器。 */
+    className: string;
+    /** 行元素选择器，不填时由采集逻辑使用默认行选择器。 */
+    rowSelector?: string;
+    /** 当前 table 或表格片段下需要采集的字段。 */
+    keys?: PlatformFieldConfig[];
+}
+
+/**
+ * 页面字段配置，描述一个普通元素、列表元素或表格元素如何从 DOM 中提取数据。
+ */
+export interface PlatformFieldConfig {
+    /** 字段显示名，也是最终打印数据中的键名。 */
+    label: string;
+    /** 字段对应的 CSS 选择器。 */
+    className: string;
+    /** 字段类型：0 普通元素（默认），1 列表，2 表格。 */
+    type?: PlatformFieldType;
+    /** 进入该字段采集前需要执行的点击条件。 */
+    condition?: PlatformClickCondition;
+    /** 子元素字段；普通元素下表示嵌套键值，列表或表格下表示每项/每行的字段。 */
+    keys?: PlatformFieldConfig[];
+    /** 表格专用配置，用于多个 table 或分段 table 的组合采集。 */
+    tableParts?: PlatformTablePartConfig[];
+    /** 分页配置，常用于列表和表格字段。 */
+    pagination?: PlatformPaginationConfig;
+}
+
+/**
+ * 单个抓取页面步骤配置，描述页面地址、可用性检查和需要采集的字段。
+ */
+export interface PlatformStepConfig {
+    /** 步骤显示名，用于进度展示。 */
+    name: string;
+    /** 步骤唯一标识，用于状态记录和结果归类。 */
+    uniqueKey: string;
+    /** 当前步骤需要打开或跳转到的页面地址。 */
+    url: string;
+    /** 判断页面 DOM 是否加载完成的 CSS 选择器。 */
+    checkSelector: string;
+    /** 当前页面需要采集的字段列表。 */
+    fields: PlatformFieldConfig[];
+    /** 进入该步骤前需要执行的点击条件。 */
+    condition?: PlatformClickCondition;
+}
+
+/**
+ * 平台抓取配置，描述一个商家后台平台的入口地址和页面抓取顺序。
+ */
+export interface PlatformConfig {
+    /** 平台唯一标识，用于 popup 选择和后台任务定位。 */
+    id: string;
+    /** 平台显示名称。 */
+    name: string;
+    /** 平台后台首页或默认入口地址。 */
+    baseUrl: string;
+    /** 当前平台的页面抓取顺序。 */
+    steps: PlatformStepConfig[];
+}

step.md

@@ -0,0 +1,47 @@
+# 项目结构
+```angular2html
+src:.
+├─assets              # 静态资源目录
+│      vite.svg       # 这里的资源通常用于图标、Logo 或扩展程序内部引用的图片
+│
+├─background          # 后台脚本 (Background Script / Service Worker)
+│      index.ts       # 扩展的“大脑”，常驻后台运行，处理事件监听、报文转发、存储管理等
+│
+├─config              # 配置目录
+│      platforms.ts   # 自定义配置，各种平台（如不同网站、不同浏览器）的适配配置
+│
+├─content             # 内容脚本 (Content Script)
+│  │  App.vue         # 注入到网页中的 UI 组件（通常用于在目标页面侧边栏或浮窗显示界面）
+│  │  main.ts         # 内容脚本的入口文件，负责将 Vue 组件挂载到宿主页面的 DOM 中
+│  │
+│  └─views            # 内容脚本相关的子视图或组件
+│
+├─options             # 选项页 (Options Page)
+│      App.vue        # 扩展设置页面的 UI（右键扩展图标点击“选项”打开的页面）
+│      index.html     # 选项页的 HTML 宿主文件
+│      main.ts        # 选项页的 Vue 入口文件
+│
+├─popup               # 弹窗页 (Popup Page)
+│      App.vue        # 点击扩展图标时显示的弹出框 UI
+│      index.html     # 弹窗页的 HTML 宿主文件
+│      main.ts        # 弹窗页的 Vue 入口文件
+│
+├─shared              # 共享代码库 (Shared)
+│                     # 存放被 background、content、popup 等多个模块共同引用的工具函数、常量、API封装等
+│
+└─types               # 类型定义目录
+        index.ts      # 存放全局的 TypeScript 接口（Interface）和类型（Type）定义
+```
+
+# 开发步骤
+1.在popup模块中的App.vue中用tailwindcss编写，点击扩展图标时出现的弹窗，逻辑如下
+  - 在未登录情况下，即storage中token字段是否存在，如果不存在，弹窗内容只用显示扩展名字、描述、请登录按钮，底部扩展版本
+  - 当点击登录按钮后，先模拟登录，写死token，之后ui如下
+    - 显示扩展名字、描述、一个平台选择框（通过读取config/platforms.ts)的内容for循环显示平台、扫描按钮、最底部Row（退出按钮，扩展版本号）
+  - 注意：token的存储和获取逻辑放到/shared/auth.ts中去，如果涉及到接口和枚举的定义，请判断是否是全局类型
+    - 如果是，该类型写到一个新文件中，并放到types/下，如果不是，放到当前模块的types/目录下（如果没用，新建）
+
+2.前提：当1完成后，点击popup的立即爬取已经可以打开一个新的窗口了
+ - 在所有网页（包括新打开的窗口和所有网页）的右下角都放一个圆形正计时（表示正在爬取中）
+ - 点击圆形正计时时，出现一个popup，以时间轴的形式，表示当前爬取进度，即：根据platforms.ts中配置的这个平台有多少个网页要爬
+ - 同时点击扩展的popup里的内容，也变得和上面的时间轴内容一致，显示爬取进度，隐藏立即爬取等按钮，

tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "vite/client",
+      "@crxjs/vite-plugin/client",
+      "chrome"
+    ],
+    "allowImportingTsExtensions": true,
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./manifest.config.ts","./message.js","./vite.config.ts","./src/background/index.ts","./src/background/service.ts","./src/background/types.ts","./src/config/platforms.ts","./src/content/app.vue","./src/content/main.ts","./src/options/app.vue","./src/options/main.ts","./src/popup/app.vue","./src/popup/main.ts","./src/shared/auth.ts","./src/types/index.ts","./src/types/platform.ts"],"version":"5.9.3"}

vite.config.ts

@@ -0,0 +1,27 @@
+import path from 'node:path'
+import {crx} from '@crxjs/vite-plugin'
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+import {defineConfig} from 'vite'
+import manifest from './manifest.config.ts'
+
+export default defineConfig({
+    resolve: {
+        alias: {
+            '@': `${path.resolve(__dirname, 'src')}`,
+        },
+    },
+    plugins: [
+        tailwindcss(),
+        vue(),
+        crx({manifest}),
+        // zip({ outDir: 'release', outFileName: `crx-${name}-${version}.zip` }),
+    ],
+    server: {
+        cors: {
+            origin: [
+                /chrome-extension:\/\//,
+            ],
+        },
+    },
+})