Text Style Transformer

A Chrome extension that transforms text into different work-appropriate styles using Google Gemini 2.0. The extension provides a clean, intuitive interface for rewriting text in various professional tones.

What This Plugin Does

This Chrome extension allows you to take any text you select or type, then send it to Google Gemini (or another LLM) to transform it into different writing styles. Whether you need to make your message more professional, diplomatic, motivational, or any other work-appropriate tone, this tool helps you communicate more effectively.

Key Features:

• Text Input: Type or paste any text you want to transform
• AI-Powered: Uses Google Gemini 2.0 to intelligently rewrite your text
• Multiple Styles: Choose from 7 different professional writing styles
• Instant Results: Get transformed text in seconds
• Easy Copy: Copy the results directly to your clipboard

Features

• 7 Professional Styles: Transform text into different work-appropriate tones
• Real-time Processing: Uses Google Gemini 2.0 for high-quality text transformation
• Clean UI: Modern, responsive popup interface
• Copy to Clipboard: Easy copying of transformed text
• Persistent Storage: Saves your input and output text between sessions
• Keyboard Shortcuts: Quick access with Ctrl/Cmd + Enter

Available Styles

1. Professional / Formal – Clear, concise, businesslike
2. Conciliatory / Diplomatic – Smooths over disagreements or sensitive topics
3. Encouraging / Motivational – Uplifts or motivates the reader
4. Appreciative / Grateful – Expresses thanks or recognition
5. Confident / Assertive – Strong and clear messaging without being rude
6. Simplified / Layman-friendly – Makes complex concepts easy to understand
7. Polished / Executive-ready – Suitable for leadership-level communication

Project Structure

Text-Style-Transformer/
├── chrome-extension/
│   ├── manifest.json          # Chrome extension manifest (V3)
│   ├── popup.html            # Extension popup interface
│   ├── popup.css             # Styling for the popup
│   ├── popup.js              # JavaScript functionality
│   └── icons/                # Extension icons (optional)
├── backend/
│   ├── app.py                # Flask API server
│   ├── requirements.txt      # Python dependencies
│   └── env.example           # Environment variables template
├── .venv/
│   └── .env                  # API key configuration (create this)
└── README.md                 # This file

Setup Instructions

⚠️ IMPORTANT: Start the Backend First!

You MUST start the backend server before loading the Chrome extension. The extension will not work without the backend running.

1. Backend Setup (Required First)

1. Install Python Dependencies:

   cd backend
   pip install -r requirements.txt

2. Get Google Gemini API Key:

   • Visit Google AI Studio
   • Create a new API key
   • Copy the API key

3. Configure Environment Variables:

   # Create the .venv directory if it doesn't exist
   mkdir -p .venv
   
   # Create the .env file
   echo "GEMINI_API_KEY=your_actual_api_key_here" > .venv/.env

   Or manually create .venv/.env with:

   GEMINI_API_KEY=your_actual_api_key_here
   

4. Start the Backend Server (REQUIRED):

   # Activate virtual environment and start server
   source .venv/bin/activate
   cd backend
   python app.py

   The server will start on http://localhost:8000

   Keep this terminal window open! The server must stay running for the extension to work.

2. Chrome Extension Setup (After Backend is Running)

⚠️ Only do this AFTER the backend server is running!

1. Load the Extension:

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" (toggle in top right)
   • Click "Load unpacked"
   • Select the chrome-extension folder

2. Pin the Extension (optional):

   • Click the puzzle piece icon in Chrome toolbar
   • Pin "Text Style Transformer" for easy access

3. Usage

1. Open the Extension:

   • Click the extension icon in your Chrome toolbar
   • The popup will open

2. Transform Text:

   • Type or paste any text you want to transform in the input textarea
   • Click one of the 7 style buttons (Professional, Diplomatic, Motivational, etc.)
   • Wait for the transformation (loading indicator will show)
   • Copy the result using the "Copy Result" button

3. How It Works:

   • Your text is sent to Google Gemini 2.0 AI
   • The AI rewrites your text in the selected professional style
   • The transformed text appears in the output area
   • You can copy it and use it anywhere

4. Keyboard Shortcuts:

   • Ctrl/Cmd + Enter: Transform with Professional style
   • Escape: Clear all text

API Endpoints

The backend provides the following endpoints:

• GET /health - Health check
• POST /transform - Transform text with specified style
• GET /styles - Get available transformation styles

Transform Request Format

{
  "text": "Your text to transform",
  "style": "professional",
  "styleDescription": "Professional / Formal – Clear, concise, businesslike"
}

Transform Response Format

{
  "transformedText": "Transformed text result",
  "originalText": "Your original text",
  "style": "professional",
  "success": true
}

Development

Backend Development

The Flask backend uses:

• Flask: Web framework
• Flask-CORS: Cross-origin resource sharing
• google-generativeai: Google Gemini API client
• python-dotenv: Environment variable management

Extension Development

The Chrome extension uses:

• Manifest V3: Latest Chrome extension format
• Vanilla JavaScript: No external dependencies
• Modern CSS: Responsive design with gradients and animations
• Chrome Storage API: Persistent data storage

Testing

1. Test Backend:

   curl -X POST http://localhost:5000/transform \
     -H "Content-Type: application/json" \
     -d '{"text": "Hello world", "style": "professional"}'

2. Test Extension:

   • Load the extension in Chrome
   • Open the popup and test each style button
   • Verify text transformation works correctly

Troubleshooting

Common Issues

1. "Failed to transform text" Error:

   • Check if the backend server is running on http://localhost:8000
   • Verify your Gemini API key is correct in .venv/.env
   • Check browser console for detailed error messages
   • Make sure you started the backend with: source .venv/bin/activate && cd backend && python app.py

2. Extension Not Loading:

   • Ensure you're using Chrome (not other browsers)
   • Check that Developer mode is enabled
   • Verify the manifest.json file is valid

3. CORS Errors:

   • Make sure Flask-CORS is installed and configured
   • Check that the backend is running on port 8000 (not 5000)

4. API Key Issues:

   • Verify the API key is set in the .venv/.env file
   • Check that the key has proper permissions for Gemini API
   • Ensure no extra spaces or characters in the key

Debug Mode

To enable debug logging in the backend:

app.run(debug=True, host='0.0.0.0', port=8000)

Security Notes

• The API key is stored in environment variables (not in code)
• CORS is configured to allow requests from the Chrome extension
• Input validation is performed on all API endpoints
• Error messages don't expose sensitive information

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Support

For issues or questions:

1. Check the troubleshooting section above
2. Review the browser console for error messages
3. Verify all setup steps were completed correctly
4. Check that your Gemini API key is valid and has sufficient quota