Building a Chrome Extension to add themes to ChatGPT 🎨

Have you ever wished ChatGPT's interface had a little more personality?

My girlfriend certainly did.

The Inspiration

It all started when my girlfriend mentioned she wished ChatGPT had a ･ﾟ✧ pink theme ･ﾟ✧. "I spend hours on ChatGPT," she said, "and I'm tired of the same old look." Her eyes lit up at the idea of a prettier interface.

Honestly, who could say no to that smile?

At that moment, I decided to make it a reality and surprise her with exactly what she wanted - her very own ･ﾟ✧ pink ChatGPT ･ﾟ✧

What started as a simple "anything for you" gesture turned into a fun project that I managed to complete in just one evening. I was determined to see her reaction when I showed her the finished product - a customized pink ChatGPT that was all hers. For the ones that created Chrome extensions you'll understand that I would end up waiting a bit longer to see her reaction (Review process and all)... It was worth it in the end!

Combining her wish with my love for building things, I created something that would make her daily AI interactions a bit more joyful 💖

Getting Started with Chrome Extension Development

I began by diving into Google's documentation for Chrome extensions. If you've never built one before, the process is surprisingly straightforward:

  1. Create a manifest file (manifest.json) that defines your extension's properties
  2. Develop the extension's functionality using HTML, CSS, and JavaScript
  3. Load your extension in developer mode for testing

The manifest file is essentially the extension's ID card, telling Chrome what permissions it needs and what it does. Here's what mine looked like:

{
  "name": "ChatGPT — Themes",
  "description": "Customize ChatGPT with Beautiful Themes.",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": "images/icon.png"
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "css": ["styles/content.css"],
      // Runs the extension on ChatGPT only, matching all subpages
      "matches": ["https://chatgpt.com/*"]
    }
  ],
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

Leveraging AI with Cursor IDE

For this project, I used Cursor as my IDE, which has been game-changing for me lately. Cursor's AI integration significantly sped up my development process, especially when dealing with understanding cryptic CSS variables from ChatGPT's official website.

ChatGPT's CSS Variables - More like *Yoink* MyGPT's CSS Variables

Let's plan this hijacking:

  • Step 1: Go to ChatGPT's website
  • Step 2: Press F12
  • Step 3: Locate the :root tag with all the custom CSS variables
  • Step 4: Copy the styles
  • Step 5: Paste them in a new file called styles/content.css
  • Step 6: Profit
  • Step 6: Go back because you forgot to *borrow* the :dark tag with all the custom CSS variables for the dark theme
  • Step 7: Profit
  • Step 7: Understand the cryptic CSS variables names like:
--main-surface-background: #212121e6;
--message-surface: #323232d9;
--composer-blue-bg: #2a4a6d;
--composer-blue-hover: #1a416a;
--composer-blue-text: #48aaff;
--composer-surface-primary: #303030;
--dot-color: var(--white);
/* And many more... like 100+ variables */
  • Step 8: How can a UI get this complex?
  • Step 9: Prototype initial themes with AI Assistance. Thanks Claude 3.7 Sonnet!

Prototyping with AI Assistance

User Interface - popup

The popup is the UI that appears when you click on the extension icon in the Chrome toolbar. This is where I implemented the user interface for switching themes.

The UI is horrendous but it wasn't the focus of this project, I'll end up redesigning it in.

Popup UI - ChatGPT Themes

The popup only displays the theme selector when the current tab is ChatGPT, otherwise it will display a message to switch to ChatGPT.

Making Themes Work

The AI provided help to make sense of the variable names. We came up with a flow to create new themes which looked okay at first glance. Some tweaks were needed but overall it worked pretty well.

Each theme was defined as a CSS class to define the colors for the variables:

.theme-pink {
  --main-surface-background: #2d1b2d;
  --message-surface: #4a2d4a;
  /* More color definitions */
}

.theme-blue {
  --main-surface-background: #0a1929;
  --message-surface: #263b4d;
  /* More color definitions */
}

I could then apply the theme by adding the class to the body tag:

// Function to apply theme
function applyTheme(theme) {
  const body = document.body
  currentTheme = theme

  // Remove all theme classes
  body.classList.remove(
    'theme-default',
    'theme-contrast',
    'theme-pink',
    'theme-blue',
  )

  // Add selected theme class
  body.classList.add(`theme-${theme}`)
}

The theme would need to be saved in the storage to persist across sessions. It would also need to be loaded when the user opens ChatGPT.

// Listen for messages from popup
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'updateTheme') {
    applyTheme(request.theme)
  }
})

// Apply saved theme on page load
chrome.storage.sync.get(['selectedTheme'], (result) => {
  if (result.selectedTheme) {
    applyTheme(result.selectedTheme)
  }
})

With this micro framework in place, I created three distinct themes:

  1. Pink - A soft, rosy theme with gentle contrasts
Pink Theme
  1. Blue - A calming blue palette that's easy on the eyes
Blue Theme
  1. High Contrast - An accessibility-focused theme with strong contrast ratios
High Contrast Theme

Submitting to the Chrome Web Store

Chrome Web Store badge. It shows the Chrome Web Store page of the ChatGPT Themes extension.

Once testing was complete, I prepared my extension for the Chrome Web Store:

  1. Created promotional images and screenshots
  2. Wrote a quick description
  3. Packaged the extension
  4. Submitted it for review

Google's review process is thorough but straightforward if you follow their guidelines. After a 3 day wait, my extension was approved and listed on the store!

Lessons Learned

Building this extension taught me several valuable lessons:

  1. Build Simple Features - Focus on core functionality first, then ship, then iterate
  2. Use AI Tools - They can significantly accelerate development
  3. User Experience Matters - Simplifying choices leads to better adoption
  4. Don't overthink it - Just ship it, you can always improve it later
  5. Google knows how to write documentation - Just read it

What's Next?

I'm done with the project for now. Who knows, I might take it back up in the future to add more features:

  • Custom theme creation tool
  • More pre-built themes
  • Theme scheduling (dark theme at night, light during day)
  • Theme sharing capability

Try It Out!

If you'd like to customize your ChatGPT experience, give my extension a try!

Chrome Web Store - ChatGPT — Themes

Check out the code

Don't look too hard, it was a 2 hour project 😅

https://gitlab.com/nlaforet/chatgpt-skins

Follow me on Instagram! Let's connect and build in public together. 💪

Hi there, I'm an AI assistant.

Ask me anything about Nicolas Laforêt.