AI Chat CSS Injector

Inject custom CSS into AI chat pages.

# AI Chat CSS Injector - Chrome Web Store Description ## Short Description Customize the appearance of your favorite AI chat platforms with custom CSS. Works with ChatGPT, Claude, Gemini, DeepSeek, and Qwen. ## Full Description ### Transform Your AI Chat Experience AI Chat CSS Injector is a lightweight Chrome extension that lets you customize the appearance of popular AI chat platforms with your own CSS styles. Tired of the default look of ChatGPT, Claude, or Gemini? Want to adjust font sizes, colors, or layout to better suit your workflow? This extension gives you complete control over the visual presentation of your AI conversations. ### Supported Platforms ✅ ChatGPT (chatgpt.com) ✅ Claude (claude.ai) ✅ Google Gemini (gemini.google.com) ✅ DeepSeek (deepseek.com) ✅ Qwen (qwen.ai) ### Key Features **Easy to Use** - Simple interface to add and manage your custom CSS - Real-time preview of changes - Save and reset functionality **Powerful Customization** - Modify any element on supported AI chat pages - Change fonts, colors, spacing, and layouts - Override default styles with !important declarations - Add custom animations or transitions **Persistent Settings** - Your CSS is saved across browser sessions - Syncs across devices when signed into Chrome - One-click reset to default settings **Performance Optimized** - Lightweight with minimal performance impact - Injected at document start for immediate effect - Only runs on supported AI chat platforms ### Example Use Cases - **Improve Readability**: Adjust font sizes and line heights for better readability - **Dark Mode Tweaks**: Fine-tune dark mode appearances - **Code Block Formatting**: Make code blocks more visible or compact - **Layout Adjustments**: Modify the chat container width or message spacing - **Custom Themes**: Create your own color schemes and visual themes ### Getting Started 1. Install the extension from the Chrome Web Store 2. Click the extension icon to open the options page 3. Enter your custom CSS in the provided textarea 4. Click "Save" - your styles will be applied immediately to all supported AI chat pages ### Example CSS Here's a simple example to get you started: ```css /* Make code blocks scrollable */ pre { max-height: 320px !important; overflow: auto !important; } /* Adjust message spacing */ .message { margin-bottom: 20px !important; } /* Custom font for responses */ .response-text { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; font-size: 16px !important; line-height: 1.6 !important; } ``` ### Why I Crafted This Extension As a developer working extensively with AI chat interfaces, I found myself constantly scrolling through long code sections, then scrolling back up to click the copy button, repeating this tedious process for each file. This extension was born from that frustration - a simple tool to make code blocks scrollable so you can see the entire content while keeping the copy button accessible at the top. No more endless scrolling back and forth! ### Why Use AI Chat CSS Injector? - **No Technical Knowledge Required**: Simple interface for adding CSS - **Non-Destructive**: Only affects the visual presentation, not functionality - **Reversible**: Easily reset to default styles at any time - **Cross-Platform**: Works with all major AI chat platforms - **Open Source**: Transparent and community-driven development - **Built by Developers for Developers**: Created to solve real workflow pain points ### Privacy & Security - **No tracking or data collection**: We don't collect any user data - **Storage Permission Justification**: The extension requires the `storage` permission to save your custom CSS preferences across browser sessions. This allows your styles to persist even after closing and reopening your browser, and enables sync across devices when signed into Chrome. No personal data is stored - only your CSS code, which remains entirely under your control. - **Host Permissions Justification**: The extension requires host permissions for `https://qwen.ai/*`, `https://deepseek.com/*`, `https://chatgpt.com/*`, `https://claude.ai/*`, and `https://gemini.google.com/*` with wildcard paths (`/*`) to inject CSS on all pages within these domains. This is necessary because AI chat interfaces often use dynamic URLs (e.g., conversation IDs, different chat paths), and we need to ensure your custom styles apply consistently across all pages of each platform, not just the homepage. - All CSS is stored locally in your browser - No external servers or connections - **Minimal Permissions**: Only requests the absolute necessary permissions for functionality ### Support & Feedback Found a bug or have a feature request? We'd love to hear from you! Please report issues through the Chrome Web Store or visit our project page. --- **Version**: 1.0.0 **Size**: < 100KB **Language**: English **Permissions**: Storage access for saving your CSS preferences *Transform your AI chat experience with custom styles that work the way you want.* Author's quote: "Code is poetry, and every interface deserves its perfect presentation."