Develop (#25)

核心功能新增
工具套件扩展
JSON 工具（差异比较、格式化、转 YAML/TOML、压缩）
Base64 转换器（文本/文件/图像编解码）
Markdown ↔ HTML 双向转换
JWT 解析器
文本统计工具
二维码生成/解析（替换库以减小体积）
表单工具（已移除）
表单映射、智能填充、高亮定位功能已移除
架构与工程改进
技术栈升级
引入 @webext-core/messaging 重构消息通信
添加 @dnd-kit 支持功能列表拖拽排序
引入 i18next 实现中英文国际化
使用 MUI 主题系统替代硬编码样式，支持暗色模式
代码质量
统一组件导出为默认导出
提取公共组件（TextInputArea、SwitchButtonGroup、PageHeader、DecodeResultPaper）
使用 useStorageState 钩子统一管理存储状态
添加 PageErrorBoundary 页面级错误边界
实现组件懒加载优化首屏性能
关键重构
路由系统重构 — 支持独立标签页模式，合并路由与功能配置
状态管理优化 — 存储状态增加快照机制、验证器和防抖处理
剪贴板与打印工具 — 统一为 async/await 形式，修复重复触发问题
存储清理器 — 使用 TextEncoder 准确计算 UTF-8 字节数，支持 TB 单位
测试与 CI
测试覆盖 — 为新增工具、公共组件、边界场景补充单元测试
CI 精简 — 移除 Firefox 测试，仅保留 Chrome；修正类型检查命令

.claude/settings.local.json

@@ -0,0 +1,19 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(npx vitest:*)",
+      "Bash(git rm:*)",
+      "Bash(git stash:*)",
+      "Bash(git reset:*)",
+      "Bash(git checkout:*)",
+      "Bash(npx tsc:*)",
+      "Bash(npx eslint:*)",
+      "Bash(npm run:*)",
+      "Bash(npm test:*)",
+      "Bash(pnpm typecheck *)",
+      "Bash(pnpm test *)"
+    ]
+  }
+}

AGENTS.md

@@ -16,7 +16,7 @@ This file provides guidance to AI agents (such as Gemini, Codex, etc.) when work
 - `npm run build:firefox` - 构建 Firefox 浏览器的生产版本
 - `npm run zip` - 打包 Chrome 扩展为 ZIP 文件
 - `npm run zip:firefox` - 打包 Firefox 扩展为 ZIP 文件
-- `npm run compile` - 执行 TypeScript 类型检查（`tsc --noEmit`）
+- `npm run typecheck` - 执行 TypeScript 类型检查（`tsc --noEmit`）
 - `npm run lint` - 运行 ESLint 静态代码检查
 
 ### 测试

pages/Base64Converter/FileMode.tsx

@@ -272,17 +272,8 @@ export default function FileMode() {
                   {t('base64Output')}
                 </Typography>
                 <Stack direction="row" spacing={1}>
-                  <CopyButton
+                  <CopyButton text={result.rawBase64} tooltip={t('copyRaw')} />
-                    text={result.rawBase64}
+                  <CopyButton text={result.output} tooltip={t('copyDataUri')} color="info" />
-                    tooltip={t('copyRaw')}
-                    showMessage={() => {}}
-                  />
-                  <CopyButton
-                    text={result.output}
-                    tooltip={t('copyDataUri')}
-                    color="info"
-                    showMessage={() => {}}
-                  />
                 </Stack>
               </Stack>
               <TextInputArea

pages/Base64Converter/ImageMode.tsx

@@ -291,17 +291,8 @@ export default function ImageMode() {
                   {t('base64Output')}
                 </Typography>
                 <Stack direction="row" spacing={1}>
-                  <CopyButton
+                  <CopyButton text={result.rawBase64} tooltip={t('copyRaw')} />
-                    text={result.rawBase64}
+                  <CopyButton text={result.output} tooltip={t('copyDataUri')} color="info" />
-                    tooltip={t('copyRaw')}
-                    showMessage={() => {}}
-                  />
-                  <CopyButton
-                    text={result.output}
-                    tooltip={t('copyDataUri')}
-                    color="info"
-                    showMessage={() => {}}
-                  />
                 </Stack>
               </Stack>
               <Box

pages/Base64Converter/TextMode.tsx

@@ -128,7 +128,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
             <Typography variant="caption" fontWeight={700} color="text.secondary">
               {outputLabel}
             </Typography>
-            <CopyButton text={output} showMessage={(_msg, _opts) => {}} />
+            <CopyButton text={output} />
           </Stack>
           <TextInputArea
             readOnly

pages/HtmlToMarkdown/index.tsx

@@ -214,11 +214,7 @@ export default function HtmlToMarkdownPage() {
                   <Typography variant="caption" sx={{ color: 'text.disabled' }}>
                     {t('charCount', { count: result.markdownLength })}
                   </Typography>
-                  <CopyButton
+                  <CopyButton text={result.markdown} size="small" />
-                    text={result.markdown}
-                    showMessage={(_msg, _opts) => {}}
-                    size="small"
-                  />
                 </Stack>
               </Box>
 

pages/Jwt/index.tsx

@@ -11,7 +11,6 @@ import { useTranslation } from 'react-i18next';
 interface SectionProps {
   title: string;
   content: unknown;
-  raw: string;
   color: string;
 }
 
@@ -99,13 +98,11 @@ export default function Index() {
               <Section
                 title={t('jwt:headerTitle')}
                 content={result.header}
-                raw={result.raw.header}
                 color="#fb015b" // JWT.io Header Color
               />
               <Section
                 title={t('jwt:payloadTitle')}
                 content={result.payload}
-                raw={result.raw.payload}
                 color="#d63aff" // JWT.io Payload Color
               />
               <Paper

pages/MarkdownToHtml/index.tsx

@@ -326,7 +326,7 @@ export default function MarkdownToHtmlPage() {
                   <Typography variant="caption" sx={{ color: 'text.disabled' }}>
                     {t('charCount', { count: result.htmlLength })}
                   </Typography>
-                  <CopyButton text={result.html} showMessage={(_msg, _opts) => {}} size="small" />
+                  <CopyButton text={result.html} size="small" />
                 </Stack>
               </Box>
 

utils/__tests__/base64Converter.test.ts

@@ -77,6 +77,11 @@ describe('base64ToText', () => {
     expect(result).toBe('hello');
   });
 
+  it('应该处理带参数（如 charset）的 data URI 前缀', () => {
+    const result = base64ToText('data:text/plain;charset=utf-8;base64,aGVsbG8=');
+    expect(result).toBe('hello');
+  });
+
   it('应该剥离带空白的 data URI 前缀', () => {
     const result = base64ToText('  data:text/plain;base64,aGVsbG8=  ');
     expect(result).toBe('hello');
@@ -168,6 +173,13 @@ describe('extractMimeTypeFromDataUri', () => {
     expect(extractMimeTypeFromDataUri('data:text/plain;base64,SGVsbG8=')).toBe('text/plain');
   });
 
+  it('应该从带参数的 data URI 中提取 MIME 类型', () => {
+    expect(extractMimeTypeFromDataUri('data:text/plain;charset=utf-8;base64,SGVsbG8=')).toBe(
+      'text/plain',
+    );
+    expect(extractMimeTypeFromDataUri('data:image/svg+xml;base64,PHN2Zw==')).toBe('image/svg+xml');
+  });
+
   it('应该对无效的 data URI 返回默认类型', () => {
     expect(extractMimeTypeFromDataUri('invalid')).toBe('application/octet-stream');
   });
@@ -333,6 +345,12 @@ describe('base64ToBlob', () => {
     expect(result.rawBase64).toBe('iVBORw0KGgo=');
   });
 
+  it('应该处理带参数的 data URI 前缀', () => {
+    const result = base64ToBlob('data:text/plain;charset=utf-8;base64,aGVsbG8=');
+    expect(result.rawBase64).toBe('aGVsbG8=');
+    expect(result.mimeType).toBe('text/plain');
+  });
+
   it('blob 大小应该等于解码后的字节数', () => {
     const result = base64ToBlob('aGVsbG8=');
     expect(result.blob.size).toBe(5);

utils/__tests__/storageCleaner.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { formatSize, isRestrictedUrl } from '@/utils/storageCleaner';
+import { clearCookies, formatSize, isRestrictedUrl } from '@/utils/storageCleaner';
 
 describe('storageCleaner utils', () => {
   describe('isRestrictedUrl', () => {
@@ -80,4 +80,54 @@ describe('storageCleaner utils', () => {
       expect(formatSize(1025)).toBe('1.0 KB');
     });
   });
+
+  describe('clearCookies', () => {
+    it('should strip leading dot from cookie domain when removing cookies', async () => {
+      const mockCookies = [
+        { name: 'session', domain: '.example.com', path: '/', secure: true, storeId: '0' },
+        { name: 'auth', domain: '.example.com', path: '/api', secure: false, storeId: '0' },
+      ];
+      (chrome.cookies.getAll as any).mockResolvedValue(mockCookies);
+      (chrome.cookies.remove as any).mockResolvedValue(undefined);
+
+      const result = await clearCookies('https://example.com');
+
+      expect(result).toEqual({ success: true, count: 2 });
+      expect(chrome.cookies.remove).toHaveBeenCalledWith({
+        url: 'https://example.com/',
+        name: 'session',
+        storeId: '0',
+      });
+      expect(chrome.cookies.remove).toHaveBeenCalledWith({
+        url: 'http://example.com/api',
+        name: 'auth',
+        storeId: '0',
+      });
+    });
+
+    it('should handle domains without leading dot', async () => {
+      const mockCookies = [
+        { name: 'pref', domain: 'sub.example.com', path: '/path', secure: true, storeId: '0' },
+      ];
+      (chrome.cookies.getAll as any).mockResolvedValue(mockCookies);
+      (chrome.cookies.remove as any).mockResolvedValue(undefined);
+
+      const result = await clearCookies('https://sub.example.com');
+
+      expect(result).toEqual({ success: true, count: 1 });
+      expect(chrome.cookies.remove).toHaveBeenCalledWith({
+        url: 'https://sub.example.com/path',
+        name: 'pref',
+        storeId: '0',
+      });
+    });
+
+    it('should return error when operation fails', async () => {
+      (chrome.cookies.getAll as any).mockRejectedValue(new Error('Permission denied'));
+
+      const result = await clearCookies('https://example.com');
+
+      expect(result).toEqual({ success: false, error: 'Error: Permission denied' });
+    });
+  });
 });

utils/base64Converter.ts

@@ -78,8 +78,8 @@ export function textToBase64(text: string): TextToBase64Result {
   };
 }
 
-/** 匹配 data URI 的 base64 前缀，如 "data:image/png;base64," */
+/** 匹配 data URI 的 base64 前缀，如 "data:image/png;base64,"（允许中间含参数） */
-const DATA_URI_BASE64_PREFIX = /^data:[^;,]+;base64,/i;
+const DATA_URI_BASE64_PREFIX = /^data:[^,]+;base64,/i;
 
 /**
  * 将 Base64 字符串解码为文本
@@ -208,7 +208,7 @@ export function fileToBase64(file: File): Promise<FileToBase64Result> {
  * @returns MIME 类型
  */
 export function extractMimeTypeFromDataUri(dataUri: string): string {
-  const match = dataUri.match(/^data:([^;]+);base64,/);
+  const match = dataUri.match(/^data:([^;,]+)[^,]*;base64,/);
   return match ? match[1] : 'application/octet-stream';
 }
 

utils/storageCleaner.ts

@@ -192,7 +192,8 @@ export async function clearCookies(url: string): Promise<StorageCleanResult> {
     const cookies = await chrome.cookies.getAll({ url });
     for (const cookie of cookies) {
       const protocol = cookie.secure ? 'https:' : 'http:';
-      const cookieUrl = `${protocol}//${cookie.domain}${cookie.path}`;
+      const domain = cookie.domain.startsWith('.') ? cookie.domain.slice(1) : cookie.domain;
+      const cookieUrl = `${protocol}//${domain}${cookie.path}`;
       await chrome.cookies.remove({
         url: cookieUrl,
         name: cookie.name,