Develop fastapi (#7)

* feat: add side panel with navigation and storage cleaner functionality * feat: add OpenUrlPage and integrate into app navigation * feat: 添加 GlobalSnackbar 组件并在多个页面中集成，替换原有 Snackbar 实现 * feat: fix OpenUrl sidebar issue with architecture refactor - 修复原问题：不再直接替换侧边栏 URL，保持插件导航可见 - 采用配置页 + 查看页分离架构：OpenUrlPage (配置) + OpenUrlViewerPage (查看) - 支持多个 URL 快捷方式管理（添加/删除） - 每个 URL 提供两种打开方式：在侧边栏打开 / 在新标签页打开 - 侧边栏查看页使用 iframe 占满全部剩余空间 - 更新 TypeScript 类型定义 - 保留原有混合内容警告检查 - 数据持久化到 Chrome Storage * refactor: centralized route management - consolidate routing config into single source * feat: 更换logo * refactor: code review fixes - security and race condition improvements Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Changes: - wxt.config.ts: Remove unused `debugger` permission (no code uses it) - OpenUrlPage.tsx: Fix unreachable showMessage after window.close() - OpenUrlPage.tsx: Replace unnecessary div wrapper with Fragment to reduce DOM nesting - OpenUrlViewerPage.tsx: Add URL validation to prevent XSS via javascript:/data: URLs - OpenUrlViewerPage.tsx: Add sandbox attribute to iframe for security isolation - OpenUrlViewerPage.tsx: Add error handling for invalid URLs - StorageCleanerPage.tsx: Fix race condition in handleOptionChange preference saving - StorageCleanerPage.tsx: Remove unnecessary storage reads when saving preferences (use state directly) - StorageCleanerPage.tsx: Add timeout cleanup for setTimeout to follow React best practices * feat: implement drill-down navigation with master-detail dashboard * feat: enhance dashboard dynamism and refine options UI * feat: overhaul storage cleaner UI with real-time size estimation and modern aesthetics * feat: overhaul TimestampPage UI/UX and fix GlobalSnackbar positioning * fix: decouple popup routing from storage sync and enhance OpenUrlPage UI * fix: avoid closing sidepanel when opening URL preview from within sidepanel * fix: enhance storage cleaner size detection and optimize UI layout
2026-04-16 18:05:34 +08:00
parent 84ffd2a132
commit 9a947d7431
2 changed files with 150 additions and 18 deletions
@@ -29,6 +29,9 @@ import {
  getCookieSize,
  getLocalStorageSize,
  getSessionStorageSize,
+  getIndexedDBSize,
+  getCacheStorageSize,
+  getServiceWorkerCount,
  formatSize,
 } from '@/utils/storageCleaner';

@@ -78,11 +81,14 @@ export default function StorageCleanerPage() {
    const tabId = tab.id!;
    setDomain(new URL(url).hostname);

-    const [savedPrefs, cSize, lsSize, ssSize] = await Promise.all([
+    const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
      storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
      getCookieSize(url),
      getLocalStorageSize(tabId),
      getSessionStorageSize(tabId),
+      getIndexedDBSize(tabId),
+      getCacheStorageSize(tabId),
+      getServiceWorkerCount(tabId),
    ]);

    setAutoRefresh(savedPrefs?.autoRefresh ?? DEFAULT_PREFERENCES.autoRefresh);
@@ -91,6 +97,9 @@ export default function StorageCleanerPage() {
      cookies: cSize,
      localStorage: lsSize,
      sessionStorage: ssSize,
+      indexedDB: idbSize,
+      cacheStorage: cacheCount,
+      serviceWorkers: swCount,
    });
  };

@@ -181,17 +190,20 @@ export default function StorageCleanerPage() {
    );
  }

-  const totalSize = Object.values(sizes).reduce((acc, curr) => acc + curr, 0);
+  // 这里的总大小仅包含以字节计算的项
+  const totalSize = (sizes.cookies || 0) + (sizes.localStorage || 0) + (sizes.sessionStorage || 0) + (sizes.indexedDB || 0);

  const OptionItem = ({
    label,
    checked,
    size,
+    isCount = false,
    onChange,
  }: {
    label: string;
    checked: boolean;
    size?: number;
+    isCount?: boolean;
    onChange: () => void;
  }) => (
    <Box
@@ -199,31 +211,60 @@ export default function StorageCleanerPage() {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
-        py: 0.6,
+        py: 0.8,
        px: 1.2,
        borderRadius: 2.5,
        transition: 'all 0.2s',
        '&:hover': { bgcolor: 'grey.50' },
      }}
    >
-      <Stack direction="row" spacing={0.8} alignItems="baseline">
+      <Box sx={{ flex: 1, minWidth: 0, mr: 1 }}>
        <Typography
          variant="caption"
-          fontWeight={700}
+          fontWeight={800}
          color="text.primary"
-          sx={{ fontSize: '0.75rem' }}
+          sx={{ 
+            fontSize: '0.7rem', 
+            display: 'block', 
+            lineHeight: 1.1,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}
        >
          {label}
        </Typography>
-        {size !== undefined && size > 0 && (
+        {size !== undefined && size > 0 ? (
          <Typography
            variant="caption"
-            sx={{ color: 'text.disabled', fontSize: '0.65rem', fontWeight: 500 }}
+            sx={{ 
+              color: 'text.disabled', 
+              fontSize: '0.6rem', 
+              fontWeight: 700,
+              display: 'block',
+              mt: 0.2,
+              lineHeight: 1,
+              whiteSpace: 'nowrap'
+            }}
          >
-            {formatSize(size)}
+            {isCount ? `${size} 个` : formatSize(size)}
+          </Typography>
+        ) : (
+          <Typography
+            variant="caption"
+            sx={{ 
+              color: 'grey.300', 
+              fontSize: '0.6rem', 
+              fontWeight: 500,
+              display: 'block',
+              mt: 0.2,
+              lineHeight: 1
+            }}
+          >
+            无数据
          </Typography>
        )}
-      </Stack>
+      </Box>
      <Checkbox
        size="small"
        checked={checked}
@@ -325,6 +366,7 @@ export default function StorageCleanerPage() {
              <OptionItem
                label="IndexedDB"
                checked={options.indexedDB}
+                size={sizes.indexedDB}
                onChange={() => handleOptionChange('indexedDB')}
              />
            </Grid>
@@ -340,6 +382,8 @@ export default function StorageCleanerPage() {
              <OptionItem
                label="Cache"
                checked={options.cacheStorage}
+                size={sizes.cacheStorage}
+                isCount
                onChange={() => handleOptionChange('cacheStorage')}
              />
            </Grid>
@@ -347,6 +391,8 @@ export default function StorageCleanerPage() {
              <OptionItem
                label="Workers"
                checked={options.serviceWorkers}
+                size={sizes.serviceWorkers}
+                isCount
              onChange={() => handleOptionChange('serviceWorkers')}
              />
            </Grid>
@@ -11,7 +11,8 @@ const RESTRICTED_PROTOCOLS = [
 ] as const;

 export async function getCurrentTab() {
-  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  // 使用 lastFocusedWindow: true 确保在 Side Panel 或 Popup 中都能获取到用户正在查看的标签页
+  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
  return tab;
 }

@@ -23,8 +24,10 @@ export function isRestrictedUrl(url?: string): boolean {
 export async function getCookieSize(url: string): Promise<number> {
  try {
    const cookies = await chrome.cookies.getAll({ url });
-    return cookies.reduce((acc, c) => acc + c.name.length + c.value.length, 0);
-  } catch {
+    // 估算：名称 + 值 + 域名 + 路径 的长度
+    return cookies.reduce((acc, c) => acc + c.name.length + c.value.length + (c.domain?.length || 0) + (c.path?.length || 0), 0);
+  } catch (error) {
+    console.error('Failed to get cookie size:', error);
    return 0;
  }
 }
@@ -34,11 +37,16 @@ export async function getLocalStorageSize(tabId: number): Promise<number> {
    const [result] = await chrome.scripting.executeScript({
      target: { tabId },
      func: () => {
+        try {
          return Object.entries(localStorage).reduce((acc, [k, v]) => acc + k.length + v.length, 0);
+        } catch {
+          return 0;
+        }
      },
    });
    return (result?.result as number) || 0;
-  } catch {
+  } catch (error) {
+    console.error('Failed to get LocalStorage size:', error);
    return 0;
  }
 }
@@ -48,17 +56,95 @@ export async function getSessionStorageSize(tabId: number): Promise<number> {
    const [result] = await chrome.scripting.executeScript({
      target: { tabId },
      func: () => {
+        try {
          return Object.entries(sessionStorage).reduce((acc, [k, v]) => acc + k.length + v.length, 0);
+        } catch {
+          return 0;
+        }
      },
    });
    return (result?.result as number) || 0;
+  } catch (error) {
+    console.error('Failed to get SessionStorage size:', error);
+    return 0;
+  }
+}
+
+export async function getIndexedDBSize(tabId: number): Promise<number> {
+  try {
+    const [result] = await chrome.scripting.executeScript({
+      target: { tabId },
+      func: async () => {
+        try {
+          // 注意：navigator.storage.estimate() 返回的是整个 Origin 的估算值
+          // 包含 IndexedDB, CacheStorage, ServiceWorker 注册等
+          if (navigator.storage && navigator.storage.estimate) {
+            const estimate = await navigator.storage.estimate();
+            return estimate.usage || 0;
+          }
+          return 0;
        } catch {
          return 0;
        }
+      },
+    });
+    return (result?.result as number) || 0;
+  } catch (error) {
+    console.error('Failed to get IndexedDB size:', error);
+    return 0;
+  }
+}
+
+export async function getCacheStorageSize(tabId: number): Promise<number> {
+  try {
+    const [result] = await chrome.scripting.executeScript({
+      target: { tabId },
+      func: async () => {
+        try {
+          if ('caches' in window) {
+            const keys = await caches.keys();
+            return keys.length; // 对于 CacheStorage，我们先返回缓存库的数量
+          }
+          return 0;
+        } catch {
+          return 0;
+        }
+      },
+    });
+    // 由于获取具体字节数较慢，这里返回的是缓存条目的数量标识，UI 上可以特殊处理
+    return (result?.result as number) || 0;
+  } catch (error) {
+    console.error('Failed to get CacheStorage size:', error);
+    return 0;
+  }
+}
+
+export async function getServiceWorkerCount(tabId: number): Promise<number> {
+  try {
+    const [result] = await chrome.scripting.executeScript({
+      target: { tabId },
+      func: async () => {
+        try {
+          if ('serviceWorker' in navigator) {
+            const regs = await navigator.serviceWorker.getRegistrations();
+            return regs.length;
+          }
+          return 0;
+        } catch {
+          return 0;
+        }
+      },
+    });
+    return (result?.result as number) || 0;
+  } catch (error) {
+    console.error('Failed to get ServiceWorker count:', error);
+    return 0;
+  }
 }

 export function formatSize(bytes: number): string {
  if (bytes === 0) return '0 B';
+  if (bytes < 1024) return `${bytes} B`; // 处理小于 1KB 的情况
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));