https://github.com/mditullio/chatgpt-custom-styler

Injects custom CSS styles into the ChatGPT web page.
https://github.com/mditullio/chatgpt-custom-styler

chatgpt chatgpt-website chrome-extension css styler

Last synced: about 1 month ago
JSON representation

Injects custom CSS styles into the ChatGPT web page.

• Host: GitHub
• URL: https://github.com/mditullio/chatgpt-custom-styler
• Owner: mditullio
• License: mit
• Created: 2024-09-15T08:37:16.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-15T13:09:34.000Z (2 months ago)
• Last Synced: 2024-09-30T09:22:57.448Z (about 2 months ago)
• Topics: chatgpt, chatgpt-website, chrome-extension, css, styler
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ChatGPT Custom Styler Extension

This Chrome extension modifies the ChatGPT interface by adjusting the width of the left sidebar (chat history panel) to better suit your preferences.

## How It Works

The extension injects a content script that runs whenever you visit the ChatGPT website. The script selects the left sidebar element and changes its width to `400px`. It also removes a CSS class that sets a fixed width, ensuring the new width is applied. The script also reacts to changes on the left column bar attributes, in order to reapply the desired width.

## Installation

1. **Clone or Download the Repository**

   - Clone this repository to your local machine, or download the ZIP file and extract it.

2. **Load the Extension into Chrome**

   - Open Google Chrome.

   - Navigate to `chrome://extensions/`.

   - Enable **Developer mode** by toggling the switch in the top right corner.

   - Click on **Load unpacked**.

   - Select the folder containing the extension files.

3. **Verify the Extension**

   - The extension should now appear in your list of extensions.

   - Ensure that it is enabled.

## Usage

- Navigate to [ChatGPT](https://chatgpt.com/) in your browser.

- The left sidebar should now have a width of `400px`, providing more space for your chat history.

## Files

- **`manifest.json`**: Defines the extension's configuration and specifies when and where to run the content script.

- **`content.js`**: Contains the JavaScript code that modifies the page's styles.

## Customization

- **Adjust Sidebar Width:**

  - To change the sidebar width, modify the `sidebar.style.width` value in `content.js`.

## Code Explanation

The `content.js` script adjusts the width of the left sidebar on the ChatGPT page:

- **Event Listener:** The script waits for the document's ready state to change, then uses a `MutationObserver` to ensure styles are reapplied when mutations occur.

- **Element Selection:** It selects the sidebar using specific class names. If the ChatGPT website updates its classes, you may need to adjust this selector in `content.js`.

- **Style Modification:** Sets the sidebar's width to `400px` and removes a class that restricts the width.

## Notes

- **Dynamic Class Names:**

  - Be aware that the ChatGPT website may update its class names or structure. If the extension stops working, you may need to update the selectors in `content.js` to match the new class names.

- **Further Customization:**

  - You can modify `content.js` to adjust other elements or styles on the page according to your needs.

## License

This project is licensed under the [MIT License](LICENSE).

---

**Enjoy your customized ChatGPT experience!**