A web extension to help promote your product on social media

AI-powered social media self-promotion assistant with comprehensive analytics and A/B testing capabilities.

• Chrome/Edge: Install from Chrome Web Store
• Firefox: Install from Firefox Add-ons

• 🤖 AI Content Generation: Generate multiple promotional content variations using OpenAI
• 📊 Analytics Dashboard: Track performance across platforms with detailed metrics
• 🔄 A/B Testing: Compare content variation performance
• 💾 Data Portability: Export/import all data as JSON for cross-browser/machine use
• 🎯 Multi-Project Management: Manage multiple products simultaneously
• 🌐 Cross-Platform: Supports 10 platforms - Twitter/X, LinkedIn, Reddit, Facebook, Stacker News, Bluesky, Primal.net, Slack, Discord, and Telegram
• 📱 Cross-Browser Sidebar: Content-script based sidebar works on all browsers without platform-specific APIs

1. Clone the repository

   git clone https://github.com/ralyodio/defpromo.git cd defpromo

2. Install dependencies

3. Build the extension

   # Build for Chrome/Edge (default) pnpm build # or pnpm build:chrome # Build for Firefox pnpm build:firefox # Build for Safari pnpm build:safari # Build for all browsers pnpm build:all

   Note: Each build automatically cleans its target directory before building, ensuring no stale code remains.

1. Build: pnpm build:chrome
2. Open chrome://extensions/ (or edge://extensions/)
3. Enable "Developer mode" (toggle in top right)
4. Click "Load unpacked"
5. Select the dist/chrome folder

1. Build: pnpm build:firefox
2. Open about:debugging#/runtime/this-firefox
3. Click "Load Temporary Add-on"
4. Navigate to dist/firefox and select manifest.json

Safari supports web extensions but requires conversion using Xcode:

1. Build: pnpm build:safari
2. Install Xcode from the Mac App Store
3. Run the Safari Web Extension Converter:
   xcrun safari-web-extension-converter dist/safari/
4. Follow the prompts to create a Safari app project
5. Open the generated Xcode project
6. Build and run the project
7. Enable the extension in Safari preferences

See Apple's documentation for detailed instructions.

Note: Safari conversion creates a native macOS/iOS app wrapper around the web extension. The extension code remains the same, but distribution requires the App Store or developer signing.

1. Click the DefPromo extension icon in your browser toolbar (or press Ctrl+Shift+S / Cmd+Shift+S)
2. The sidebar will appear on the right side of the page
3. Navigate to Settings tab
4. Add your API keys:
   • OpenAI API Key: Required for AI content generation
   • Web Scraper API Key: Required for automatic product information extraction
   • Choose your preferred scraper service (ScrapingBee, ScraperAPI, or Browserless)
5. Click "Save Settings"

1. Go to the Projects tab
2. Click "+ New Project"
3. Enter:
   • Project name
   • Product URL (will be auto-scraped for details)
   • Optional description
4. Click "Create Project"

The extension will automatically scrape your product page and use AI to extract key information.

1. Select a project from the Projects tab
2. Navigate to the Content tab
3. Choose content type (Post or Comment)
4. Click "Generate Variations"
5. Review and edit the generated variations
6. Select your preferred variation

1. Visit any supported platform (Twitter/X, LinkedIn, Reddit, Facebook)
2. Navigate to a post or comment form
3. Look for the DefPromo auto-fill button near the form
4. Click the button to insert your generated content
5. The extension automatically tracks this submission in analytics

1. Navigate to the Analytics tab
2. View comprehensive metrics:
   • Total submissions by platform
   • Time-series charts
   • Platform comparisons
   • Best performing content
   • A/B testing insights
3. Manually update engagement metrics (likes, comments, shares) for tracked content

Export:

1. Go to Settings tab
2. Click "Export All Data"
3. Save the JSON file to your preferred location

Import:

1. Go to Settings tab
2. Click "Import Data"
3. Select your previously exported JSON file
4. All data will be restored (replaces current data)

For detailed information about the sidebar architecture, see docs/SIDEBAR_ARCHITECTURE.md.

• Frontend: React 19 + JavaScript (ES2024+)
• Styling: Tailwind CSS v4
• Build Tool: Vite 7
• Database: IndexedDB with Dexie.js
• Testing: Vitest + Testing Library
• Charts: Recharts
• APIs: OpenAI API, Web Scraper APIs

Get your API key from OpenAI Platform

Choose one:

• ScrapingBee: https://www.scrapingbee.com/ - $49/mo for 100k credits
• ScraperAPI: https://www.scraperapi.com/ - $49/mo for 100k calls
• Browserless: https://www.browserless.io/ - $29/mo for 10k requests

The extension now uses a cross-browser content-script sidebar instead of browser-specific APIs, providing 100% compatibility:

• ✅ Chrome/Chromium (Manifest V3) - Full support
• ✅ Edge (Manifest V3) - Full support
• ✅ Firefox (Manifest V3) - Full support
• ✅ Safari (with Xcode conversion) - Full support

Key Features:

• No platform-specific APIs (sidePanel, sidebar_action)
• Shadow DOM for style isolation
• Resizable sidebar (300-600px)
• Keyboard shortcut: Ctrl+Shift+S (Windows/Linux) or Cmd+Shift+S (Mac)
• State persistence across page navigations

• All data stored locally in IndexedDB
• No data sent to external servers except user-configured APIs (OpenAI, Web Scraper)
• API keys stored securely in browser storage
• Export files contain sensitive data - handle with care

This is a personal project, but suggestions and bug reports are welcome via GitHub issues.

ISC

For issues or questions, please open an issue on GitHub.