Develop fastapi (#6)

* 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
2026-04-16 08:54:23 +08:00
parent 2cd21973f3
commit 84ffd2a132
34 changed files with 11680 additions and 739 deletions
@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import { Box, Typography } from '@mui/material';
+import { storageUtil } from '@/utils/chromeStorage';
+
+// 只允许 HTTP/HTTPS 协议，阻止危险协议
+const ALLOWED_PROTOCOLS = ['http:', 'https:'];
+
+export default function OpenUrlViewerPage() {
+  const [currentUrl, setCurrentUrl] = useState<string>('');
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // 验证 URL 是否安全
+  const validateUrl = (url: string): string | null => {
+    try {
+      const urlObj = new URL(url);
+      if (!ALLOWED_PROTOCOLS.includes(urlObj.protocol)) {
+        return `不支持的 URL 协议: ${urlObj.protocol}。仅允许 HTTP 和 HTTPS。`;
+      }
+      return null;
+    } catch {
+      return '无效的 URL 格式';
+    }
+  };
+
+  // 从存储加载当前选中的 URL
+  useEffect(() => {
+    const loadCurrentUrl = async () => {
+      try {
+        const saved = await storageUtil.get('openUrl/currentUrl', '');
+        if (saved) {
+          const validationError = validateUrl(saved);
+          if (validationError) {
+            setError(validationError);
+          } else {
+            setCurrentUrl(saved);
+            setError(null);
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load current URL:', error);
+        setError('加载 URL 失败');
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+    loadCurrentUrl();
+  }, []);
+
+  if (!isLoaded) {
+    return (
+      <Box sx={{ p: 2, flex: 1 }}>
+        <Typography color="text.secondary">Loading...</Typography>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box sx={{ p: 2, flex: 1 }}>
+        <Typography color="error">{error}</Typography>
+      </Box>
+    );
+  }
+
+  if (!currentUrl) {
+    return (
+      <Box sx={{ p: 2, flex: 1 }}>
+        <Typography color="text.secondary">
+          没有选中的 URL，请先在 OpenUrl 页面选择一个 URL 打开。
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      <iframe
+        src={currentUrl}
+        title="OpenUrl Viewer"
+        sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-navigation"
+        style={{
+          flex: 1,
+          width: '100%',
+          border: 'none',
+          display: 'block',
+        }}
+      />
+    </Box>
+  );
+}