{"id":35722079,"url":"https://github.com/doublegate/claude-width-extension","last_synced_at":"2026-01-13T20:45:15.298Z","repository":{"id":332056874,"uuid":"1128730734","full_name":"doublegate/claude-width-extension","owner":"doublegate","description":"[CCWC] Firefox Extension ... change the width of text input/output, in Claude.AI chat sessions, for better screen use ...","archived":false,"fork":false,"pushed_at":"2026-01-09T03:44:53.000Z","size":6889,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-12T17:21:53.263Z","etag":null,"topics":["anthropic","anthropic-ai","claude","extension","firefox","modifier","webbrowser-extension","width"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doublegate.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-06T04:29:06.000Z","updated_at":"2026-01-09T03:44:56.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/doublegate/claude-width-extension","commit_stats":null,"previous_names":["doublegate/claude-width-extension"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/doublegate/claude-width-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doublegate%2Fclaude-width-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doublegate%2Fclaude-width-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doublegate%2Fclaude-width-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doublegate%2Fclaude-width-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doublegate","download_url":"https://codeload.github.com/doublegate/claude-width-extension/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doublegate%2Fclaude-width-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28399922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T14:36:09.778Z","status":"ssl_error","status_checked_at":"2026-01-13T14:35:19.697Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anthropic","anthropic-ai","claude","extension","firefox","modifier","webbrowser-extension","width"],"created_at":"2026-01-06T07:13:14.035Z","updated_at":"2026-01-13T20:45:15.293Z","avatar_url":"https://github.com/doublegate.png","language":"JavaScript","readme":"# Claude Chat Width Customizer\n\n**Version 1.9.1** | Firefox Extension (Manifest V2)\n\nA Firefox extension that allows you to customize the width of the chat interface on [claude.ai](https://claude.ai). Features configuration profiles, Firefox Sync integration, enhanced styling options, and comprehensive accessibility support.\n\n![Claude Chat Width Customizer Banner](images/CCWC-Banner_Logo.jpg)\n\n## Features\n\n- **Adjustable Width**: Set chat width from 40% to 100% of the viewport\n- **Quick Presets**: One-click buttons for Narrow (50%), Medium (70%), Wide (85%), and Full (100%) widths\n- **Custom Presets**: Create up to 4 custom presets with your favorite widths, drag-and-drop reordering, and favorites marking\n- **Configuration Profiles** (v1.9.0): Create up to 8 named profiles (Work, Personal, etc.) with distinct settings\n- **Browser Sync** (v1.9.0): Sync profiles across browsers with Firefox Sync, with local fallback\n- **Import/Export** (v1.9.0): Backup settings to JSON, import from JSON, reset to factory defaults\n- **Context Menu**: Right-click on claude.ai pages to quickly access all presets\n- **Recently Used**: Quick access to your last 3 used widths\n- **Enhanced Styling** (v1.8.0): Advanced typography, display modes, code block controls, and visual tweaks\n- **Keyboard Shortcuts**: Global shortcuts for power users (Alt+Shift+W/C/D), popup shortcuts (1-4, R, Esc)\n- **Full Accessibility**: ARIA labels, focus management, screen reader announcements, reduced motion support\n- **Real-time Preview**: See changes instantly as you adjust the slider\n- **Theme Support**: Light, Dark, and System theme modes for the extension popup\n- **Toolbar Badge**: Current width percentage displayed in the browser toolbar icon\n- **Persistent Settings**: Your preferences (width, theme, custom presets, profiles) are saved and applied to all Claude sessions\n- **Main Window Only**: Modifies only the main chat area, leaving the sidebar untouched\n- **SPA Compatible**: Works seamlessly with Claude's single-page application navigation\n- **Security Hardened**: Content Security Policy (CSP) enforced, no unsafe DOM operations\n- **Mozilla Add-ons Compliant**: Includes required `data_collection_permissions` declaration\n- **Developer Tooling** (v1.9.1): ESLint v9.x, Vitest test suite (281 tests), pre-commit hooks with Husky\n\n![Extension Preview](icons/icon-96.png)\n\n## Installation\n\n### Temporary Installation (Development/Testing)\n\n1. Open Firefox and navigate to `about:debugging`\n2. Click on **\"This Firefox\"** in the left sidebar\n3. Click **\"Load Temporary Add-on...\"**\n4. Navigate to the extension folder and select `manifest.json`\n5. The extension will be loaded and active until you restart Firefox\n\n### Permanent Installation\n\n1. Package the extension as a `.xpi` file (see Building section)\n2. Navigate to `about:addons` in Firefox\n3. Click the gear icon ⚙️ and select **\"Install Add-on From File...\"**\n4. Select the `.xpi` file\n\n### Building the XPI Package\n\n```bash\n# Navigate to the extension directory\ncd claude-width-extension\n\n# Create the XPI file (ZIP with .xpi extension)\nzip -r build/claude-width-customizer-v1.9.1.xpi . \\\n  -x \"*.git*\" -x \"build/*\" -x \"*.DS_Store\" -x \"CLAUDE.md\" \\\n  -x \".claude/*\" -x \"docs/*\" -x \"images/*\" -x \"tests/*\" \\\n  -x \"node_modules/*\" -x \"coverage/*\" -x \"*.config.js\" \\\n  -x \".husky/*\" -x \"package*.json\"\n```\n\n## Usage\n\n1. Navigate to [claude.ai](https://claude.ai)\n2. Click the extension icon in the Firefox toolbar\n3. Use the slider or preset buttons to select your desired width\n4. Changes apply immediately to all open Claude tabs\n\n### Controls\n\n| Control | Description |\n|---------|-------------|\n| **Theme Toggle** | Switch between Light, Dark, or System theme |\n| **Slider** | Drag to set width between 40-100% |\n| **Narrow** | Sets width to 50% |\n| **Medium** | Sets width to 70% |\n| **Wide** | Sets width to 85% |\n| **Full** | Sets width to 100% |\n| **Save Current** | Save current width as a custom preset |\n| **Reset** | Returns to default 85% width |\n| **Apply** | Manually saves and applies current setting |\n| **Advanced Styling** | Toggle advanced typography, display modes, and visual tweaks |\n\n### Custom Presets\n\nCreate your own presets for quick access to your preferred widths:\n\n1. Adjust the slider to your desired width\n2. Click **\"Save Current\"** in the Custom Presets section\n3. Enter a name (e.g., \"Reading Mode\", \"Code Review\")\n4. Click **Save** to create the preset\n\n**Preset Management:**\n- **Edit**: Click the edit button to rename or change the width\n- **Delete**: Remove presets you no longer need\n- **Reorder**: Drag presets or use Alt+Arrow keys to reorder\n- **Favorite**: Star your most-used presets for quick access\n\n### Context Menu\n\nRight-click anywhere on claude.ai pages to access the **Claude Width** context menu with all your presets.\n\n### Keyboard Shortcuts\n\n**Global Shortcuts** (work anywhere when browser is focused):\n\n| Shortcut | Action |\n|----------|--------|\n| `Alt+Shift+W` | Open extension popup |\n| `Alt+Shift+C` | Cycle through presets (50% -\u003e 70% -\u003e 85% -\u003e 100% -\u003e 50%...) |\n| `Alt+Shift+D` | Toggle between current width and default (85%) |\n\n**Popup Shortcuts** (when popup is open):\n\n| Shortcut | Action |\n|----------|--------|\n| `1` | Narrow preset (50%) |\n| `2` | Medium preset (70%) |\n| `3` | Wide preset (85%) |\n| `4` | Full width (100%) |\n| `R` | Reset to default |\n| `Escape` | Close popup |\n| `Tab` | Navigate between controls |\n| `Alt+Up/Down` | Reorder custom presets |\n\nNote: Global shortcuts can be customized via `about:addons` \u003e gear icon \u003e \"Manage Extension Shortcuts\"\n\n### Configuration Profiles\n\nCreate profiles to save different configurations for different use cases:\n\n1. Click the profile dropdown in the popup header\n2. Select **\"New Profile...\"** to create a profile\n3. Name your profile (e.g., \"Work\", \"Reading\", \"Code Review\")\n4. Each profile stores all settings: width, theme, custom presets, and styling options\n\n**Profile Management:**\n- **Switch Profiles**: Use the dropdown in the popup header\n- **Edit/Delete**: Go to Options page (gear icon) \u003e Profiles section\n- **Duplicate**: Create a copy of an existing profile as a starting point\n- **Sync**: Enable Firefox Sync to share profiles across browsers\n\n### Import/Export Settings\n\nBackup your settings or transfer them to another browser:\n\n1. Open the Options page (gear icon in popup)\n2. Scroll to **Data Management** section\n3. **Export**: Click \"Export Settings\" to download a JSON file\n4. **Import**: Click \"Import Settings\" and select a previously exported file\n5. **Reset**: Use \"Reset to Factory Defaults\" to start fresh\n\n## Development\n\n### Prerequisites\n\n- Node.js 20.19.0 or later\n- npm (comes with Node.js)\n- Firefox browser for testing\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/doublegate/claude-width-extension.git\ncd claude-width-extension\n\n# Install development dependencies\nnpm install\n```\n\n### Available Scripts\n\n| Command | Description |\n|---------|-------------|\n| `npm test` | Run all 281 tests with Vitest |\n| `npm run test:watch` | Run tests in watch mode during development |\n| `npm run test:coverage` | Generate code coverage report |\n| `npm run test:ui` | Open Vitest UI for interactive testing |\n| `npm run lint` | Check code for ESLint issues |\n| `npm run lint:fix` | Automatically fix ESLint issues |\n| `npm run check` | Syntax check all JavaScript files |\n\n### Pre-commit Hooks\n\nThe project uses Husky and lint-staged to automatically run ESLint on staged JavaScript files before each commit. This ensures code quality standards are maintained.\n\n### Testing in Firefox\n\n1. Open Firefox and navigate to `about:debugging`\n2. Click **\"This Firefox\"**\n3. Click **\"Load Temporary Add-on...\"**\n4. Select `manifest.json` from the project root\n5. Make changes and click \"Reload\" to test updates\n\n## File Structure\n\n```\nclaude-width-extension/\n├── manifest.json           # Extension manifest (Manifest V2, v1.9.1)\n├── README.md               # This documentation\n├── CONTRIBUTING.md         # Contribution guidelines\n├── LICENSE                 # MIT license\n├── package.json            # Node.js project config (dev dependencies)\n├── package-lock.json       # Dependency lock file\n├── eslint.config.js        # ESLint v9.x flat configuration\n├── vitest.config.js        # Vitest test framework configuration\n├── .husky/                 # Git hooks for pre-commit linting\n├── icons/\n│   ├── icon.svg            # Source vector icon\n│   ├── icon-48.png         # Toolbar icon (48px)\n│   ├── icon-96.png         # High-DPI toolbar icon (96px)\n│   └── icon-256.png        # Mozilla Add-ons listing icon (256px)\n├── lib/\n│   ├── constants.js        # Shared constants (loaded first by all scripts)\n│   └── profiles.js         # Profile management utilities (v1.9.0)\n├── background/\n│   └── background.js       # Background script for keyboard commands, badge, context menu\n├── content/\n│   ├── content.js          # Content script injected into claude.ai\n│   └── content.css         # Base styles and transitions\n├── options/\n│   ├── options.html        # Options/settings page (profiles, sync, import/export)\n│   ├── options.css         # Options page styling\n│   └── options.js          # Options page logic\n├── popup/\n│   ├── popup.html          # Popup interface HTML\n│   ├── popup.css           # Popup styling (themes, drag-drop, modal)\n│   └── popup.js            # Popup interaction logic (presets CRUD, drag-drop)\n├── tests/\n│   ├── setup.js            # Test environment setup\n│   ├── mocks/\n│   │   └── browser.js      # Mock browser APIs for testing\n│   ├── constants.test.js   # Tests for lib/constants.js\n│   ├── profiles.test.js    # Tests for lib/profiles.js (75 tests)\n│   ├── popup.test.js       # Tests for popup functionality\n│   ├── content.test.js     # Tests for content script\n│   ├── background.test.js  # Tests for background script\n│   └── integration.test.js # Cross-module integration tests\n├── docs/\n│   ├── ROADMAP.md              # Development roadmap\n│   └── MANIFEST-V3-MIGRATION.md # Future migration guide\n└── build/\n    └── *.xpi               # Built packages (gitignored)\n```\n\n## Architecture Overview\n\n![Extension Architecture Blueprint](images/CCWC-Infographic_Blueprint.jpg)\n\n## Technical Details\n\n### Permissions\n\n- `storage`: Persists user preferences (local and sync storage for Firefox Sync)\n- `activeTab`: Detects when user is on claude.ai\n- `tabs`: Required for updating badge when switching tabs\n- `contextMenus`: Provides right-click menu access to presets\n- `downloads`: Enables settings export to JSON file\n\n### How It Works\n\n1. **Content Script**: Injected into all claude.ai pages, the content script generates and injects CSS rules that override Claude's default max-width constraints on chat containers.\n\n2. **Popup Interface**: Provides a slider-based UI for width selection. Changes are saved to `browser.storage.local` and immediately communicated to all open Claude tabs.\n\n3. **CSS Targeting**: Uses multiple CSS selectors to target conversation containers, message bubbles, and the input composer. The `!important` flag is used where necessary to override React-generated inline styles.\n\n4. **MutationObserver**: Watches for DOM changes to ensure styles persist through SPA navigation events.\n\n### Browser Compatibility\n\n- **Firefox**: 142.0+ (required for Firefox Sync storage API)\n- **Firefox ESR**: Not supported (requires Firefox 142+)\n- **Chrome/Edge**: Would require Manifest V3 migration (see `docs/MANIFEST-V3-MIGRATION.md`)\n\n## Troubleshooting\n\n### Extension Not Working\n\n1. Ensure you're on `https://claude.ai/*`\n2. Try refreshing the page\n3. Check that the extension is enabled in `about:addons`\n4. Look for errors in the Browser Console (Ctrl+Shift+J)\n\n### Width Not Applying\n\nClaude.ai uses highly specific CSS selectors that may change. If the extension stops working after a Claude UI update:\n\n1. Open Developer Tools (F12)\n2. Inspect the chat container elements\n3. Note the new class names\n4. Update selectors in `content/content.js`\n\n### Sidebar Affected\n\nThe extension specifically excludes sidebar elements using CSS selectors like `[class*=\"Sidebar\"]`, `nav`, and `aside`. If the sidebar width changes, please report the issue.\n\n## Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.\n\n**Quick Start:**\n\n1. Fork the repository\n2. Clone and install dependencies: `npm install`\n3. Create a feature branch: `git checkout -b feature/my-feature`\n4. Make changes and ensure tests pass: `npm test`\n5. Lint your code: `npm run lint`\n6. Commit with clear messages (pre-commit hooks run automatically)\n7. Submit a pull request\n\n## License\n\nMIT License - feel free to modify and distribute.\n\n## Author\n\nDoubleGate - [GitHub](https://github.com/doublegate)\n\n## Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md) for the complete version history.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoublegate%2Fclaude-width-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoublegate%2Fclaude-width-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoublegate%2Fclaude-width-extension/lists"}