Compare commits

..

1 Commits

Author SHA1 Message Date
Cursor Agent 6776a89003 fix: 修复路由初始化竞态、存储状态静默覆盖与存储清理误删 2026-06-26 09:12:58 +00:00
19 changed files with 199 additions and 374 deletions
@@ -1,11 +1,8 @@
import { renderHook, act, waitFor } from '@testing-library/react'; import { renderHook, act, waitFor } from '@testing-library/react';
import { useRightClickRestorer } from '../useRightClickRestorer'; import { useRightClickRestorer } from '../useRightClickRestorer';
import { sendMessageToContent } from '@/utils/messages'; import { sendMessageToContent } from '@/utils/messages';
import { getCurrentTab } from '@/utils/chromeTabs';
vi.mock('@/utils/chromeTabs', () => ({ const mockTabsQuery = vi.fn();
getCurrentTab: vi.fn(),
}));
vi.mock('@/utils/messages', () => ({ vi.mock('@/utils/messages', () => ({
MessageAction: { MessageAction: {
@@ -17,9 +14,8 @@ vi.mock('@/utils/messages', () => ({
beforeEach(() => { beforeEach(() => {
vi.clearAllMocks(); vi.clearAllMocks();
vi.mocked(getCurrentTab).mockResolvedValue({ mockTabsQuery.mockResolvedValue([{ url: 'https://example.com/path' }]);
url: 'https://example.com/path', chrome.tabs.query = mockTabsQuery;
} as chrome.tabs.Tab);
vi.mocked(sendMessageToContent).mockResolvedValue({ success: true, restored: false }); vi.mocked(sendMessageToContent).mockResolvedValue({ success: true, restored: false });
}); });
@@ -35,7 +31,8 @@ describe('useRightClickRestorer', () => {
}); });
it('should mark internal pages as unsupported', async () => { it('should mark internal pages as unsupported', async () => {
vi.mocked(getCurrentTab).mockResolvedValue({ url: 'chrome://newtab/' } as chrome.tabs.Tab); mockTabsQuery.mockResolvedValue([{ url: 'chrome://newtab/' }]);
chrome.tabs.query = mockTabsQuery;
const { result } = renderHook(() => useRightClickRestorer()); const { result } = renderHook(() => useRightClickRestorer());
@@ -62,7 +59,8 @@ describe('useRightClickRestorer', () => {
}); });
it('should not unlock unsupported pages', async () => { it('should not unlock unsupported pages', async () => {
vi.mocked(getCurrentTab).mockResolvedValue({ url: 'chrome://settings/' } as chrome.tabs.Tab); mockTabsQuery.mockResolvedValue([{ url: 'chrome://settings/' }]);
chrome.tabs.query = mockTabsQuery;
const { result } = renderHook(() => useRightClickRestorer()); const { result } = renderHook(() => useRightClickRestorer());
@@ -1,5 +1,4 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { getCurrentTab } from '@/utils/chromeTabs';
import { MessageAction, sendMessageToContent } from '@/utils/messages'; import { MessageAction, sendMessageToContent } from '@/utils/messages';
import { isUnsupportedPageUrl } from '@/utils/restrictedUrls'; import { isUnsupportedPageUrl } from '@/utils/restrictedUrls';
import type { RestorerStatus } from './constants'; import type { RestorerStatus } from './constants';
@@ -25,7 +24,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
useEffect(() => { useEffect(() => {
const load = async () => { const load = async () => {
try { try {
const tab = await getCurrentTab(); const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
const url = tab?.url; const url = tab?.url;
setDomain(url ? new URL(url).hostname : ''); setDomain(url ? new URL(url).hostname : '');
@@ -2,8 +2,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { beforeEach, describe, it, expect, vi } from 'vitest'; import { beforeEach, describe, it, expect, vi } from 'vitest';
import { browser } from 'wxt/browser'; import { browser } from 'wxt/browser';
import Index from '../index'; import Index from '../index';
import { clearStorage, getCookieSize } from '@/utils/storageCleaner'; import { clearStorage, getCookieSize, getCurrentTab } from '@/utils/storageCleaner';
import { getCurrentTab } from '@/utils/chromeTabs';
import { toast } from 'sonner'; import { toast } from 'sonner';
// Mock the chrome APIs // Mock the chrome APIs
@@ -14,11 +13,8 @@ vi.mock('@/utils/chromeStorage', () => ({
}, },
})); }));
vi.mock('@/utils/chromeTabs', () => ({
getCurrentTab: vi.fn().mockResolvedValue({ id: 1, url: 'https://example.com' }),
}));
vi.mock('@/utils/storageCleaner', () => ({ vi.mock('@/utils/storageCleaner', () => ({
getCurrentTab: vi.fn().mockResolvedValue({ id: 1, url: 'https://example.com' }),
getCookieSize: vi.fn().mockResolvedValue(0), getCookieSize: vi.fn().mockResolvedValue(0),
getLocalStorageSize: vi.fn().mockResolvedValue(0), getLocalStorageSize: vi.fn().mockResolvedValue(0),
getSessionStorageSize: vi.fn().mockResolvedValue(0), getSessionStorageSize: vi.fn().mockResolvedValue(0),
@@ -107,4 +103,31 @@ describe('StorageCleaner 页面', () => {
expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled(); expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
}); });
}); });
it('展示的数据与当前标签页不一致时不应执行清理', async () => {
let currentTabId = 1;
vi.mocked(getCurrentTab).mockImplementation(
async () =>
({
id: currentTabId,
url: currentTabId === 1 ? 'https://a.example.com' : 'https://b.example.com',
}) as any,
);
render(<Index />);
await waitFor(() => {
expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
});
currentTabId = 2;
fireEvent.click(screen.getByRole('button', { name: /立即清理/ }));
fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
await waitFor(() => {
expect(clearStorage).not.toHaveBeenCalled();
expect(toast.warning).toHaveBeenCalledWith('当前标签页已切换,请等待数据刷新后再清理');
});
});
}); });
+2 -1
View File
@@ -15,6 +15,7 @@ export default function Index() {
sizes, sizes,
reloadAfterClean, reloadAfterClean,
loading, loading,
isRefreshingSizes,
result, result,
showConfirm, showConfirm,
setShowConfirm, setShowConfirm,
@@ -26,7 +27,7 @@ export default function Index() {
handleClean, handleClean,
} = useStorageCleaner(); } = useStorageCleaner();
const isButtonDisabled = !(someSelected || allSelected) || loading; const isButtonDisabled = !(someSelected || allSelected) || loading || isRefreshingSizes;
if (isInitializing) { if (isInitializing) {
return ( return (
+15 -1
View File
@@ -10,12 +10,12 @@ import {
clearStorage, clearStorage,
getCacheStorageSize, getCacheStorageSize,
getCookieSize, getCookieSize,
getCurrentTab,
getLocalStorageSize, getLocalStorageSize,
getOriginStorageEstimate, getOriginStorageEstimate,
getServiceWorkerCount, getServiceWorkerCount,
getSessionStorageSize, getSessionStorageSize,
} from '@/utils/storageCleaner'; } from '@/utils/storageCleaner';
import { getCurrentTab } from '@/utils/chromeTabs';
import { isRestrictedUrl } from '@/utils/restrictedUrls'; import { isRestrictedUrl } from '@/utils/restrictedUrls';
import { toast } from 'sonner'; import { toast } from 'sonner';
@@ -75,6 +75,7 @@ export interface UseStorageCleanerReturn {
sizes: Record<string, StorageSizeInfo>; sizes: Record<string, StorageSizeInfo>;
reloadAfterClean: boolean; reloadAfterClean: boolean;
loading: boolean; loading: boolean;
isRefreshingSizes: boolean;
result: CleaningResult | null; result: CleaningResult | null;
showConfirm: boolean; showConfirm: boolean;
setShowConfirm: (show: boolean) => void; setShowConfirm: (show: boolean) => void;
@@ -95,10 +96,12 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
const [sizes, setSizes] = useState<Record<string, StorageSizeInfo>>({}); const [sizes, setSizes] = useState<Record<string, StorageSizeInfo>>({});
const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true); const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [isRefreshingSizes, setIsRefreshingSizes] = useState<boolean>(false);
const [result, setResult] = useState<CleaningResult | null>(null); const [result, setResult] = useState<CleaningResult | null>(null);
const [showConfirm, setShowConfirm] = useState<boolean>(false); const [showConfirm, setShowConfirm] = useState<boolean>(false);
const requestIdRef = useRef<number>(0); const requestIdRef = useRef<number>(0);
const boundTabRef = useRef<{ id: number; url: string } | null>(null);
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null); const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
const storageTimerRef = useRef<NodeJS.Timeout | null>(null); const storageTimerRef = useRef<NodeJS.Timeout | null>(null);
const loadingRef = useRef(loading); const loadingRef = useRef(loading);
@@ -117,6 +120,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
// 核心数据拉取链条 // 核心数据拉取链条
const loadInfo = useCallback(async () => { const loadInfo = useCallback(async () => {
const currentRequestId = ++requestIdRef.current; const currentRequestId = ++requestIdRef.current;
setIsRefreshingSizes(true);
try { try {
const tab = await getCurrentTab(); const tab = await getCurrentTab();
if (currentRequestId !== requestIdRef.current) return; if (currentRequestId !== requestIdRef.current) return;
@@ -159,6 +163,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
cacheStorage: { value: cacheCount, displayType: 'count' }, cacheStorage: { value: cacheCount, displayType: 'count' },
serviceWorkers: { value: swCount, displayType: 'count' }, serviceWorkers: { value: swCount, displayType: 'count' },
}); });
boundTabRef.current = { id: tabId, url };
} catch (err) { } catch (err) {
console.error('Failed to load storage cleaner info:', err); console.error('Failed to load storage cleaner info:', err);
if (currentRequestId === requestIdRef.current) { if (currentRequestId === requestIdRef.current) {
@@ -167,6 +172,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
} finally { } finally {
if (currentRequestId === requestIdRef.current) { if (currentRequestId === requestIdRef.current) {
setIsInitializing(false); setIsInitializing(false);
setIsRefreshingSizes(false);
} }
} }
}, []); }, []);
@@ -256,6 +262,13 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
return; return;
} }
const boundTab = boundTabRef.current;
if (!boundTab || boundTab.id !== tab.id) {
toast.warning('当前标签页已切换,请等待数据刷新后再清理');
setShowConfirm(false);
return;
}
setLoading(true); setLoading(true);
setShowConfirm(false); setShowConfirm(false);
try { try {
@@ -297,6 +310,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
sizes, sizes,
reloadAfterClean, reloadAfterClean,
loading, loading,
isRefreshingSizes,
result, result,
showConfirm, showConfirm,
setShowConfirm, setShowConfirm,
@@ -1,117 +0,0 @@
import { act, renderHook, waitFor } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { useGenerator } from '@/pages/TestDataGenerator/hooks/useGenerator';
import type { FieldConfig, WorkerResponseMessage } from '@/types/testDataGenerator';
const mockField: FieldConfig = {
id: 'field-1',
name: 'username',
generatorId: 'string',
params: {},
required: true,
nullRate: 0,
unique: false,
};
type WorkerListener = (event: MessageEvent<WorkerResponseMessage>) => void;
class MockWorker {
static instances: MockWorker[] = [];
onmessage: WorkerListener | null = null;
onerror: ((event: ErrorEvent) => void) | null = null;
postedMessages: unknown[] = [];
constructor(_url: URL, _options?: WorkerOptions) {
MockWorker.instances.push(this);
}
postMessage(message: unknown) {
this.postedMessages.push(message);
}
terminate() {
const index = MockWorker.instances.indexOf(this);
if (index >= 0) {
MockWorker.instances.splice(index, 1);
}
}
emit(message: WorkerResponseMessage) {
this.onmessage?.({ data: message } as MessageEvent<WorkerResponseMessage>);
}
}
describe('useGenerator', () => {
beforeEach(() => {
MockWorker.instances = [];
vi.stubGlobal('Worker', MockWorker);
});
it('应忽略过期 generationId 的 complete 消息', async () => {
const { result } = renderHook(() => useGenerator());
act(() => {
result.current.generate([mockField], 10);
});
const worker = MockWorker.instances[0];
expect(worker).toBeDefined();
act(() => {
result.current.cancel();
});
act(() => {
result.current.generate([mockField], 5);
});
act(() => {
worker.emit({
type: 'complete',
generationId: 1,
payload: {
success: true,
data: [{ username: 'stale' }],
stats: { total: 10, success: 10, failed: 0, duration: 1 },
},
});
});
expect(result.current.result).toBeNull();
expect(result.current.isGenerating).toBe(true);
act(() => {
worker.emit({
type: 'complete',
generationId: 3,
payload: {
success: true,
data: [{ username: 'fresh' }],
stats: { total: 5, success: 5, failed: 0, duration: 1 },
},
});
});
await waitFor(() => {
expect(result.current.isGenerating).toBe(false);
});
expect(result.current.result?.data?.[0]).toEqual({ username: 'fresh' });
});
it('cancel 后应发送 cancel 消息并使 generationId 失效', () => {
const { result } = renderHook(() => useGenerator());
act(() => {
result.current.generate([mockField], 100);
});
const worker = MockWorker.instances[0];
act(() => {
result.current.cancel();
});
expect(result.current.isGenerating).toBe(false);
expect(worker.postedMessages).toEqual(expect.arrayContaining([{ type: 'cancel' }]));
});
});
@@ -8,8 +8,7 @@ import type {
FieldConfig, FieldConfig,
GenerateResult, GenerateResult,
GenerateProgress, GenerateProgress,
WorkerRequestMessage, WorkerMessage,
WorkerResponseMessage,
} from '@/types/testDataGenerator'; } from '@/types/testDataGenerator';
export interface UseGeneratorReturn { export interface UseGeneratorReturn {
@@ -36,7 +35,6 @@ export function useGenerator(): UseGeneratorReturn {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const workerRef = useRef<Worker | null>(null); const workerRef = useRef<Worker | null>(null);
const generationIdRef = useRef(0);
// 清理 Worker // 清理 Worker
useEffect(() => { useEffect(() => {
@@ -60,30 +58,22 @@ export function useGenerator(): UseGeneratorReturn {
type: 'module', type: 'module',
}); });
worker.onmessage = (e: MessageEvent<WorkerResponseMessage>) => { worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
const data = e.data; const data = e.data;
const { type } = data; const { type } = data;
if (data.generationId !== generationIdRef.current) {
return;
}
switch (type) { switch (type) {
case 'progress': case 'progress':
setProgress(data.payload); setProgress(data.payload as GenerateProgress);
break; break;
case 'complete': case 'complete':
setIsGenerating(false); setIsGenerating(false);
if (data.payload.success) { setResult(data.payload as GenerateResult);
setResult(data.payload);
} else if (data.payload.error && data.payload.error !== '生成已取消') {
setError(data.payload.error);
}
setProgress(null); setProgress(null);
break; break;
case 'error': case 'error':
setIsGenerating(false); setIsGenerating(false);
setError(data.payload.error); setError((data.payload as { error: string }).error);
setProgress(null); setProgress(null);
break; break;
} }
@@ -110,17 +100,15 @@ export function useGenerator(): UseGeneratorReturn {
(fields: FieldConfig[], count: number, csvMode = false) => { (fields: FieldConfig[], count: number, csvMode = false) => {
if (isGenerating) return; if (isGenerating) return;
const generationId = ++generationIdRef.current;
setIsGenerating(true); setIsGenerating(true);
setProgress(null); setProgress(null);
setResult(null); setResult(null);
setError(null); setError(null);
const worker = getWorker(); const worker = getWorker();
const message: WorkerRequestMessage = { const message: WorkerMessage = {
type: 'start', type: 'start',
payload: { generationId, fields, count, csvMode }, payload: { fields, count, csvMode },
}; };
worker.postMessage(message); worker.postMessage(message);
}, },
@@ -132,8 +120,7 @@ export function useGenerator(): UseGeneratorReturn {
*/ */
const cancel = useCallback(() => { const cancel = useCallback(() => {
if (workerRef.current && isGenerating) { if (workerRef.current && isGenerating) {
++generationIdRef.current; const message: WorkerMessage = { type: 'cancel' };
const message: WorkerRequestMessage = { type: 'cancel' };
workerRef.current.postMessage(message); workerRef.current.postMessage(message);
setIsGenerating(false); setIsGenerating(false);
setProgress(null); setProgress(null);
+14 -6
View File
@@ -105,6 +105,8 @@ export function RouterProvider({
); );
const [isLoaded, setIsLoaded] = useState(false); const [isLoaded, setIsLoaded] = useState(false);
const hasUserNavigatedRef = useRef(false);
const canPersistRef = useRef(false);
/** /**
* 从异步存储中安全溯源初始数据 * 从异步存储中安全溯源初始数据
@@ -119,7 +121,7 @@ export function RouterProvider({
const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder()); const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
const savedRecentTools = await storageUtil.get('app/recentlyUsedTools', []); const savedRecentTools = await storageUtil.get('app/recentlyUsedTools', []);
if (isValidPage(savedRoute) && syncRoute) { if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
setCurrentPage(savedRoute); setCurrentPage(savedRoute);
} }
if (isValidPageList(savedVisiblePages)) { if (isValidPageList(savedVisiblePages)) {
@@ -131,9 +133,11 @@ export function RouterProvider({
if (isValidPageList(savedRecentTools)) { if (isValidPageList(savedRecentTools)) {
setRecentlyUsedTools(savedRecentTools); setRecentlyUsedTools(savedRecentTools);
} }
setIsLoaded(true); canPersistRef.current = true;
} catch (error) { } catch (error) {
console.error('[Router Init Error] Core data fetch failed:', error); console.error('[Router Init Error] Core data fetch failed:', error);
} finally {
setIsLoaded(true);
} }
}, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]); }, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]);
@@ -187,7 +191,7 @@ export function RouterProvider({
}, [loadInitialData]); }, [loadInitialData]);
useEffect(() => { useEffect(() => {
if (isLoaded && syncRoute) { if (isLoaded && canPersistRef.current && syncRoute) {
void storageUtil.set(syncKey, currentPage as PageType).catch(console.error); void storageUtil.set(syncKey, currentPage as PageType).catch(console.error);
try { try {
localStorage.setItem(`snapshot/${syncKey}`, JSON.stringify(currentPage)); localStorage.setItem(`snapshot/${syncKey}`, JSON.stringify(currentPage));
@@ -198,7 +202,7 @@ export function RouterProvider({
}, [currentPage, isLoaded, syncRoute, syncKey]); }, [currentPage, isLoaded, syncRoute, syncKey]);
useEffect(() => { useEffect(() => {
if (isLoaded) { if (isLoaded && canPersistRef.current) {
void storageUtil.set(visiblePagesKey, visiblePages).catch(console.error); void storageUtil.set(visiblePagesKey, visiblePages).catch(console.error);
try { try {
localStorage.setItem(`snapshot/${visiblePagesKey}`, JSON.stringify(visiblePages)); localStorage.setItem(`snapshot/${visiblePagesKey}`, JSON.stringify(visiblePages));
@@ -209,7 +213,7 @@ export function RouterProvider({
}, [visiblePages, isLoaded, visiblePagesKey]); }, [visiblePages, isLoaded, visiblePagesKey]);
useEffect(() => { useEffect(() => {
if (isLoaded) { if (isLoaded && canPersistRef.current) {
void storageUtil.set(pageOrderKey, pageOrder).catch(console.error); void storageUtil.set(pageOrderKey, pageOrder).catch(console.error);
try { try {
localStorage.setItem(`snapshot/${pageOrderKey}`, JSON.stringify(pageOrder)); localStorage.setItem(`snapshot/${pageOrderKey}`, JSON.stringify(pageOrder));
@@ -220,7 +224,7 @@ export function RouterProvider({
}, [pageOrder, isLoaded, pageOrderKey]); }, [pageOrder, isLoaded, pageOrderKey]);
useEffect(() => { useEffect(() => {
if (isLoaded) { if (isLoaded && canPersistRef.current) {
void storageUtil.set('app/recentlyUsedTools', recentlyUsedTools).catch(console.error); void storageUtil.set('app/recentlyUsedTools', recentlyUsedTools).catch(console.error);
try { try {
localStorage.setItem('snapshot/app/recentlyUsedTools', JSON.stringify(recentlyUsedTools)); localStorage.setItem('snapshot/app/recentlyUsedTools', JSON.stringify(recentlyUsedTools));
@@ -283,6 +287,8 @@ export function RouterProvider({
}, [syncRoute, syncKey, visiblePagesKey, pageOrderKey]); }, [syncRoute, syncKey, visiblePagesKey, pageOrderKey]);
const navigateTo = (page: PageType) => { const navigateTo = (page: PageType) => {
hasUserNavigatedRef.current = true;
canPersistRef.current = true;
setCurrentPage(page); setCurrentPage(page);
setRecentlyUsedTools((prev) => { setRecentlyUsedTools((prev) => {
const filtered = prev.filter((p) => p !== page); const filtered = prev.filter((p) => p !== page);
@@ -291,6 +297,8 @@ export function RouterProvider({
}; };
const goHome = () => { const goHome = () => {
hasUserNavigatedRef.current = true;
canPersistRef.current = true;
setCurrentPage('dashboard'); setCurrentPage('dashboard');
}; };
@@ -323,6 +323,51 @@ describe('RouterProvider', () => {
}); });
}); });
it('初始化失败时仍应解除加载状态以便渲染页面', async () => {
(storageUtil.get as any).mockRejectedValue(new Error('Storage unavailable'));
render(
<RouterProvider>
<TestComponent />
</RouterProvider>,
);
await waitFor(() => {
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
});
expect(storageUtil.set).not.toHaveBeenCalled();
});
it('用户在 loadInitialData 完成前导航时不应被存储路由覆盖', async () => {
let resolveGet: () => void;
const getBlocked = new Promise<void>((resolve) => {
resolveGet = resolve;
});
(storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
await getBlocked;
if (key === 'app/currentRoute') return 'dashboard';
return defaultValue;
});
render(
<RouterProvider>
<TestComponent />
</RouterProvider>,
);
await act(async () => {
fireEvent.click(screen.getByTestId('navigate-btn'));
});
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
resolveGet!();
await waitFor(() => {
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
expect(storageUtil.set).toHaveBeenCalledWith('app/currentRoute', 'timestamp');
});
});
it('组件卸载时不应设置 isLoaded 状态(竞态条件防护)', async () => { it('组件卸载时不应设置 isLoaded 状态(竞态条件防护)', async () => {
let resolveStorage: (value: unknown) => void; let resolveStorage: (value: unknown) => void;
const storagePromise = new Promise((resolve) => { const storagePromise = new Promise((resolve) => {
+5 -15
View File
@@ -156,29 +156,19 @@ export interface GenerateProgress {
} }
/** /**
* Worker 请求消息类型 * Worker 消息类型
*/ */
export type WorkerRequestMessage = export type WorkerMessage =
| { type: 'start'; payload: WorkerStartPayload } | { type: 'start'; payload: WorkerStartPayload }
| { type: 'progress'; payload: GenerateProgress }
| { type: 'complete'; payload: GenerateResult }
| { type: 'error'; payload: { error: string } }
| { type: 'cancel' }; | { type: 'cancel' };
/**
* Worker 响应消息类型
*/
export type WorkerResponseMessage =
| { type: 'progress'; generationId: number; payload: GenerateProgress }
| { type: 'complete'; generationId: number; payload: GenerateResult }
| { type: 'error'; generationId: number; payload: { error: string } };
/** @deprecated 使用 WorkerRequestMessage | WorkerResponseMessage */
export type WorkerMessage = WorkerRequestMessage | WorkerResponseMessage;
/** /**
* Worker 启动参数 * Worker 启动参数
*/ */
export interface WorkerStartPayload { export interface WorkerStartPayload {
/** 生成任务 ID,用于忽略过期 Worker 响应 */
generationId: number;
/** 字段配置列表 */ /** 字段配置列表 */
fields: FieldConfig[]; fields: FieldConfig[];
/** 生成数量 */ /** 生成数量 */
+1 -31
View File
@@ -1,37 +1,7 @@
import { describe, expect, it, vi } from 'vitest'; import { describe, expect, it, vi } from 'vitest';
import { getCurrentTab, openExtensionPage } from '@/utils/chromeTabs'; import { openExtensionPage } from '@/utils/chromeTabs';
describe('chromeTabs', () => { describe('chromeTabs', () => {
describe('getCurrentTab', () => {
it('应优先使用 lastFocusedWindow 查询当前标签页', async () => {
const mockTab = { id: 1, url: 'https://example.com' };
(browser.tabs.query as ReturnType<typeof vi.fn>).mockResolvedValueOnce([mockTab]);
const tab = await getCurrentTab();
expect(tab).toEqual(mockTab);
expect(browser.tabs.query).toHaveBeenCalledWith({
active: true,
lastFocusedWindow: true,
});
});
it('当 lastFocusedWindow 无结果时应回退到 currentWindow', async () => {
const fallbackTab = { id: 2, url: 'https://fallback.com' };
(browser.tabs.query as ReturnType<typeof vi.fn>)
.mockResolvedValueOnce([])
.mockResolvedValueOnce([fallbackTab]);
const tab = await getCurrentTab();
expect(tab).toEqual(fallbackTab);
expect(browser.tabs.query).toHaveBeenLastCalledWith({
active: true,
currentWindow: true,
});
});
});
describe('openExtensionPage', () => { describe('openExtensionPage', () => {
it('应该在新标签页中打开扩展页面', async () => { it('应该在新标签页中打开扩展页面', async () => {
await openExtensionPage('popup.html'); await openExtensionPage('popup.html');
-83
View File
@@ -1,83 +0,0 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import * as ruleStorage from '../ruleStorage';
const STORAGE_KEY = 'testDataGenerator_rules';
const mockField = {
id: 'field-1',
name: 'username',
generatorId: 'string',
params: {},
required: true,
nullRate: 0,
unique: false,
};
describe('ruleStorage', () => {
beforeEach(() => {
localStorage.clear();
vi.restoreAllMocks();
});
it('save 在 localStorage 写入失败时应返回 null', () => {
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
throw new DOMException('QuotaExceededError');
});
const result = ruleStorage.save({
name: 'Test Rule',
fields: [mockField],
});
expect(result).toBeNull();
expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
});
it('update 在 localStorage 写入失败时应返回 null', () => {
const saved = ruleStorage.save({
name: 'Test Rule',
fields: [mockField],
});
expect(saved).not.toBeNull();
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
throw new DOMException('QuotaExceededError');
});
const updated = ruleStorage.update(saved!.id, { name: 'Updated Rule' });
expect(updated).toBeNull();
});
it('deleteRule 在 localStorage 写入失败时应返回 false', () => {
const saved = ruleStorage.save({
name: 'Test Rule',
fields: [mockField],
});
expect(saved).not.toBeNull();
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
throw new DOMException('QuotaExceededError');
});
expect(ruleStorage.deleteRule(saved!.id)).toBe(false);
expect(ruleStorage.getById(saved!.id)).toBeDefined();
});
it('importRules 应能恢复导出的规则备份', () => {
const saved = ruleStorage.save({
name: 'Backup Rule',
fields: [mockField],
});
expect(saved).not.toBeNull();
const exported = ruleStorage.exportRules();
ruleStorage.clear();
const result = ruleStorage.importRules(exported);
expect(result.success).toBe(1);
expect(result.failed).toBe(0);
expect(ruleStorage.getAll()).toHaveLength(1);
expect(ruleStorage.getAll()[0].name).toBe('Backup Rule');
});
});
@@ -166,4 +166,18 @@ describe('useStorageState', () => {
expect(result.current[2]).toBe(false); expect(result.current[2]).toBe(false);
}); });
it('加载失败时不应把快照默认值写回 Chrome Storage', async () => {
localStorage.setItem('snapshot/app/searchHistory', JSON.stringify([]));
(storageUtil.get as any).mockRejectedValue(new Error('Storage read failed'));
renderHook(() =>
useStorageState('app/searchHistory', [], (val): val is string[] => Array.isArray(val)),
);
await waitFor(() => {
expect(storageUtil.set).not.toHaveBeenCalled();
});
});
}); });
-24
View File
@@ -1,31 +1,7 @@
import { browser } from 'wxt/browser';
/** /**
* Chrome 标签页相关工具函数 * Chrome 标签页相关工具函数
*/ */
/**
* 获取用户当前正在浏览的标签页。
* popup 中 `currentWindow` 指向弹窗自身,需优先使用 `lastFocusedWindow`。
*/
export async function getCurrentTab() {
const [tab] = await browser.tabs.query({
active: true,
lastFocusedWindow: true,
});
if (tab) {
return tab;
}
const [fallbackTab] = await browser.tabs.query({
active: true,
currentWindow: true,
});
return fallbackTab;
}
/** /**
* 在新标签页中打开扩展页面 * 在新标签页中打开扩展页面
* @param page - 扩展页面路径(如 'popup.html' * @param page - 扩展页面路径(如 'popup.html'
+1 -2
View File
@@ -1,5 +1,4 @@
import { defineExtensionMessaging } from '@webext-core/messaging'; import { defineExtensionMessaging } from '@webext-core/messaging';
import { getCurrentTab } from '@/utils/chromeTabs';
export enum MessageAction { export enum MessageAction {
SIDE_PANEL_STATE_CHANGED = 'sidePanelStateChanged', SIDE_PANEL_STATE_CHANGED = 'sidePanelStateChanged',
@@ -39,7 +38,7 @@ export async function sendMessageToContent<K extends keyof ProtocolMap>(
: [data: Parameters<ProtocolMap[K]>[0]] : [data: Parameters<ProtocolMap[K]>[0]]
): Promise<ReturnType<ProtocolMap[K]>> { ): Promise<ReturnType<ProtocolMap[K]>> {
try { try {
const tab = await getCurrentTab(); const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (!tab?.id) { if (!tab?.id) {
console.warn(`[Messaging] 无法获取当前标签页,无法发送动作: ${action}`); console.warn(`[Messaging] 无法获取当前标签页,无法发送动作: ${action}`);
return { success: false, message: '无法获取当前标签页' } as ReturnType<ProtocolMap[K]>; return { success: false, message: '无法获取当前标签页' } as ReturnType<ProtocolMap[K]>;
+8 -24
View File
@@ -78,9 +78,7 @@ export function save(
useCount: 0, useCount: 0,
}; };
rules.unshift(newRule); rules.unshift(newRule);
if (!setAll(rules)) { setAll(rules);
return null;
}
return newRule; return newRule;
} }
@@ -97,9 +95,7 @@ export function save(
updatedAt: now, updatedAt: now,
}; };
rules[index] = updatedRule; rules[index] = updatedRule;
if (!setAll(rules)) { setAll(rules);
return null;
}
return updatedRule; return updatedRule;
} }
@@ -121,9 +117,7 @@ export function update(id: string, updates: Partial<DataRule>): DataRule | null
updatedAt: Date.now(), updatedAt: Date.now(),
}; };
rules[index] = updatedRule; rules[index] = updatedRule;
if (!setAll(rules)) { setAll(rules);
return null;
}
return updatedRule; return updatedRule;
} }
@@ -138,7 +132,8 @@ export function deleteRule(id: string): boolean {
return false; return false;
} }
rules.splice(index, 1); rules.splice(index, 1);
return setAll(rules); setAll(rules);
return true;
} }
/** /**
@@ -170,9 +165,7 @@ export function duplicate(id: string, copySuffix = '(副本)'): DataRule | n
const rules = getAll(); const rules = getAll();
rules.unshift(newRule); rules.unshift(newRule);
if (!setAll(rules)) { setAll(rules);
return null;
}
return newRule; return newRule;
} }
@@ -248,14 +241,7 @@ export function importRules(jsonString: string): {
continue; continue;
} }
const ruleItem = item as DataRule; const saved = save(item as Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'>);
const existsLocally = Boolean(ruleItem.id && getById(ruleItem.id));
const saved = save({
name: ruleItem.name,
description: ruleItem.description,
fields: ruleItem.fields,
...(existsLocally ? { id: ruleItem.id } : {}),
});
if (saved) { if (saved) {
result.success++; result.success++;
} else { } else {
@@ -281,13 +267,11 @@ export function clear(): void {
/** /**
* 保存所有规则到存储 * 保存所有规则到存储
*/ */
function setAll(rules: DataRule[]): boolean { function setAll(rules: DataRule[]): void {
try { try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules)); localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
return true;
} catch (error) { } catch (error) {
console.error('[ruleStorage] 保存规则失败:', error); console.error('[ruleStorage] 保存规则失败:', error);
return false;
} }
} }
+23
View File
@@ -11,6 +11,29 @@ import { browser } from 'wxt/browser';
type CleanScriptResult = IndexedDBCleanResult; type CleanScriptResult = IndexedDBCleanResult;
export async function getCurrentTab() {
// For popup pages, we need to get the active tab from the browser window that triggered the popup.
// We should ONLY care about the currently active tab in the last focused window.
// If it's a restricted URL, we return it anyway and let the caller handle the error display.
const [tab] = await browser.tabs.query({
active: true,
lastFocusedWindow: true,
});
if (tab) {
return tab;
}
// Fallback for cases where lastFocusedWindow might not work as expected (e.g. certain sidepanel scenarios)
const [fallbackTab] = await browser.tabs.query({
active: true,
currentWindow: true,
});
return fallbackTab;
}
export async function getCookieSize(url: string): Promise<number> { export async function getCookieSize(url: string): Promise<number> {
try { try {
const cookies = await browser.cookies.getAll({ url }); const cookies = await browser.cookies.getAll({ url });
+21 -4
View File
@@ -1,4 +1,11 @@
import { useEffect, useRef, useState } from 'react'; import {
useCallback,
useEffect,
useRef,
useState,
type Dispatch,
type SetStateAction,
} from 'react';
import { storageUtil } from '@/utils/chromeStorage'; import { storageUtil } from '@/utils/chromeStorage';
import { getSyncSnapshot } from '@/utils/syncSnapshot'; import { getSyncSnapshot } from '@/utils/syncSnapshot';
import type { StorageSchema } from '@/types/storage'; import type { StorageSchema } from '@/types/storage';
@@ -8,11 +15,18 @@ export const useStorageState = <K extends keyof StorageSchema>(
defaultValue: StorageSchema[K], defaultValue: StorageSchema[K],
validator?: (val: unknown) => val is StorageSchema[K], validator?: (val: unknown) => val is StorageSchema[K],
) => { ) => {
const [value, setValue] = useState<StorageSchema[K]>(() => const [value, setValueInternal] = useState<StorageSchema[K]>(() =>
getSyncSnapshot(key as string, defaultValue, validator), getSyncSnapshot(key as string, defaultValue, validator),
); );
const [isInitialized, setIsInitialized] = useState(false); const [isInitialized, setIsInitialized] = useState(false);
const hasLoadedFromStorage = useRef(false); const hasLoadedFromStorage = useRef(false);
const loadSucceededRef = useRef(false);
const userModifiedRef = useRef(false);
const setValue = useCallback<Dispatch<SetStateAction<StorageSchema[K]>>>((next) => {
userModifiedRef.current = true;
setValueInternal(next);
}, []);
// Only load from storage once on mount // Only load from storage once on mount
useEffect(() => { useEffect(() => {
@@ -24,15 +38,17 @@ export const useStorageState = <K extends keyof StorageSchema>(
try { try {
const savedValue = await storageUtil.get(key, defaultValue); const savedValue = await storageUtil.get(key, defaultValue);
if (cancelled) return; if (cancelled) return;
loadSucceededRef.current = true;
if (savedValue !== undefined) { if (savedValue !== undefined) {
if (validator) { if (validator) {
setValue(validator(savedValue) ? savedValue : defaultValue); setValueInternal(validator(savedValue) ? savedValue : defaultValue);
} else { } else {
setValue(savedValue); setValueInternal(savedValue);
} }
} }
} catch (error) { } catch (error) {
console.error(`加载状态失败 (${key}):`, error); console.error(`加载状态失败 (${key}):`, error);
loadSucceededRef.current = false;
} finally { } finally {
if (!cancelled) { if (!cancelled) {
setIsInitialized(true); setIsInitialized(true);
@@ -51,6 +67,7 @@ export const useStorageState = <K extends keyof StorageSchema>(
// Save to storage and localStorage snapshot when value changes (after initial load) // Save to storage and localStorage snapshot when value changes (after initial load)
useEffect(() => { useEffect(() => {
if (!isInitialized) return; if (!isInitialized) return;
if (!loadSucceededRef.current && !userModifiedRef.current) return;
const saveState = async () => { const saveState = async () => {
try { try {
+5 -28
View File
@@ -6,14 +6,11 @@
import { getGeneratorById } from '@/lib/generators'; import { getGeneratorById } from '@/lib/generators';
import type { import type {
FieldConfig, FieldConfig,
WorkerRequestMessage, WorkerMessage,
GenerateResult, GenerateResult,
GenerateProgress, GenerateProgress,
} from '@/types/testDataGenerator'; } from '@/types/testDataGenerator';
/** 每生成 N 行让出一次事件循环,以便处理 cancel 消息 */
const YIELD_EVERY = 100;
// 生成结果缓存 // 生成结果缓存
let generatedData: Record<string, unknown>[] = []; let generatedData: Record<string, unknown>[] = [];
let isCancelled = false; let isCancelled = false;
@@ -21,7 +18,7 @@ let isCancelled = false;
/** /**
* Worker 消息处理器 * Worker 消息处理器
*/ */
self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => { self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
const data = e.data; const data = e.data;
const { type } = data; const { type } = data;
@@ -40,12 +37,11 @@ self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
* 处理开始生成消息 * 处理开始生成消息
*/ */
async function handleStart(payload: { async function handleStart(payload: {
generationId: number;
fields: FieldConfig[]; fields: FieldConfig[];
count: number; count: number;
csvMode: boolean; csvMode: boolean;
}): Promise<void> { }): Promise<void> {
const { generationId, fields, count } = payload; const { fields, count } = payload;
generatedData = []; generatedData = [];
try { try {
@@ -55,7 +51,6 @@ async function handleStart(payload: {
if (!generator) { if (!generator) {
self.postMessage({ self.postMessage({
type: 'error', type: 'error',
generationId,
payload: { error: `生成器 "${field.generatorId}" 不存在` }, payload: { error: `生成器 "${field.generatorId}" 不存在` },
}); });
return; return;
@@ -70,7 +65,6 @@ async function handleStart(payload: {
if (isCancelled) { if (isCancelled) {
self.postMessage({ self.postMessage({
type: 'complete', type: 'complete',
generationId,
payload: { payload: {
success: false, success: false,
error: '生成已取消', error: '生成已取消',
@@ -142,23 +136,7 @@ async function handleStart(payload: {
total: count, total: count,
estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)), estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
}; };
self.postMessage({ type: 'progress', generationId, payload: progress }); self.postMessage({ type: 'progress', payload: progress });
}
// 定期让出事件循环,使 cancel 消息能被处理
if ((i + 1) % YIELD_EVERY === 0) {
await new Promise<void>((resolve) => setTimeout(resolve, 0));
if (isCancelled) {
self.postMessage({
type: 'complete',
generationId,
payload: {
success: false,
error: '生成已取消',
},
});
return;
}
} }
} }
@@ -177,11 +155,10 @@ async function handleStart(payload: {
}, },
}; };
self.postMessage({ type: 'complete', generationId, payload: result }); self.postMessage({ type: 'complete', payload: result });
} catch (error) { } catch (error) {
self.postMessage({ self.postMessage({
type: 'error', type: 'error',
generationId,
payload: { error: `生成失败: ${error}` }, payload: { error: `生成失败: ${error}` },
}); });
} }