1

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[];
+}