ChatGPT Gradient Background Extension

A Chrome extension that adds beautiful gradient backgrounds to ChatGPT with customizable themes and message box controls.

✨ Features

• 3 Beautiful Gradient Themes:

  • Custom Radial: Multi-layered radial gradients with vibrant colors
  • Sunset: Pink and purple sunset gradient
  • Ocean: Deep blue ocean gradient (Grok V5 inspired)

• Smart Text Color Management:

  • Light themes: Black text for optimal readability
  • Ocean theme: White chat text, black sidebar/input text

• Message Box Toggle:

  • Show/hide gray background boxes around messages
  • Clean, minimal chat appearance option

• Instant Application:

  • Changes apply immediately without page refresh
  • Persistent settings across sessions

🚀 Installation

Step 1: Download the Extension

1. Go to the GitHub repository
2. Click the green "Code" button
3. Select "Download ZIP"
4. Extract the ZIP file to a folder on your computer

Step 2: Enable Developer Mode in Chrome

1. Open Google Chrome
2. Navigate to chrome://extensions/ or:
   • Click the three dots menu (⋮) in the top right
   • Go to More tools → Extensions
3. Toggle "Developer mode" ON (top right corner)

Step 3: Load the Extension

1. Click "Load unpacked" button
2. Navigate to the folder where you extracted the ZIP file
3. Select the folder containing the extension files
4. Click "Select Folder"

Step 4: Pin the Extension (Optional)

1. Click the extensions puzzle piece icon in the Chrome toolbar
2. Find "ChatGPT Gradient" in the list
3. Click the pin icon (📌) to pin it to your toolbar

🎨 How to Use

Changing Gradient Themes

1. Navigate to ChatGPT: Go to chat.openai.com
2. Open Extension: Click the ChatGPT Gradient icon in your Chrome toolbar
3. Select Theme: Click on any gradient button:
   • Custom Radial: Colorful multi-layered gradient
   • Sunset: Warm pink/purple gradient
   • Ocean: Deep blue gradient with white chat text
4. Instant Application: The gradient applies immediately!

Toggle Message Boxes

1. In the extension popup, find the "Message Boxes" section
2. Toggle the switch to show/hide gray boxes around messages
3. ON: Normal message boxes (default)
4. OFF: Clean, minimal appearance without boxes

📁 File Structure

chatgpt-gradient-extension/
├── manifest.json          # Extension configuration
├── popup.html             # Extension popup interface
├── popup.js               # Popup functionality
├── content.js             # Main extension logic
├── styles.css             # Gradient and styling definitions
└── README.md              # This file

🛠️ For Developers

Making Changes

1. Edit Files: Modify any of the extension files as needed
2. Reload Extension:
   • Go to chrome://extensions/
   • Find "ChatGPT Gradient"
   • Click the refresh icon (🔄)
3. Test Changes: Refresh ChatGPT page to see updates

Adding New Gradients

1. Add CSS: Define new gradient in styles.css:

html.gradient-newtheme,
body.gradient-newtheme {
  background: your-gradient-here !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

2. Update HTML: Add button to popup.html:

<button class="gradient-option your-preview-class" data-gradient="gradient-newtheme">
  New Theme
</button>

3. Add Preview: Create preview styles in popup.html <style> section

🐛 Troubleshooting

Extension Not Working

• Check Developer Mode: Ensure it's enabled in chrome://extensions/
• Reload Extension: Click refresh icon in extensions page
• Check Console: Open DevTools (F12) for error messages

Gradients Not Applying

• Refresh Page: Try refreshing ChatGPT page
• Check URL: Extension only works on chat.openai.com
• Clear Cache: Clear browser cache and try again

Text Hard to Read

• Try Different Theme: Ocean theme has white text, others have black
• Check Message Boxes: Toggle message boxes for better contrast

🔧 Technical Details

• Manifest Version: 3
• Permissions: activeTab, storage
• Content Scripts: Injects CSS into ChatGPT pages
• Storage: Uses Chrome's storage API for persistence

📝 License

This project is open source. Feel free to modify and distribute according to your needs.

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

💡 Credits

Created for enhancing the ChatGPT user experience with beautiful gradient backgrounds.

---

Enjoy your beautiful ChatGPT gradients! 🌈