Postar Development Guide

📦 Project Overview

Postar is a browser extension project built with the WXT framework, using a modern frontend tech stack (Vue 3 + TypeScript). It supports declarative development and live hot-reload. Postar focuses on content sync and distribution for international media platforms, with a plugin-based architecture for platform extensibility.

🛠️ Development Environment Requirements

Prerequisites

• Node.js
• Package Manager: pnpm (recommended)

Optional Tools

• Git version control
• Chrome browser (latest version)

🔧 Development Workflow

1. Install dependencies

   pnpm i

2. Start the development server

   pnpm dev  # WXT dev mode with live reload and HMR

3. Load the extension
   • Navigate to chrome://extensions
   • Enable Developer mode
   • Click Load unpacked
   • Select the .output/chrome-mv3-dev directory

🚀 Build & Release

• Production build:

  pnpm build

• Generate release package (ZIP format):

  pnpm zip

🛠️ Development Guide

Background Script

• Manages the extension lifecycle (install/update/uninstall)
• Listens to browser events (tab updates, history changes, etc.)
• No DOM access (cannot directly access web page DOM; must use content scripts as proxy)
• Non-persistent execution (in Manifest V3, wakes up on demand and goes to sleep after event handling)
• Receives messages from content scripts/popups via chrome.runtime.sendMessage
• Sends commands to specific tabs via chrome.tabs.sendMessage

Content Script

• Can directly access page DOM, but cannot call most Chrome APIs
• Communicates with the background via chrome.runtime.sendMessage
• Supports intelligent web content extraction (Readability parsing)
• Supports text selection sync and image detection

Sidepanel

• Supports Vue.js component development with full Chrome API access
• Uses chrome.storage for data persistence

Plugin System

• Built on the plugin engine (@gitcoffee/postbot-plugin-engine) for platform extensibility
• International platform publisher plugin (@gitcoffee/postbot-publisher-en) included by default
• Supports custom platform registration and metadata management

📁 Project Structure

src/
├── api/              # API interfaces and configuration
├── assets/           # Static assets (icons, etc.)
├── background/       # Background scripts
├── config/           # Configuration files
├── content/          # Content scripts (float button, modal)
├── entrypoints/      # WXT entry points
│   ├── background.ts
│   ├── content.ts
│   └── sidepanel/    # Sidepanel
├── events/           # Event handling (context menus, etc.)
├── locales/          # Internationalization (en/zh)
├── media/            # Media processing
│   ├── adapter/      # Media adapters
│   ├── handler/      # Media handlers
│   ├── meta/         # Platform metadata
│   ├── parser/       # Content parser
│   ├── processor/    # Media processor
│   └── publisher/    # Publisher
├── message/          # Message communication
├── plugins/          # Plugin system
├── stores/           # State management (Pinia)
└── styles/           # Global styles

❓ FAQ

• Hot reload not working: Try refreshing the extensions page or restarting the dev server.
• Type errors: Check tsconfig.json configuration and ensure all dependencies are installed.

🙌 Contributing

Contributions via Pull Request are welcome. Please ensure:

• Code style is consistent with the project
• Existing test cases pass
• Related documentation is updated

Contributing Guide