create-extension-react 0.0.1

package/src/utils/initTheme.ts

@@ -0,0 +1,40 @@
+/**
+ * 同步初始化主题 - 在 React 渲染前执行
+ * 避免主题闪烁
+ */
+export function initTheme(): void {
+  try {
+    // 检测系统主题偏好
+    const getSystemTheme = (): 'light' | 'dark' => {
+      if (typeof window !== 'undefined' && window.matchMedia) {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light';
+      }
+      return 'light'; // 降级方案
+    };
+
+    // 先设置系统主题作为默认值
+    const systemTheme = getSystemTheme();
+    document.documentElement.setAttribute('data-theme', systemTheme);
+
+    // 异步读取实际配置并更新（如果用户之前设置过主题）
+    if (typeof chrome !== 'undefined' && chrome.storage) {
+      chrome.storage.local.get(['theme'], (result) => {
+        // 如果存储中有主题配置，使用存储的主题
+        if (result.theme !== undefined) {
+          const isDarkMode = result.theme === true;
+          document.documentElement.setAttribute(
+            'data-theme',
+            isDarkMode ? 'dark' : 'light'
+          );
+        }
+        // 如果没有存储的主题配置，保持系统主题
+      });
+    }
+  } catch (error) {
+    console.error('Error initializing theme:', error);
+    // 设置默认主题
+    document.documentElement.setAttribute('data-theme', 'light');
+  }
+}

package/src/variables.css

@@ -0,0 +1,146 @@
+/* 颜色变量定义 */
+
+/* 基础颜色 */
+:root {
+  /* 主色调 - 亮色主题 */
+  --color-primary: #667eea;
+  --color-primary-dark: #764ba2;
+  --color-primary-light: #8b9eff;
+
+  /* 背景色 - 亮色主题 */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #e0e0e0;
+
+  /* 文字色 - 亮色主题 */
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --text-tertiary: #999999;
+  --text-inverse: #ffffff;
+
+  /* 边框色 - 亮色主题 */
+  --border-color: #e0e0e0;
+  --border-color-light: #f0f0f0;
+  --border-color-dark: #cccccc;
+
+  /* 阴影 - 亮色主题 */
+  --shadow-sm: rgba(0, 0, 0, 0.05);
+  --shadow-md: rgba(0, 0, 0, 0.1);
+  --shadow-lg: rgba(0, 0, 0, 0.15);
+  --shadow-xl: rgba(0, 0, 0, 0.3);
+  --shadow-primary: rgba(102, 126, 234, 0.4);
+
+  /* 渐变 - 亮色主题 */
+  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --gradient-bg-light: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+  /* 半透明背景 */
+  --bg-overlay-light: rgba(255, 255, 255, 0.25);
+  --bg-overlay-dark: rgba(0, 0, 0, 0.1);
+
+  /* 标题背景 - 更深的半透明 */
+  --bg-header-light: rgba(255, 255, 255, 0.4);
+  --bg-header-dark: rgba(0, 0, 0, 0.5);
+
+  /* 标题文字阴影 - 增强对比度 */
+  --text-shadow-header: 0 3px 12px rgba(0, 0, 0, 0.7),
+    0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
+  --text-shadow-header-dark: 0 3px 12px rgba(0, 0, 0, 0.9),
+    0 2px 6px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
+
+  /* 按钮颜色 */
+  --button-bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --button-bg-hover: rgba(102, 126, 234, 0.4);
+
+  /* 状态颜色 */
+  --color-success: #4caf50;
+  --color-error: #f44336;
+  --color-warning: #ff9800;
+  --color-info: #2196f3;
+
+  /* 禁用状态 */
+  --opacity-disabled: 0.6;
+
+  /* 圆角 */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* 间距 */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 40px;
+}
+
+/* 暗色主题 */
+[data-theme='dark'] {
+  /* 主色调 - 暗色主题 */
+  --color-primary: #8b9eff;
+  --color-primary-dark: #4a5568;
+  --color-primary-light: #a5b4fc;
+
+  /* 背景色 - 暗色主题 */
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2d2d2d;
+  --bg-tertiary: #404040;
+
+  /* 文字色 - 暗色主题 */
+  --text-primary: #ffffff;
+  --text-secondary: #b0b0b0;
+  --text-tertiary: #808080;
+  --text-inverse: #333333;
+
+  /* 边框色 - 暗色主题 */
+  --border-color: #404040;
+  --border-color-light: #2d2d2d;
+  --border-color-dark: #555555;
+
+  /* 阴影 - 暗色主题 */
+  --shadow-sm: rgba(0, 0, 0, 0.2);
+  --shadow-md: rgba(0, 0, 0, 0.3);
+  --shadow-lg: rgba(0, 0, 0, 0.4);
+  --shadow-xl: rgba(0, 0, 0, 0.6);
+  --shadow-primary: rgba(0, 0, 0, 0.5);
+
+  /* 渐变 - 暗色主题 */
+  --gradient-primary: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+  --gradient-bg-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+
+  /* 半透明背景 */
+  --bg-overlay-light: rgba(255, 255, 255, 0.05);
+  --bg-overlay-dark: rgba(0, 0, 0, 0.5);
+
+  /* 标题背景 - 更深的半透明 */
+  --bg-header-light: rgba(255, 255, 255, 0.1);
+  --bg-header-dark: rgba(0, 0, 0, 0.6);
+
+  /* 标题文字阴影 - 增强对比度 */
+  --text-shadow-header: 0 3px 12px rgba(0, 0, 0, 0.7),
+    0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
+  --text-shadow-header-dark: 0 3px 12px rgba(0, 0, 0, 0.9),
+    0 2px 6px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
+
+  /* 按钮颜色 */
+  --button-bg-primary: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+  --button-bg-hover: rgba(0, 0, 0, 0.5);
+
+  /* 圆角 */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* 间距 */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 40px;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["chrome"]
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "vite-plugin-*.ts"]
+}

package/vite-plugin-fix-extension.ts

@@ -0,0 +1,81 @@
+import type { Plugin } from 'vite';
+import {
+  copyFileSync,
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  existsSync,
+  rmSync,
+} from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export function fixExtension(): Plugin {
+  return {
+    name: 'fix-extension',
+    writeBundle() {
+      // 构建完成后修复扩展文件
+      const distDir = join(__dirname, 'dist');
+      const manifestSrc = join(__dirname, 'src/manifest.json');
+      const manifestDest = join(distDir, 'manifest.json');
+      const popupHtmlSrc = join(distDir, 'src/popup.html');
+      const popupHtmlDest = join(distDir, 'popup.html');
+      const srcDir = join(distDir, 'src');
+
+      // 复制 manifest.json
+      try {
+        mkdirSync(distDir, { recursive: true });
+        copyFileSync(manifestSrc, manifestDest);
+        console.log('✓ manifest.json copied to dist');
+      } catch (error) {
+        console.error('Error copying manifest.json:', error);
+      }
+
+      // 移动并修复 popup.html
+      if (existsSync(popupHtmlSrc)) {
+        try {
+          let content = readFileSync(popupHtmlSrc, 'utf-8');
+          // 修复资源路径：将 /assets/ 改为 ./assets/
+          content = content.replace(/href="\/assets\//g, 'href="./assets/');
+          content = content.replace(/src="\/assets\//g, 'src="./assets/');
+
+          writeFileSync(popupHtmlDest, content);
+          console.log('✓ popup.html moved and fixed');
+        } catch (error) {
+          console.error('Error fixing popup.html:', error);
+        }
+      }
+
+      // 移动并修复 newtab.html
+      const newtabHtmlSrc = join(distDir, 'src/newtab.html');
+      const newtabHtmlDest = join(distDir, 'newtab.html');
+      if (existsSync(newtabHtmlSrc)) {
+        try {
+          let content = readFileSync(newtabHtmlSrc, 'utf-8');
+          // 修复资源路径：将 /assets/ 改为 ./assets/
+          content = content.replace(/href="\/assets\//g, 'href="./assets/');
+          content = content.replace(/src="\/assets\//g, 'src="./assets/');
+
+          writeFileSync(newtabHtmlDest, content);
+          console.log('✓ newtab.html moved and fixed');
+        } catch (error) {
+          console.error('Error fixing newtab.html:', error);
+        }
+      } else {
+        console.warn('⚠ newtab.html not found in dist/src/, skipping...');
+      }
+
+      // 删除 src 目录（确保所有文件都已处理）
+      try {
+        if (existsSync(srcDir)) {
+          rmSync(srcDir, { recursive: true, force: true });
+        }
+      } catch (e) {
+        console.warn('⚠ Could not remove src directory:', e);
+      }
+    },
+  };
+}

package/vite.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import { fixExtension } from './vite-plugin-fix-extension';
+
+export default defineConfig(({ mode }) => {
+  // 检查是否为开发模式（通过 mode）
+  const isDev =
+    mode === 'development' || process.env.NODE_ENV === 'development';
+
+  return {
+    plugins: [react(), fixExtension()],
+    css: {
+      modules: {
+        // CSS Modules 类名生成规则
+        generateScopedName: '[name]__[local]___[hash:base64:5]',
+      },
+    },
+    build: {
+      outDir: 'dist',
+      emptyOutDir: true,
+      minify: !isDev, // 开发模式不压缩，生产模式压缩
+      rollupOptions: {
+        input: {
+          popup: resolve(__dirname, 'src/popup.html'),
+          newtab: resolve(__dirname, 'src/newtab.html'),
+          history: resolve(__dirname, 'src/history.html'),
+          bookmarks: resolve(__dirname, 'src/bookmarks.html'),
+          background: resolve(__dirname, 'src/background.ts'),
+          content: resolve(__dirname, 'src/content.ts'),
+        },
+        output: {
+          entryFileNames: (chunkInfo) => {
+            return chunkInfo.name === 'background' ||
+              chunkInfo.name === 'content'
+              ? '[name].js'
+              : 'assets/[name]-[hash].js';
+          },
+          chunkFileNames: 'assets/[name]-[hash].js',
+          assetFileNames: (assetInfo) => {
+            if (assetInfo.name === 'popup.html') {
+              return '[name][extname]';
+            }
+            return 'assets/[name]-[hash].[ext]';
+          },
+        },
+      },
+    },
+  };
+});