React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

🧠 Tweet Assistant AI - React + Vite Chrome Extension

A modern Chrome extension built with React, TypeScript, and Vite for AI-powered tweet generation and replies.

✨ Features

🚀 AI-Powered Tweet Generation

Multiple AI Models: Claude 3 (Opus/Sonnet), GPT-4o/5/Mini, Gemini 1.5 Pro
Context Menu Integration: Right-click selected text → "Generate Reply with TweetAI"
Auto-load Selected Text: Automatically loads selected text into the input field
Multiple Tones: Casual 😊, Funny 😂, Savage 😎, Motivational 🚀, Professional 🧑‍💼
Adjustable Count: Generate 1-3 tweets at once

🎨 Modern UI/UX

Dark Theme: Beautiful dark interface with liquid glass effects
Glassmorphism Design: Modern blur effects and translucent elements
Responsive Layout: Optimized for Chrome extension popup (380x500px)
Smooth Animations: Hover effects and loading states

⚙️ Integrated Settings

In-Popup Settings: No separate settings window needed
API Key Management: Secure storage for Claude, OpenAI, and Gemini keys
Persistent Storage: Settings saved using Chrome's local storage
Visual Feedback: Success notifications when saving

🔧 Chrome Extension Features

Manifest V3: Latest Chrome extension standard
Background Service Worker: Context menu handling
Content Script: Insert generated tweets back into web pages
Badge Notifications: Visual indicator when text is selected

🛠 Technology Stack

Frontend: React 19 + TypeScript
Build Tool: Vite 7
Styling: Custom CSS with glassmorphism effects
Chrome APIs: Storage, Context Menus, Scripting, Active Tab

📦 Installation

Development Setup

Install Dependencies:
```
pnpm install
```
Development Mode:
```
pnpm dev
```
Build for Production:
```
pnpm build
```

Chrome Extension Installation

Build the Extension:
```
pnpm build
```
Load in Chrome:
- Open Chrome and go to chrome://extensions/
- Enable "Developer mode" (top right toggle)
- Click "Load unpacked" and select the dist folder
Setup API Keys:
- Click the extension icon in Chrome toolbar
- Click "⚙️ Settings" to expand settings panel
- Add your API keys for Claude, OpenAI, and/or Gemini
- Click "💾 Save Keys"

🚀 Usage

Generate Tweet Replies

Select text on any webpage (tweet, article, etc.)
Right-click and choose "🧠 Generate Reply with TweetAI"
Click extension icon - selected text auto-loads
Choose tone and count, select AI model
Click "✨ Generate Tweet"
Click "↘️ Insert into page" to add tweet to the webpage

Generate Original Tweets

Click extension icon
Type your topic in the input field
Choose settings and click "✨ Generate Tweet"
Copy or insert the generated tweet

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

jsonpreet/tweet-ai-extension