LingandRX bbd0507bcd Develop fastapi (#8)
* 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

* feat: implement independent route persistence and fix standalone window tab identification

* feat(options): add card sorting functionality to dashboard tools
2026-04-16 23:59:11 +08:00
2026-04-16 08:54:23 +08:00
2026-04-16 23:59:11 +08:00
2026-04-06 17:49:47 +08:00
2026-04-16 23:59:11 +08:00
2026-04-16 23:59:11 +08:00
2026-04-16 08:54:23 +08:00
2026-04-16 23:59:11 +08:00
2026-04-16 23:59:11 +08:00
2026-04-16 08:54:23 +08:00
2026-04-16 08:54:23 +08:00
2026-04-16 08:54:23 +08:00

Testing Tools Browser Extension

这是一个基于 WXT 框架的浏览器扩展项目,提供时间戳转换工具。

项目概述

Testing Tools 是一个轻量级的浏览器扩展,提供实用的时间戳转换功能。项目采用现代化的技术栈,包括 React 19、TypeScript 和 Material UI,并利用 WXT 框架简化浏览器扩展的开发流程。

功能特性

时间戳转换工具

  • 实时显示当前时间戳(毫秒/秒可切换)
  • 日期与时间戳之间的双向转换
  • 支持多个时区(亚洲/上海、美洲/纽约、欧洲/伦敦)
  • 一键复制转换结果
  • 输入验证和错误提示

技术栈

  • 框架: WXT (Web Extension Toolkit)
  • 前端: React 19 + TypeScript
  • UI 库: Material UI
  • 日期处理: dayjs (含 UTC 和时区插件)
  • 通信: @webext-core/messaging
  • 存储: Chrome Storage API (类型安全封装)

项目结构

├── entrypoints/         # 浏览器扩展入口点
│   ├── popup/           # 扩展弹窗界面(时间戳转换页面)
│   ├── options/         # 选项页面
│   ├── background.ts    # 后台脚本
│   └── content.ts       # 内容脚本
├── utils/              # 工具函数(存储、日期处理、消息通信)
├── types/              # TypeScript 类型定义
├── public/             # 静态资源
├── wxt.config.ts       # WXT 配置文件
├── package.json        # 项目依赖和脚本
└── README.md           # 项目说明文档

开发环境要求

  • Node.js >= 18
  • npm 或 yarn

安装与运行

1. 安装依赖

npm install

2. 开发模式

# Chrome 浏览器
npm run dev

# Firefox 浏览器
npm run dev:firefox

3. 构建生产版本

# Chrome 浏览器
npm run build

# Firefox 浏览器
npm run build:firefox

4. 打包分发

# Chrome 浏览器
npm run zip

# Firefox
npm run zip:firefox

5. 其他命令

npm run compile    # TypeScript 类型检查
npm run lint       # ESLint 代码检查

权限说明

扩展请求以下权限:

  • storageunlimitedStorage - 本地数据存储
  • clipboardWrite - 剪贴板写入(复制功能)
  • activeTab, scripting, tabs - 当前标签页控制和脚本注入
  • debugger - 调试器权限
  • <all_urls> - 访问所有网站内容(内容脚本注入)

主要依赖

  • react, react-dom - 前端框架
  • @mui/material - UI 组件库
  • dayjs - 日期处理
  • @webext-core/messaging - 扩展消息通信

贡献指南

  1. Fork 项目
  2. 创建功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 创建 Pull Request

许可证

此项目为私有项目 (private: true),仅供内部使用。

S
Description
No description provided
Readme MIT 4.5 MiB
Languages
TypeScript 98.9%
CSS 0.5%
JavaScript 0.4%
HTML 0.2%