zhutao/store_ai_extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
zhu
2026-05-09 17:16:08 +08:00
parent 6587b0c1d9
commit 30f9467cc8
14 changed files with 256 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
manifest.config.ts
View File

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

46
src/background/index.ts
View File

@@ -1,35 +1,41 @@
import { handleBackgroundCommand, handleInstalled, handleStartup, handleWindowRemoved } from './service';
import type { BackgroundCommand } from './types';
import {handleBackgroundCommand, 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;
void handleBackgroundMessage(message, sendResponse);
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,
sendResponse: (response?: unknown) => void,
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 });
}
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});
}
}

7
src/background/service/crawlTask.ts
View File

@@ -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);

4
src/config/platforms.ts
View File

@@ -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;
}

4
src/content/pageRunner.ts
View File

@@ -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;
}

199
src/popup/App.vue
View File

@@ -1,118 +1,44 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { PLATFORM_CONFIGS } from '@/config/platforms';
import { getToken, logout, mockLogin } from '@/shared/auth';
import type { CrawlTaskState } from '@/types';
import {useLogin} from "./hook/use-login";
import {platformConfigs} from "@/config/platforms";
import {useScan} from "./hook/use-scan";
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 errorMessage = ref('');
const crawlState = ref<CrawlTaskState | null>(null);
const elapsedSeconds = ref(0);
let timer: number | undefined;
/**
* 登录逻辑
*/
const {isLoggedIn, handleLogin, handleLogout} = useLogin()
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"
@click="handleLogin">
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>
@@ -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"
class="text-xs text-emerald-600 transition hover:text-emerald-700"
@click="handleResumeCrawl">
继续
</button>
<!-- <button v-if="crawlState.status === 'paused'" type="button"-->
<!-- class="text-xs text-emerald-600 transition hover:text-emerald-700"-->
<!-- @click="handleResumeCrawl">-->
<!-- 继续-->
<!-- </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
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>
<span
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>
<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">
<option v-for="platform in PLATFORM_CONFIGS" :key="platform.id" :value="platform.id">
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 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"
:disabled="isScanning" @click="handleScan">
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">
@click="handleLogout">
退出
</button>
<span v-else></span>

35
src/popup/hook/use-login.ts Normal file
View File

@@ -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,
}
}

85
src/popup/hook/use-scan.ts Normal file
View File

@@ -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,
}
}

11
src/shared/auth.ts
View File

@@ -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) {

24
src/shared/message.ts Normal file
View File

@@ -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);
}

9
src/shared/time_format.ts Normal file
View File

@@ -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}`;
}

4
src/types/crawl.ts
View File

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

2
tsconfig.json
View File

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