ThemeBench

Caution

Project Status: ThemeBench is currently under active development. While largely functional, it has been primarily generated by AI and is currently awaiting thorough human testing and code review. Your feedback, testing results, and code reviews are highly appreciated!

ThemeBench is a powerful browser extension designed for power users, developers, and designers who need to quickly experiment with and customize the look and feel of web pages. It allows you to inject CSS and HTML snippets into any webpage, organized into reusable Themes and Domain Groups.

Features

• Thematic Organization: Group your snippets into themes for different purposes (e.g., "Dark Mode Fixes", "UI Cleanups").
• Domain Groups: Target specific websites or groups of domains with sets of themes.
• Library & Local Snippets: Maintain a global library of reusable snippets or create theme-specific local overrides.
• Real-time Injection: See your changes instantly without page reloads.
• Modern UI: A sleek React-based side panel interface for managing your tweaks without leaving the page.
• State Management: Robust state handling powered by Zustand.

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm

Installation & Local Setup

1. Clone the repository:

   git clone https://github.com/your-username/ThemeBench.git
   cd ThemeBench

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

   This command compiles the React UI and the background/content scripts into the dist directory.

4. Load into Chrome:

   • Open Chrome and navigate to chrome://extensions/.
   • Enable Developer mode in the top right.
   • Click Load unpacked and select the dist folder in the project directory.

Development

To run the project in development mode with Hot Module Replacement (HMR) for the side panel UI:

npm run dev

Note

Changes to the background script or content scripts usually require building the project and refreshing the extension in the chrome://extensions/ page.

Contributing

Contributions are welcome! If you'd like to improve ThemeBench, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Ensure your code follows the project's conventions (e.g., using TypeScript and sentence case for UI labels).
4. Submit a Pull Request with a clear description of your changes.

Acknowledgments

This project was mostly generated using Gemini, an advanced AI by Google. The core architecture, implementation details, and even this documentation were developed in collaboration with AI to demonstrate the potential of agentic coding workflows.

---

Built with ❤️ for the tweaking community.