CLAUDE.md

1# CLAUDE.md
2 
3This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4 
5## Project Overview
6 
7MultiPost is a browser extension that enables one-click content publishing to multiple social media platforms. Built with Plasmo framework, it supports 30+ platforms including Zhihu, Weibo, Xiaohongshu, Bilibili, X, Instagram, and more.
8 
9## Development Commands
10 
11```bash
12pnpm dev          # Start development server with hot reload
13pnpm build        # Build and package extension for production
14pnpm lint         # Run ESLint
15pnpm lint:fix     # Auto-fix ESLint issues
16```
17 
18**Note:** Do not run `pnpm build` for testing during development. Use `pnpm dev` instead.
19 
20## Architecture
21 
22### Content Types
23 
24The extension handles four content types, each with platform-specific implementations:
25 
26- **Dynamic** (`src/sync/dynamic/`): Short-form posts (text, images)
27- **Article** (`src/sync/article/`): Long-form articles with HTML/Markdown
28- **Video** (`src/sync/video/`): Video uploads with metadata
29- **Podcast** (`src/sync/podcast/`): Audio content
30 
31### Core Data Structures (`src/sync/common.ts`)
32 
33- `SyncData`: Main payload containing platforms list, content data, and auto-publish flag
34- `PlatformInfo`: Platform configuration including inject URL and function
35- `DynamicData`, `ArticleData`, `VideoData`, `PodcastData`: Content-specific interfaces
36 
37### Platform Integration Pattern
38 
39Each platform has an `injectFunction` that:
401. Opens the platform's publishing page (`injectUrl`)
412. Uses DOM manipulation to fill in content
423. Handles file uploads and form submissions
43 
44Platform maps: `DynamicInfoMap`, `ArticleInfoMap`, `VideoInfoMap`, `PodcastInfoMap`
45 
46### Extension Components
47 
48- **Background** (`src/background/`): Service worker handling message routing, tab management, API services
49- **Popup** (`src/popup/`): Extension popup UI
50- **Sidepanel** (`src/sidepanel/`): Side panel interface
51- **Content Scripts** (`src/contents/`): Page helpers and scrapers
52- **Tabs** (`src/tabs/`): Standalone pages (publish, refresh-accounts, trust-domain)
53 
54### Message Flow
55 
56Background script (`src/background/index.ts`) routes messages:
57- `MULTIPOST_EXTENSION_PUBLISH`: Opens publish popup
58- `MULTIPOST_EXTENSION_PUBLISH_NOW`: Creates tabs and injects scripts
59- `MULTIPOST_EXTENSION_PLATFORMS`: Returns available platforms
60- `MULTIPOST_EXTENSION_GET_ACCOUNT_INFOS`: Returns logged-in account info
61 
62## Tech Stack
63 
64- **Framework**: Plasmo 0.90.5 (Manifest V3)
65- **UI**: HeroUI + Tailwind CSS
66- **Icons**: lucide-react (prefer over @iconify/react)
67- **Storage**: @plasmohq/storage
68 
69## Code Conventions
70 
71### TypeScript
72- Use interfaces over types
73- Use maps instead of enums
74- Use functional components with TypeScript interfaces
75- Naming: PascalCase for components/interfaces, camelCase for functions/variables, SNAKE_CASE for constants
76 
77### Styling
78- Mobile-first responsive design
79- Use `bg-background` and `text-foreground` for theme support
80- Use semantic color variables (e.g., `bg-primary-600` not `bg-blue-600`)
81- Use `gap` for spacing instead of margins
82 
83### i18n
84- Store translations in `/locales/[locale]/messages.json`
85- Use `chrome.i18n.getMessage('key')` for all UI text
86- Default locale: `zh_CN`
87- Console.log statements do not need i18n
88 
89## Adding a New Platform
90 
911. Create platform handler in appropriate directory (`src/sync/dynamic/`, `src/sync/article/`, etc.)
922. Export inject function that manipulates the platform's DOM
933. Add entry to corresponding InfoMap (e.g., `DynamicInfoMap` in `src/sync/dynamic.ts`)
944. Add account getter in `src/sync/account/` if platform requires login detection
955. Add i18n keys for platform name
96