Skip to content

README.md

Latest commit

 

History

History
351 lines (271 loc) · 10.6 KB

README.md

File metadata and controls

351 lines (271 loc) · 10.6 KB
Raw

PostPilot 🚀

A powerful Chrome extension that allows you to automate and schedule social media posts across multiple platforms directly from your browser.

Demo

PostPilot demo

The unpacked extension loaded in Chromium: browsing History and Settings, running a LinkedIn connection check while logged out, then drafting a post with an image, title, content and tags, stopping before Create Post.

What is PostPilot?

PostPilot is a browser extension designed to streamline your social media workflow. Instead of manually posting on each platform, PostPilot lets you:

  • Create posts once - Draft content with images and hashtags in one place
  • Post to multiple platforms - Simultaneously publish to LinkedIn, Twitter/X, and Dev.to
  • Maintain consistency - Keep a history of all posts made through the extension
  • Save time - Automate repetitive posting tasks across platforms

Features

Current Features ✅

  • Multi-platform posting (LinkedIn, Twitter/X, Dev.to)
  • Post drafting with title, content, tags, and images
  • Post history tracking with timestamps
  • Platform connection status management
  • Settings panel for API tokens and configuration
  • Dev.to API integration with Cloudinary image uploads
  • Chrome notifications for error reporting
  • Comprehensive error handling with user-friendly alerts
  • Well-documented codebase with JSDoc comments

Supported Platforms

  • LinkedIn - Post to your LinkedIn feed (scrape method)
  • Twitter/X - Tweet directly to your Twitter account (scrape method)
  • Dev.to - Publish articles to Dev.to with image support (API method via Cloudinary)

Project Status

Current State: Beta (v0.1.0)

Implemented:

  • ✅ Core extension infrastructure with Manifest V3
  • ✅ React-based UI with Tailwind CSS
  • ✅ Draft page for creating posts
  • ✅ History page for viewing posted content
  • ✅ Settings page for platform configuration
  • ✅ Storage system for posts and settings
  • ✅ Content scripts for LinkedIn and Twitter scraping
  • ✅ Background service worker for message handling
  • ✅ Dev.to API integration with full article publishing
  • ✅ Cloudinary integration for image uploads to Dev.to
  • ✅ Error notifications via Chrome notifications API
  • ✅ Comprehensive error handling and user feedback
  • ✅ JSDoc documentation for all functions
  • ✅ Platform connection testing and verification
  • ✅ Disconnect functionality for all platforms

In Progress:

  • 🔄 Image upload functionality for LinkedIn (paste-based)
  • 🔄 Twitter posting improvements
  • 🔄 Enhanced testing across platforms

Planned Features:

  • 📋 Schedule posts for later
  • 🎨 Rich text editor with preview
  • 📊 Analytics and engagement tracking
  • 🔐 Enhanced security for credentials
  • 🌙 Dark mode support
  • 🌍 Multi-language support
  • 🔄 Post editing and drafts management

Installation

Prerequisites

  • Google Chrome or Chromium-based browser
  • Node.js 18+ and npm/pnpm
  • Git (for development)

Installation Steps

  1. Clone the repository

    git clone https://github.com/shub3am/postpilot.git
cd postpilot/extension

  2. Install dependencies

    pnpm install
# or with npm
npm install

  3. Build the extension

    pnpm build
# or with npm
npm run build

  4. Load the extension in Chrome

    • Open Chrome and navigate to chrome://extensions/
    • Enable "Developer mode" (toggle in top right)
    • Click "Load unpacked"
    • Select the dist/ folder from your project directory
    • The PostPilot extension should now appear in your Chrome toolbar

  5. Start using PostPilot

    • Click the PostPilot icon in your Chrome toolbar
    • Visit the Settings tab to connect your platforms
    • Create your first post in the Draft tab
    • Check History to see all your posts

Development Setup

For development with hot reload:

pnpm dev

This will start the Vite development server. After making changes:

  1. The extension will automatically reload
  2. Visit the extension popup or options page to see your changes

Automated Testing

Run the automated test suite:

pnpm test

Run tests in watch mode:

pnpm test:watch

Generate coverage report:

pnpm test:coverage

Usage

Creating Your First Post

  1. Open PostPilot from the Chrome toolbar
  2. Go to the Draft tab
  3. Fill in:
    • Title - Your post title
    • Content - The main text of your post
    • Tags - Add relevant hashtags (will be appended to content)
    • Image - Upload an image (optional)
  4. Select which platforms to post to
  5. Click "Publish"

Connecting Platforms

  1. Go to the Settings tab

  2. For each platform:

    LinkedIn & Twitter/X:

    • Click "Check Connection" to verify you're logged in
    • These platforms use scraping (no API token needed)

    Dev.to:

    • Enter your Dev.to API token (get it from Dev.to Settings)
    • Configure Cloudinary settings for image uploads:
      • Cloud Name (from your Cloudinary dashboard)
      • Unsigned Upload Preset (create one in Cloudinary settings)
    • Click "Check Connection" to verify

  3. Once connected, you'll see your profile info and a green "connected" status

  4. You can disconnect anytime by clicking the "Disconnect" button

Viewing Post History

  1. Go to the History tab
  2. All your posted content appears here with:
    • Post title and preview
    • Associated tags
    • Posted date and time
    • Post image (if included)

How to Contribute

We welcome contributions from the community! Here's how you can help:

Getting Started

  1. Fork the repository

    # Click "Fork" on GitHub

  2. Clone your fork

    git clone https://github.com/shub3am/postpilot.git
cd postpilot/extension

  3. Create a feature branch

    git checkout -b feature/your-feature-name

  4. Install dependencies

    pnpm install

Development Guidelines

  • Code Style: Follow the existing code structure and TypeScript conventions
  • Testing: Test your changes thoroughly on actual social media platforms
  • Commits: Use clear, descriptive commit messages
  • Pull Requests:
    • Provide a clear description of what you've changed
    • Reference any related issues
    • Include screenshots for UI changes
    • Ensure all code builds without errors (pnpm build)

Areas for Contribution

  • Platform Support: Add new social media platforms (Medium, Hashnode, etc.)
  • Features: Implement post scheduling, analytics, or rich text editing
  • Bug Fixes: Help squash bugs and improve stability
  • Documentation: Improve README, add comments, create user guides
  • Testing: Write automated tests for better code coverage
  • UI/UX: Improve the design and user experience
  • Localization: Add support for different languages
  • Security: Improve credential handling and data encryption
  • Performance: Optimize bundle size and runtime performance

Code Structure

src/
├── background/          # Service worker and API actions
├── components/          # Reusable React components
├── pages/              # Main UI pages (Draft, History, Settings)
├── platforms/          # Platform-specific code
│   ├── linkedin/       # LinkedIn integration
│   ├── twitter/        # Twitter/X integration
│   └── devto/          # Dev.to integration
└── utils/              # Utilities and storage helpers

Testing Your Changes

  1. Build the extension

    pnpm build

  2. Load it in Chrome:

    • Navigate to chrome://extensions/
    • Click "Load unpacked" and select the dist/ folder

  3. Test on actual platforms:

    • Keep your platform accounts logged in
    • Test all posting paths (both API and scrape methods)
    • Verify all data is stored correctly

Project Structure

extension/
├── src/
│   ├── background/           # Service worker
│   ├── components/           # React components
│   ├── pages/               # UI pages
│   ├── platforms/           # Multi-platform integrations
│   ├── utils/               # Utilities and types
│   ├── main.tsx             # React entry point
│   └── index.css             # Global styles
├── public/                   # Public assets
├── manifest.json             # Chrome extension manifest
├── package.json              # Dependencies and scripts
├── vite.config.ts            # Vite configuration
├── tsconfig.json             # TypeScript configuration
└── README.md                 # This file

Tech Stack

  • React 19 - UI framework
  • TypeScript - Type-safe development
  • Tailwind CSS - Styling
  • Vite - Build tool
  • CRXJS - Chrome extension bundler
  • Lucide React - Icons
  • Sonner - Toast notifications

Known Issues & Limitations

  • LinkedIn and Twitter use scraping methods (may break with platform updates)
  • Dev.to requires API token and Cloudinary configuration for images
  • Image uploads to Dev.to require Cloudinary account (free tier available)
  • Posts to LinkedIn need to be relatively short
  • Extension currently supports Chrome/Chromium browsers only

Troubleshooting

Extension not loading?

  • Make sure you're in Developer mode (chrome://extensions/)
  • Try rebuilding: pnpm build
  • Clear browser cache and reload the extension
  • Check the console for any error messages

Posts not appearing?

  • Verify you're connected to the platform (check Settings tab)
  • Ensure you're logged into the platform in the same browser
  • For Dev.to, verify your API token is correct
  • Check Chrome notifications for any error messages

Can't upload images to Dev.to?

  • Verify your Cloudinary settings are configured correctly
  • Ensure your Cloudinary upload preset is set to "unsigned"
  • Check that your image is a valid format (JPEG, PNG, GIF)
  • Verify Cloudinary account has upload quota remaining

Connection check failing?

  • Make sure you're logged into the platform in your browser
  • For Dev.to, verify your API token is valid
  • Try disconnecting and reconnecting
  • Check if the platform's website layout has changed (may affect scraping)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

Acknowledgments

  • Built with React, TypeScript, and Vite
  • Icons from Lucide React
  • Notifications powered by Sonner
  • Styling with Tailwind CSS

Made with ❤️ by the PostPilot team