rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(storageCleaner): simplify architecture and improve type semantics

Browse Source 
- Remove RELOAD_TAB message chain, use chrome.tabs.reload() directly
- Rename IndexedDB label to '站点存储' for accuracy
- Introduce StorageSizeInfo type to distinguish bytes vs count
- Rename totalSize to totalBytes for clarity
- Merge runCleanScript into runScript to reduce duplication
- Rename CleaningResult.success to overallSuccess to avoid confusion
- Remove unused domain state and setDomain call

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
雨霖铃
2026-05-29 21:59:54 +08:00
parent 1b9f6d044d
commit f9fbc79612
11 changed files with 149 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/_locales/zh/messages.json
+1 -1
View File
@@ -697,7 +697,7 @@
"description": "Translation key: storageCleaner_options_sessionStorage"
},
"storageCleaner_options_indexedDB": {
"message": "IndexedDB",
"message": "站点存储",
"description": "Translation key: storageCleaner_options_indexedDB"
},
"storageCleaner_options_cookies": {
src/entrypoints/background.ts
-18
View File
@@ -83,22 +83,4 @@ export default defineBackground(() => {
return { success: false, message: errorMsg };
}
});
onMessage(MessageAction.RELOAD_TAB, async (message) => {
const { tabId, delay = 0 } = message.data;
const executeReload = () => {
browser.tabs.reload(tabId).catch((err) => {
console.error('Failed to execute tab reload operation:', err);
});
};
if (delay > 0) {
setTimeout(executeReload, delay);
} else {
executeReload();
}
return { success: true };
});
});
src/pages/StorageCleaner/CleaningResult.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
if (!result) return null;
const isSuccess = result.success;
const isSuccess = result.overallSuccess;
return (
<div className={cn('w-full', className)} {...props}>
src/pages/StorageCleaner/OptionItem.tsx
+8 -7
View File
@@ -2,28 +2,29 @@ import React from 'react';
import { formatBytes } from '@/utils/format';
import { useI18n } from '@/utils/chromeI18n';
import { cn } from '@/lib/utils';
// 引入官方的 Checkbox 原子组件
import type { StorageSizeInfo } from './useStorageCleaner';
import { Checkbox } from '@/components/ui/checkbox';
interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
labelKey: string;
checked: boolean;
size?: number;
isCount?: boolean;
sizeInfo?: StorageSizeInfo;
onChange: () => void;
}
export default function OptionItem({
labelKey,
checked,
size,
isCount = false,
sizeInfo,
onChange,
className,
...props
}: OptionItemProps) {
const { t } = useI18n('storageCleaner');
const sizeValue = sizeInfo?.value;
const isCount = sizeInfo?.displayType === 'count';
return (
<div
onClick={onChange}
@@ -46,14 +47,14 @@ export default function OptionItem({
{t(labelKey)}
</span>
{size !== undefined && size > 0 ? (
{sizeValue !== undefined && sizeValue > 0 ? (
<span
className={cn(
'block text-[10px] font-mono font-medium mt-0.5 tabular-nums transition-colors',
checked ? 'text-primary/70' : 'text-muted-foreground/70',
)}
>
{isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatBytes(size)}
{isCount ? `${sizeValue} ${t('storageCleaner:countUnit')}` : formatBytes(sizeValue)}
</span>
) : (
<span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
src/pages/StorageCleaner/StorageOptionsGrid.tsx
+11 -11
View File
@@ -1,5 +1,6 @@
import React from 'react';
import type { StorageCleanerOptions } from '@/types/storage';
import type { StorageSizeInfo } from './useStorageCleaner';
import OptionItem from './OptionItem';
import { useI18n } from '@/utils/chromeI18n';
import { cn } from '@/lib/utils';
@@ -8,7 +9,7 @@ import { Label } from '@/components/ui/label';
interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
options: StorageCleanerOptions;
sizes: Record<string, number>;
sizes: Record<string, StorageSizeInfo>;
allSelected: boolean;
someSelected: boolean;
onOptionChange: (key: keyof StorageCleanerOptions) => void;
@@ -27,13 +28,13 @@ export default function StorageOptionsGrid({
}: StorageOptionsGridProps) {
const { t } = useI18n('storageCleaner');
const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
{ key: 'localStorage' },
{ key: 'sessionStorage' },
{ key: 'indexedDB' },
{ key: 'cookies' },
{ key: 'cacheStorage', isCount: true },
{ key: 'serviceWorkers', isCount: true },
const optionKeys: (keyof StorageCleanerOptions)[] = [
'localStorage',
'sessionStorage',
'indexedDB',
'cookies',
'cacheStorage',
'serviceWorkers',
];
const handleToggleAll = () => {
@@ -44,13 +45,12 @@ export default function StorageOptionsGrid({
<div className={cn('w-full overflow-hidden', className)} {...props}>
<div className="px-3.5 pt-3.5 pb-2">
<div className="grid grid-cols-2 gap-2 items-stretch">
{optionKeys.map(({ key, isCount }) => (
{optionKeys.map((key) => (
<OptionItem
key={key}
labelKey={`storageCleaner:options.${key}`}
checked={options[key]}
size={sizes[key]}
isCount={isCount}
sizeInfo={sizes[key]}
onChange={() => onOptionChange(key)}
/>
))}
src/pages/StorageCleaner/useStorageCleaner.ts
+21 -24
View File
@@ -16,7 +16,6 @@ import {
getSessionStorageSize,
isRestrictedUrl,
} from '@/utils/storageCleaner';
import { MessageAction, sendMessage } from '@/utils/messages';
import { useI18n } from '@/utils/chromeI18n';
import { toast } from 'sonner';
@@ -34,18 +33,22 @@ const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
selectedTypes: DEFAULT_OPTIONS,
};
export interface StorageSizeInfo {
value: number;
displayType: 'bytes' | 'count';
}
export interface UseStorageCleanerReturn {
domain: string;
error: string;
isInitializing: boolean;
options: StorageCleanerOptions;
sizes: Record<string, number>;
sizes: Record<string, StorageSizeInfo>;
reloadAfterClean: boolean;
loading: boolean;
result: CleaningResult | null;
showConfirm: boolean;
setShowConfirm: (show: boolean) => void;
totalSize: number;
totalBytes: number;
allSelected: boolean;
someSelected: boolean;
@@ -57,11 +60,10 @@ export interface UseStorageCleanerReturn {
export function useStorageCleaner(): UseStorageCleanerReturn {
const { t } = useI18n(['storageCleaner', 'common']);
const [domain, setDomain] = useState<string>('');
const [error, setError] = useState<string>('');
const [isInitializing, setIsInitializing] = useState<boolean>(true);
const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
const [sizes, setSizes] = useState<Record<string, number>>({});
const [sizes, setSizes] = useState<Record<string, StorageSizeInfo>>({});
const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(false);
const [result, setResult] = useState<CleaningResult | null>(null);
@@ -102,7 +104,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
setError('');
const url = tab.url;
const tabId = tab.id!;
setDomain(new URL(url).hostname);
const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
@@ -122,12 +123,12 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
}
setSizes({
cookies: cSize,
localStorage: lsSize,
sessionStorage: ssSize,
indexedDB: idbSize,
cacheStorage: cacheCount,
serviceWorkers: swCount,
cookies: { value: cSize, displayType: 'bytes' },
localStorage: { value: lsSize, displayType: 'bytes' },
sessionStorage: { value: ssSize, displayType: 'bytes' },
indexedDB: { value: idbSize, displayType: 'bytes' },
cacheStorage: { value: cacheCount, displayType: 'count' },
serviceWorkers: { value: swCount, displayType: 'count' },
});
} finally {
if (currentRequestId === requestIdRef.current) {
@@ -217,9 +218,9 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
const cleaningResult = await clearStorage(tab.id, tab.url, options);
setResult(cleaningResult);
if (reloadAfterClean && cleaningResult.success) {
if (reloadAfterClean && cleaningResult.overallSuccess) {
toast.success(t('storageCleaner:cleanSuccessReload'));
await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
await chrome.tabs.reload(tab.id);
} else {
await loadInfo();
}
@@ -231,13 +232,10 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
}
}, [options, reloadAfterClean, loadInfo, t]);
const totalSize = useMemo(() => {
return (
(sizes.cookies || 0) +
(sizes.localStorage || 0) +
(sizes.sessionStorage || 0) +
(sizes.indexedDB || 0)
);
const totalBytes = useMemo(() => {
return Object.values(sizes).reduce((acc, s) => {
return s.displayType === 'bytes' ? acc + (s.value || 0) : acc;
}, 0);
}, [sizes]);
const selectionMetrics = useMemo(() => {
@@ -248,7 +246,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
}, [options]);
return {
domain,
error,
isInitializing,
options,
@@ -258,7 +255,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
result,
showConfirm,
setShowConfirm,
totalSize,
totalBytes,
allSelected: selectionMetrics.all,
someSelected: selectionMetrics.some,
handleReloadAfterCleanChange,
src/types/storage.d.ts
Vendored
+1 -1
View File
@@ -189,7 +189,7 @@ export type StorageCleanResult =
*/
export interface CleaningResult {
/** 整体操作是否成功 */
success: boolean;
overallSuccess: boolean;
/** 整体错误信息（如果有） */
error?: string;
/** 各项清理的具体结果 */
src/utils/__tests__/messages.test.ts
+14 -10
View File
@@ -34,10 +34,14 @@ describe('messages', () => {
const mockTab = { id: 123, url: 'https://example.com' };
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
expect(result).toEqual(mockResponse);
expect(mockSendMessage).toHaveBeenCalledWith(MessageAction.RELOAD_TAB, { tabId: 123 }, 123);
expect(mockSendMessage).toHaveBeenCalledWith(
MessageAction.RESTORE_RIGHT_CLICK,
undefined,
123,
);
});
it('应该支持不带数据的消息发送', async () => {
@@ -60,11 +64,11 @@ describe('messages', () => {
const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
(chrome.tabs.query as any).mockResolvedValue([]);
const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
expect(result).toEqual({ success: false, message: '无法获取当前标签页' });
expect(consoleSpy).toHaveBeenCalledWith(
'[Messaging] 无法获取当前标签页，无法发送动作: reloadTab',
'[Messaging] 无法获取当前标签页，无法发送动作: restoreRightClick',
);
consoleSpy.mockRestore();
});
@@ -73,7 +77,7 @@ describe('messages', () => {
const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
(chrome.tabs.query as any).mockResolvedValue([{ url: 'https://example.com' }]);
const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
expect(result).toEqual({ success: false, message: '无法获取当前标签页' });
consoleSpy.mockRestore();
@@ -87,7 +91,7 @@ describe('messages', () => {
const mockTab = { id: 123, url: 'https://example.com' };
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
expect(result).toEqual({
success: false,
@@ -104,7 +108,7 @@ describe('messages', () => {
const mockTab = { id: 123, url: 'https://example.com' };
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
expect(result).toEqual({
success: false,
@@ -121,7 +125,7 @@ describe('messages', () => {
const mockTab = { id: 123, url: 'https://example.com' };
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
expect(result).toEqual({
success: false,
@@ -138,7 +142,7 @@ describe('messages', () => {
const mockTab = { id: 123, url: 'https://example.com' };
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
expect(result).toEqual({
success: false,
@@ -151,7 +155,7 @@ describe('messages', () => {
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
(chrome.tabs.query as any).mockRejectedValue(new Error('Query failed'));
const result = await sendMessageToContent(MessageAction.RELOAD_TAB, { tabId: 123 });
const result = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
expect(result).toEqual({
success: false,
src/utils/messages.ts
-2
View File
@@ -1,7 +1,6 @@
import { defineExtensionMessaging } from '@webext-core/messaging';
export enum MessageAction {
RELOAD_TAB = 'reloadTab',
SIDE_PANEL_STATE_CHANGED = 'sidePanelStateChanged',
CONTEXT_MENU_CLICKED = 'contextMenuClicked',
RESTORE_RIGHT_CLICK = 'restoreRightClick',
@@ -21,7 +20,6 @@ export interface ContextMenuClickedPayload {
}
export interface ProtocolMap {
[MessageAction.RELOAD_TAB](data: { tabId: number; delay?: number }): MessageResponse;
[MessageAction.SIDE_PANEL_STATE_CHANGED](data: { isOpen: boolean }): void;
[MessageAction.CONTEXT_MENU_CLICKED](data: ContextMenuClickedPayload): void;
[MessageAction.RESTORE_RIGHT_CLICK](data: undefined): MessageResponse & { restored: boolean };
src/utils/storageCleaner.ts
+36 -19
View File
@@ -215,36 +215,43 @@ export async function clearCookies(url: string): Promise<StorageCleanResult> {
async function runCleanScript(
tabId: number,
func: () => { count: number } | Promise<{ count: number }>,
errorLabel: string,
): Promise<StorageCleanResult> {
try {
const [result] = await chrome.scripting.executeScript({ target: { tabId }, func });
if (result?.result && typeof result.result === 'object' && 'count' in result.result) {
return { success: true, count: result.result.count };
const raw = await runScript(tabId, func, errorLabel, { count: 0 });
if (raw && typeof raw === 'object' && 'count' in raw) {
return { success: true, count: raw.count };
}
return { success: false, error: 'No result returned' };
} catch (error) {
return { success: false, error: String(error) };
}
}
export async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
return runCleanScript(tabId, () => {
return runCleanScript(
tabId,
() => {
const count = localStorage.length;
localStorage.clear();
return { count };
});
},
'clear LocalStorage',
);
}
export async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
return runCleanScript(tabId, () => {
return runCleanScript(
tabId,
() => {
const count = sessionStorage.length;
sessionStorage.clear();
return { count };
});
},
'clear SessionStorage',
);
}
export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
return runCleanScript(tabId, async () => {
return runCleanScript(
tabId,
async () => {
if (typeof indexedDB.databases !== 'function') {
return { count: 0 };
}
@@ -280,11 +287,15 @@ export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanR
}
}
return { count };
});
},
'clear IndexedDB',
);
}
export async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
return runCleanScript(tabId, async () => {
return runCleanScript(
tabId,
async () => {
if ('caches' in window) {
const cacheNames = await caches.keys();
for (const name of cacheNames) {
@@ -293,11 +304,15 @@ export async function injectClearCacheStorage(tabId: number): Promise<StorageCle
return { count: cacheNames.length };
}
return { count: 0 };
});
},
'clear CacheStorage',
);
}
export async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
return runCleanScript(tabId, async () => {
return runCleanScript(
tabId,
async () => {
if ('serviceWorker' in navigator) {
const registrations = await navigator.serviceWorker.getRegistrations();
for (const registration of registrations) {
@@ -306,7 +321,9 @@ export async function injectUnregisterServiceWorkers(tabId: number): Promise<Sto
return { count: registrations.length };
}
return { count: 0 };
});
},
'unregister ServiceWorkers',
);
}
export async function clearStorage(
@@ -314,7 +331,7 @@ export async function clearStorage(
url: string,
options: StorageCleanerOptions,
): Promise<CleaningResult> {
const result: CleaningResult = { success: true };
const result: CleaningResult = { overallSuccess: true };
if (options.localStorage) {
result.localStorage = await injectClearLocalStorage(tabId);
@@ -339,7 +356,7 @@ export async function clearStorage(
(r): r is StorageCleanResult => r?.success === false,
);
if (failures.length > 0) {
result.success = false;
result.overallSuccess = false;
}
return result;
vitest.setup.ts
+1 -2
View File
@@ -125,7 +125,7 @@ const webExtensionMock = {
get: vi.fn().mockResolvedValue({}),
sendMessage: vi.fn().mockResolvedValue(undefined),
create: vi.fn().mockResolvedValue({}),
reload: vi.fn().mockResolvedValue(undefined), // ✅ 承接 MessageAction.RELOAD_TAB 刷新单元测试
reload: vi.fn().mockResolvedValue(undefined),
},
runtime: {
id: 'test-extension-id',
@@ -202,7 +202,6 @@ afterEach(() => {
vi.restoreAllMocks();
});
// 全局 matchMedia 极客级环境模拟（ThemeModeProvider 依赖）
beforeEach(() => {
Object.defineProperty(window, 'matchMedia', {
writable: true,