README.md

Thinking Claude Chrome Extension

A Chrome extension that enhances Claude's thinking process, making it more human-like and transparent.

Important Notice: The original Chrome extension (chrome_v0) has been deprecated. This is the new rewritten version (chrome) with improved architecture and modern tech stack. If you're using the old version, please update to this new version for better performance and continued support.

How to Use 🚀

Option 1: Direct Installation (Recommended)

1. Download the Extension

   • Go to Latest Releases
   • Download the latest version (e.g., thinking-claude-v1.0.2.zip)
   • Extract the ZIP file

2. Install in Chrome

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" in the top right
   • Click "Load unpacked"
   • Select the dist folder in the extracted folder

3. Start Using

   • Visit Claude.ai
   • Start a new conversation or refresh an existing one
   • The extension will automatically enhance Claude's thinking process

Option 2: Build Locally (For Development)

1. Quick Setup

   # Clone the repository
   git clone https://github.com/richards199999/Thinking-Claude.git
   cd Thinking-Claude/extensions/chrome
   
   # Install dependencies
   bun install
   
   # Build the extension
   bun run build

2. Load in Chrome

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" in the top right
   • Click "Load unpacked"
   • Select the dist folder (created after building)

3. Development Mode

   # Start development server with hot reload
   bun run start
   
   # Watch for changes
   bun run watch

Tech Stack 🛠️

Core Technologies

• Language & Type Safety

  • TypeScript - Strongly typed programming language
  • ESLint - Code linting and standards
  • Prettier - Code formatting

• Frontend

  • React - UI library
  • Tailwind CSS - Utility-first CSS framework
  • shadcn/ui - Best UI components
  • Chrome Extension API - Browser extension development

Development Tools

• Build & Bundle

  • Bun - JavaScript all-in-one toolkit
  • Webpack - Module bundler
  • PostCSS - CSS processing

• Testing & Quality

  • Vitest - Unit testing framework
  • Husky - Git hooks
  • lint-staged - Staged files linter

• Development Environment

  • Node.js - JavaScript runtime
  • Chrome DevTools - Browser debugging

Getting Started with development 🚀

What You'll Need

Required tools:

• Bun - A fast all-in-one JavaScript runtime & toolkit
• Node.js (v18 or higher) - JavaScript runtime environment
• Git - For version control
• Google Chrome - The browser we're building for

This extension uses:

• TypeScript - Type-safe JavaScript
• React - UI framework
• Tailwind CSS - Utility-first CSS framework
• Webpack - Module bundler

Installing Node.js

1. Download Node.js from nodejs.org

2. Choose the LTS (Long Term Support) version

3. Run the installer

4. Verify installation:

   node --version
   npm --version

Installing Bun

Bun is required to run this project. Here's how to install it:

Windows Users:

1. First, install Windows Subsystem for Linux (WSL):

   # Open PowerShell as Administrator and run:
   wsl --install

   After installation, restart your computer.

2. Install Bun through WSL:

   # Open WSL terminal and run:
   curl -fsSL https://bun.sh/install | bash

macOS or Linux Users:

# Open terminal and run:
curl -fsSL https://bun.sh/install | bash

To verify installation, run:

bun --version

Setting Up Your Development Environment

1. Get the code:

   # Clone this repository to your computer
   git clone https://github.com/richards199999/Thinking-Claude.git
   
   # Go to the extension directory
   cd extensions/chrome
   
   # Install project dependencies
   bun install

Development Commands

Here are the main commands you'll use during development:

# Build the extension for production
bun run build

# Start development mode with auto-reload
bun run start

# Watch for file changes
bun run watch

# Run tests
bun run test

# Fix code style and formatting
bun run fix

Installing the Extension in Chrome

1. Open Chrome and type chrome://extensions/ in the address bar
2. Turn on "Developer mode" using the switch in the top right corner
3. Click "Load unpacked" and select the dist (visible after running bun run build) folder from this project

Project Organization 📁

chrome/
├── src/             # Your source code goes here
├── public/            # Built extension (created after running build)
│   ├── manifest.json # Extension configuration
│   ├── content.js   # Main extension script
│   └── icons/       # Extension icons
├── package.json     # Project configuration and scripts
└── CHANGELOG.md     # Version history and changes

Development Workflow 🔄

Code Quality Tools

We use several tools to maintain code quality:

• Husky: Automatically checks your code before commits
• ESLint: Finds and fixes JavaScript problems
• Prettier: Formats your code consistently

Version Control & Releases

The project uses automated version bumping through CI:

• Automatic Version Bumping: When code is merged to main, the CI will:

  • Auto-increment the patch version (e.g., 1.0.0 -> 1.0.1)
  • Create a new release with the bumped version
  • Skip version bump for major versions (x.0.0)

• Manual Version Control:

  • Developers can manually set both versions in package.json and manifest.json
  • Major version changes (x.0.0) must be set manually
  • Manual versions will be respected by CI

Note: If you need to manually set a version, update both package.json and manifest.json before merging to main.

Continuous Integration

Our GitHub Actions setup automatically:

• Builds the extension
• Updates version numbers
• Creates new releases

Need Help? 🤔

• Check the CHANGELOG.md for recent updates
• Visit our GitHub Issues for known problems or to report new ones
• Feel free to ask questions in our GitHub Discussions