chrometools-mcp 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -2,6 +2,145 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.5.0] - 2026-01-21
+
+### Added
+- **`selectOption` tool** - Select options in HTML dropdown elements with intelligent priority-based selection
+  - Parameters: `selector` (required), `value`, `text`, or `index` (specify at least one)
+  - Selection priority: value → text → index (tries value first, falls back to text, then index)
+  - Automatically triggers `input` and `change` events for React and other frameworks
+  - Returns selected option details (value, text, index)
+  - Location: `index.js:911-979`, schemas in `server/tool-schemas.js:40-45`, definitions in `server/tool-definitions.js:234-247`, tool group in `server/tool-groups.js:10`
+
+- **`drag` tool** - Drag element by mouse (click-hold-move-release) in any direction
+  - Parameters: `selector` (required), `direction` (required: 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left', 'down-right'), `distance` (optional, default: 100), `duration` (optional, default: 500ms)
+  - Emulates real mouse drag: moves to element center, presses button, drags, releases button
+  - Supports 8 directions including 4 diagonal directions for maximum flexibility
+  - Use for: interactive maps (Google Maps, Leaflet), Gantt charts, SVG diagrams, canvas, drag-to-pan interfaces
+  - NOT for: standard overflow scrollbars (use `scrollTo` or `scrollHorizontal` instead)
+  - Location: `index.js:982-1091`, schemas in `server/tool-schemas.js:47-53`, definitions in `server/tool-definitions.js:248-261`, tool group in `server/tool-groups.js:10`
+
+- **`scrollHorizontal` tool** - Scroll element horizontally for tables, carousels, and wide content
+  - Parameters: `selector` (required), `direction` (required: 'left' or 'right'), `amount` (required: pixels or 'full'), `behavior` (optional: 'auto' or 'smooth')
+  - Supports precise pixel-based scrolling or 'full' to scroll to the end
+  - Returns detailed scroll state: position, total width, visible width, and scroll availability (canScrollLeft, canScrollRight)
+  - Uses native `scrollTo` API with smooth/auto behavior options
+  - Location: `index.js:1055-1117`, schemas in `server/tool-schemas.js:55-60`, definitions in `server/tool-definitions.js:262-275`, tool group in `server/tool-groups.js:10`
+
+### Fixed
+- **🔥 CRITICAL: Fixed `drag` tool implementation** - Now correctly emulates mouse drag instead of changing scrollLeft/scrollTop
+  - Problem: Previous implementation used `scrollLeft`/`scrollTop` animation which only works for `overflow: auto/scroll` containers
+  - Impact: **Did not work with custom drag-to-scroll interfaces** like:
+    - ❌ Interactive maps (Google Maps, Leaflet, Mapbox)
+    - ❌ Gantt charts and timeline diagrams (SVG-based)
+    - ❌ Canvas elements with pan/zoom
+    - ❌ Custom drag handlers (React DnD, interact.js)
+  - Solution: Complete rewrite using Puppeteer's `page.mouse` API:
+    1. Finds element center position
+    2. Moves mouse to center (`page.mouse.move`)
+    3. Presses mouse button (`page.mouse.down`)
+    4. Drags to target position with smooth motion (`page.mouse.move` with steps)
+    5. Releases mouse button (`page.mouse.up`)
+  - Result: **Now works with ANY drag-scrollable element** including SVG diagrams, maps, and custom implementations
+  - Location: `index.js:982-1091`, updated description in `README.md:277-285`
+  - Reported by: User testing on Gantt chart with `<svg class="gantt">` element
+
+- **Fixed `analyzePage` crash with `includeAll: true` on SVG elements** - Now handles both HTML and SVG className types
+  - Problem: `className.split is not a function` error when page contains SVG elements
+  - Cause: SVG elements have `className` as `SVGAnimatedString` object (with `.baseVal` property), not a string
+  - Solution: Added type checking - uses `className.baseVal` for SVG elements, direct string for HTML
+  - Location: `index.js:2126-2137`
+
+- **🔥 CRITICAL: Fixed Tailwind CSS selector generation bug** - `getUniqueSelectorInPage` now works correctly with Tailwind/utility-first CSS frameworks
+  - Problem: Generated invalid CSS selectors like `button.hover:bg-blue-700` containing special characters (`:`, `/`, `[]`)
+  - Impact: **ALL AI-powered tools failed** with `SyntaxError: invalid selector` on Tailwind/styled-components apps:
+    - ❌ `analyzePage` - couldn't read page state
+    - ❌ `findElementsByText` - couldn't find elements by text
+    - ❌ `smartFindElement` - couldn't find elements by description
+    - ❌ `getAllInteractiveElements` - couldn't list interactive elements
+  - Solution: Complete rewrite of selector generation logic with intelligent filtering:
+    1. **New priority hierarchy** (most reliable first):
+       - `#id` (ID attribute)
+       - `[data-testid="..."]` (test IDs, very common in modern apps)
+       - `[data-*="..."]` (other data attributes)
+       - `[aria-label="..."]` (accessibility labels)
+       - `[role="..."]` (ARIA roles)
+       - `[name="..."]` (form element names)
+       - `tag.semantic-class` (non-Tailwind classes only)
+       - `tag:nth-of-type(n)` (fallback with path)
+    2. **Tailwind class filtering** - New `isTailwindClass()` function detects and excludes:
+       - Variant classes with `:` (hover:, focus:, md:, lg:, etc.)
+       - Fraction classes with `/` (w-1/2, space-x-1/2)
+       - Arbitrary values with `[]` (bg-[#1da1f2], w-[500px])
+       - 60+ common Tailwind prefixes (bg-, text-, p-, m-, flex-, etc.)
+    3. **CSS.escape() integration** - All selectors properly escaped (with fallback for old browsers)
+    4. **Semantic attribute prioritization** - Prefers stable, meaningful selectors over utility classes
+  - Result: **Unblocks testing of ALL modern apps** using Tailwind, styled-components, CSS modules, Emotion, etc.
+  - Location: `element-finder-utils.js:316-509` (complete rewrite, ~200 lines)
+  - Reported by: AI agent encountering `SyntaxError` on every tool call in React+Tailwind app
+
+### Changed
+- **Improved tool descriptions for better AI agent behavior** - Prevents premature use of `executeScript`
+  - `click` - Emphasized as PRIMARY tool for clicking, works with React/Vue/Angular synthetic events
+  - `type` - Emphasized as PRIMARY tool for input, updates React hooks and Vue reactive data correctly
+  - `executeScript` - ⚠️ Marked as LAST RESORT with strict warnings, never use for clicking/typing/reading
+  - `findElementsByText` - Highlighted as alternative to executeScript for finding elements
+  - `analyzePage` - Emphasized as PRIMARY tool for reading page state, more efficient than executeScript
+  - Location: `server/tool-definitions.js:31,45,162,510,489`
+
+- **Added "Tool Usage Priority" section to README** - Clear hierarchy preventing executeScript abuse
+  - Three workflows: Clicking/Interaction, Filling Forms, Reading Page State
+  - Each shows specialized tools first (click, type, analyzePage), executeScript last
+  - Explains why specialized tools work with React/Vue/Angular while executeScript may fail
+  - Location: `README.md:116-147`
+
+- **`analyzePage` enhancement** - Now detects and reports HTML select elements with all available options
+  - Select fields in forms and inputs sections now include `options` array with value, text, index, selected, and disabled status
+  - Includes `selectedIndex`, `selectedValue`, and `selectedText` for current selection
+  - Enables AI agents to see all dropdown options without additional queries
+  - Makes `selectOption` tool usage more intelligent and reliable
+  - Location: `index.js:1632-1660` (forms), `index.js:1691-1713` (inputs)
+
+- **Tool groups** - Added 3 new tools to `interaction` group: `selectOption`, `dragScroll`, `scrollHorizontal`
+  - Total interaction tools: 8 (was 5)
+  - Total tools in project: 44+ (was 40+)
+  - Location: `server/tool-groups.js:10`
+
+- **`convertFigmaToCode` tool** - Convert Figma designs to React/Tailwind code with AI assistance
+  - Parameters: `figmaToken` (optional), `fileKey` (required), `nodeId` (required), `framework` (optional: 'react', 'react-typescript', 'html'), `includeComments` (optional, default: true)
+  - Fetches design structure (layout, colors, typography, spacing) and rendered image at 2x scale
+  - Returns AI-optimized instruction prompt with simplified JSON structure and framework-specific guidelines
+  - Supports React (JavaScript), React (TypeScript), and pure HTML with Tailwind CSS
+  - Generates clean, semantic code with proper spacing, accessibility, and component structure
+  - Uses existing Figma token mechanism (from parameter or FIGMA_TOKEN env var)
+  - Location: `index.js:1676-1779`, schemas in `server/tool-schemas.js:225-231`, definitions in `server/tool-definitions.js:448-462`, tool group in `server/tool-groups.js:53`, helper in `figma-tools.js:381-499`
+
+- **`simplifyNode` helper** - New function in figma-tools.js for code generation
+  - Recursively extracts essential design properties from Figma node structure
+  - Captures: layout (flexbox), dimensions, padding/gaps, colors (fills/strokes), effects (shadows), typography, border radius
+  - Filters out invisible elements and rounds numeric values for cleaner output
+  - Used by `convertFigmaToCode` to provide AI with actionable design data
+  - Location: `figma-tools.js:381-499`
+
+## [2.4.2] - 2026-01-05
+
+### Added
+- **`analyzePage` - `includeAll` parameter** - New optional parameter to get ALL page elements, not just interactive ones
+  - Set `includeAll: true` to get complete page structure with selectors for all visible elements
+  - Returns new `allElements` array containing divs, spans, headings, and all other visible elements
+  - Each element includes: selector, tag, text, classes, id, and attributes (role, aria-label)
+  - Useful for layout work and styling - find any element, get its selector, then use `getComputedCss` or `setStyles`
+  - Example workflow: `analyzePage({ includeAll: true })` → find element → `getComputedCss({ selector })` or `setStyles({ selector })`
+  - Skips hidden elements and non-visual tags (SCRIPT, STYLE, META, etc.)
+  - Location: `index.js:1613-1751`, schemas in `tools/tool-schemas.js:215`, `server/tool-schemas.js:221`
+
+### Changed
+- **Tool Groups reorganization** - Moved `executeScript` and `navigateTo` from `advanced` to `core` group
+  - These are fundamental navigation and scripting tools that should be available in basic configurations
+  - Core group now includes: `ping`, `openBrowser`, `executeScript`, `navigateTo` (4 tools)
+  - Advanced group now has: `setStyles`, `setViewport`, `getViewport`, `smartFindElement`, `analyzePage`, `getAllInteractiveElements`, `findElementsByText` (7 tools)
+  - Location: `server/tool-groups.js:8,21-29`
+
 ## [2.4.0] - 2025-12-29
 
 ### Added

package/README.md

@@ -8,10 +8,10 @@ MCP server for Chrome automation using Puppeteer with persistent browser session
 - [Usage](#usage)
 - [AI Optimization Features](#ai-optimization-features) ⭐ **NEW**
 - [Scenario Recorder](#scenario-recorder) ⭐ **NEW** - Visual UI-based recording with smart optimization
-- [Available Tools](#available-tools) - **40+ Tools Total**
+- [Available Tools](#available-tools) - **44+ Tools Total**
   - [AI-Powered Tools](#ai-powered-tools) ⭐ **NEW** - smartFindElement, analyzePage, getAllInteractiveElements, findElementsByText
   - [Core Tools](#1-core-tools) - ping, openBrowser
-  - [Interaction Tools](#2-interaction-tools) - click, type, scrollTo
+  - [Interaction Tools](#2-interaction-tools) - click, type, scrollTo, selectOption, dragScroll, scrollHorizontal
   - [Inspection Tools](#3-inspection-tools) - getElement, getComputedCss, getBoxModel, screenshot
   - [Advanced Tools](#4-advanced-tools) - executeScript, getConsoleLogs, listNetworkRequests, getNetworkRequest, filterNetworkRequests, hover, setStyles, setViewport, getViewport, navigateTo
   - [Recorder Tools](#6-recorder-tools) ⭐ **NEW** - enableRecorder, executeScenario, listScenarios, searchScenarios, getScenarioInfo, deleteScenario, exportScenarioAsCode, appendScenarioToFile, generatePageObject
@@ -113,6 +113,39 @@ executeScenario({ name: "login_flow", parameters: { email: "user@test.com" } })
 
 ## Available Tools
 
+### ⚠️ Tool Usage Priority
+
+**CRITICAL: Always use specialized tools first. Never jump to `executeScript` as first choice.**
+
+#### For Clicking/Interaction
+1. ✅ **`click()`** - PRIMARY tool for all clicks
+   - Works correctly with React/Vue/Angular synthetic events
+   - Handles button clicks, link navigation, form submissions
+2. ✅ **`findElementsByText()` + action** - When selector is unknown, find by text
+3. ⚠️ **`executeScript()`** - LAST RESORT, only if above failed
+
+#### For Filling Forms
+1. ✅ **`type()`** - PRIMARY tool for all text input
+   - Properly updates React hooks, Vue reactive data
+   - Auto-clears field before typing (configurable)
+2. ⚠️ **`executeScript()`** - LAST RESORT, only if above failed
+
+#### For Reading Page State
+1. ✅ **`analyzePage()`** - PRIMARY tool for reading page content
+   - Gets forms, inputs, buttons, links with current values
+   - Use `refresh: true` after interactions to see updated state
+   - Efficient: 2-5k tokens vs screenshot 15-25k
+2. ✅ **`findElementsByText()`** - Find specific elements by visible text
+3. ✅ **`getElement()`** - Get HTML of specific element
+4. ⚠️ **`executeScript()`** - LAST RESORT, only if above failed
+
+**Why specialized tools matter:**
+- ✅ Trigger proper browser events (click, input, change)
+- ✅ Work with React/Vue/Angular synthetic event systems
+- ✅ Update framework state correctly (React hooks, Vue reactivity)
+- ✅ Handle animations, navigation, and async updates
+- ❌ `executeScript` bypasses framework events and may fail silently
+
 ### AI-Powered Tools
 
 #### smartFindElement ⭐
@@ -148,18 +181,27 @@ Get current page state and structure. Returns complete map of forms (with values
   - **After form submissions** (check results, errors)
   - **After AJAX updates** (dynamic content loaded)
   - When debugging (see actual form values, not just visual)
+  - **Layout/styling work** - use `includeAll: true` to get ALL page elements with selectors
 - **Parameters**:
   - `refresh` (optional): Force refresh cache to get CURRENT state after changes (default: false)
+  - `includeAll` (optional): Include ALL page elements, not just interactive ones (default: false). Useful for layout work - find any element, get its selector, then use `getComputedCss` or `setStyles` on it.
 - **Why better than screenshot**:
   - Shows actual data (form values, validation errors) not just visual
   - Uses 2-5k tokens vs screenshot 15-25k tokens
   - Returns structured data with selectors
-- **Returns**: Complete map of forms (with current values), inputs, buttons, links, navigation with selectors
+- **Returns**:
+  - By default: Complete map of forms (with current values), inputs, buttons, links, navigation with selectors
+  - With `includeAll: true`: Also includes `allElements` array with ALL visible page elements (divs, spans, headings, etc.) - each with selector, tag, text, classes, id
 - **Example workflow**:
   1. `openBrowser({ url: "..." })`
   2. `analyzePage()` ← Initial analysis
   3. `click({ selector: "submit-btn" })`
   4. **`analyzePage({ refresh: true })`** ← See what changed after click!
+- **Layout work example**:
+  1. `analyzePage({ includeAll: true })` ← Get all elements
+  2. Find element you want to style (e.g., `div.header`)
+  3. `getComputedCss({ selector: "div.header" })` ← Get current styles
+  4. `setStyles({ selector: "div.header", styles: [...] })` ← Apply new styles
 
 #### getAllInteractiveElements
 Get all clickable/fillable elements with their selectors.
@@ -220,6 +262,40 @@ Scroll page to bring element into view.
 - **Use case**: Lazy loading, sticky elements, visibility checks
 - **Returns**: Final scroll position
 
+#### selectOption
+Select option in dropdown (HTML select elements). Automatically detected by analyzePage with all available options.
+- **Parameters**:
+  - `selector` (required): CSS selector for select element
+  - `value` (optional): Option value attribute (priority 1)
+  - `text` (optional): Option text content (priority 2)
+  - `index` (optional): Option index, 0-based (priority 3)
+- **Use case**: Form dropdowns, filtering, selection menus
+- **Returns**: Selected option details (value, text, index)
+- **Selection priority**: If multiple parameters specified, tries value → text → index
+- **AI Integration**: Use `analyzePage` to see all available options with their values, text, and indices
+
+#### drag
+Drag element by mouse (click-hold-move-release). Simulates real mouse drag, not scrollbar scrolling.
+- **Parameters**:
+  - `selector` (required): CSS selector for element to drag
+  - `direction` (required): 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left', 'down-right'
+  - `distance` (optional): Distance in pixels (default: 100)
+  - `duration` (optional): Drag duration in milliseconds (default: 500)
+- **Use case**: Interactive maps (Google Maps, Leaflet), Gantt charts, SVG diagrams, canvas elements, sliders, drag-to-pan interfaces
+- **How it works**: Moves mouse to element center, presses mouse button, drags to target position, releases button
+- **NOT for**: Standard overflow scrollbars (use `scrollTo` or `scrollHorizontal` instead)
+- **Returns**: Start/end mouse positions and drag delta
+
+#### scrollHorizontal
+Scroll element horizontally (for tables, carousels, wide content).
+- **Parameters**:
+  - `selector` (required): CSS selector for element to scroll
+  - `direction` (required): 'left' or 'right'
+  - `amount` (required): Number of pixels to scroll, or 'full' to scroll to the end
+  - `behavior` (optional): 'auto' or 'smooth' (default: 'auto')
+- **Use case**: Wide tables, image carousels, horizontally scrollable containers
+- **Returns**: Scroll state (position, total width, visible width, scroll availability)
+
 ### 3. Inspection Tools
 
 #### getElement
@@ -463,6 +539,27 @@ Extract complete color palette with usage statistics.
   - Usage examples (where the color is used)
   - Sorted by usage frequency
 
+#### convertFigmaToCode ⭐ NEW
+Convert Figma designs to React/Tailwind code with AI assistance.
+- **Parameters**:
+  - `figmaToken` (optional): Figma API token
+  - `fileKey` (required): Figma file key
+  - `nodeId` (required): Frame/component ID (formats: '123:456' or '123-456')
+  - `framework` (optional): 'react', 'react-typescript', or 'html' (default: 'react')
+  - `includeComments` (optional): Include code comments (default: true)
+- **Use case**: Rapid prototyping, design-to-code workflow, implementing Figma designs
+- **How it works**:
+  1. Fetches design structure (layout, colors, typography, spacing)
+  2. Gets rendered design image at 2x resolution
+  3. Returns AI-optimized instructions with simplified JSON structure
+  4. AI generates clean React/Tailwind code matching the design
+- **Returns**: Formatted instruction prompt containing:
+  - Design image reference
+  - Simplified JSON structure with layout, styling, text properties
+  - Framework-specific guidelines (React components, TypeScript types, Tailwind classes)
+  - Quality requirements (semantic HTML, accessibility, accurate spacing)
+- **Best for**: UI components, landing pages, card designs, navigation bars
+
 #### getFigmaFrame
 Export and download a Figma frame as PNG/JPG image with automatic compression.
 - **Parameters**:
@@ -988,9 +1085,9 @@ Each tool definition is sent to the AI in every request, consuming context token
 | `debug` | Debugging & network | `getConsoleLogs`, `listNetworkRequests`, `getNetworkRequest`, `filterNetworkRequests` (4) |
 | `advanced` | Advanced automation & AI | `executeScript`, `setStyles`, `setViewport`, `getViewport`, `navigateTo`, `smartFindElement`, `analyzePage`, `getAllInteractiveElements`, `findElementsByText` (9) |
 | `recorder` | Scenario recording | `enableRecorder`, `executeScenario`, `listScenarios`, `searchScenarios`, `getScenarioInfo`, `deleteScenario`, `exportScenarioAsCode`, `appendScenarioToFile`, `generatePageObject` (9) |
-| `figma` | Figma integration | `getFigmaFrame`, `compareFigmaToElement`, `getFigmaSpecs`, `parseFigmaUrl`, `listFigmaPages`, `searchFigmaFrames`, `getFigmaComponents`, `getFigmaStyles`, `getFigmaColorPalette` (9) |
+| `figma` | Figma integration | `getFigmaFrame`, `compareFigmaToElement`, `getFigmaSpecs`, `parseFigmaUrl`, `listFigmaPages`, `searchFigmaFrames`, `getFigmaComponents`, `getFigmaStyles`, `getFigmaColorPalette`, `convertFigmaToCode` (10) |
 
-**Total:** 43 tools across 7 groups
+**Total:** 44 tools across 7 groups
 
 **Configuration:**
 

package/RELEASE_NOTES_v2.5.0.md

@@ -0,0 +1,109 @@
+# Release v2.5.0 - Major Update: 4 New Tools + Critical Fixes
+
+## 🎉 New Tools (4)
+
+### 1. `selectOption` - Dropdown Selection
+Select options in HTML dropdown elements with intelligent priority-based selection.
+- **Parameters**: `selector`, `value`, `text`, or `index`
+- **Priority**: value → text → index
+- **React/Vue support**: Automatically triggers input/change events
+- Perfect for automated form filling
+
+### 2. `drag` - Mouse Drag Emulation
+Drag elements by mouse (click-hold-move-release) in any direction.
+- **8 directions**: up, down, left, right, + 4 diagonals
+- **Use cases**: Interactive maps, Gantt charts, SVG diagrams, canvas
+- **How it works**: Puppeteer's `page.mouse` API for real drag events
+- **NOT for**: Standard overflow scrollbars (use `scrollTo` instead)
+
+### 3. `scrollHorizontal` - Horizontal Scrolling
+Scroll elements horizontally for tables, carousels, and wide content.
+- **Directions**: left, right
+- **Amount**: Pixels or 'full' to scroll to end
+- **Behavior**: smooth or auto
+- Returns detailed scroll state
+
+### 4. `convertFigmaToCode` ⭐
+Convert Figma designs to React+Tailwind code.
+- **Frameworks**: React, React TypeScript, HTML
+- **Styling**: Tailwind CSS optimized
+- **Input**: Figma file key + node ID
+- **Output**: Clean, semantic component code with AI-generated instructions
+
+## 🔥 Critical Fixes
+
+### Fixed Tailwind CSS Selector Generation Bug
+**Impact**: ALL AI tools failed on Tailwind/styled-components apps with `SyntaxError: invalid selector`
+
+**Affected tools**:
+- ❌ `analyzePage` - couldn't read page state
+- ❌ `findElementsByText` - couldn't find elements
+- ❌ `smartFindElement` - couldn't locate elements
+- ❌ `getAllInteractiveElements` - couldn't list interactive elements
+
+**Solution**:
+- New `isTailwindClass()` function filters utility classes with `:`, `/`, `[]`
+- Smart priority: id → data-testid → aria-label → semantic classes
+- CSS.escape() for all selectors
+- **Result**: ✅ Unblocks testing of ALL modern apps (Tailwind, styled-components, CSS modules, Emotion)
+
+### Fixed `drag` Tool Implementation
+Previously used `scrollLeft`/`scrollTop` which only works with `overflow: auto/scroll` containers.
+
+**Now works with**:
+- ✅ Interactive maps (Google Maps, Leaflet, Mapbox)
+- ✅ Gantt charts and SVG diagrams
+- ✅ Canvas elements with pan/zoom
+- ✅ Custom drag handlers (React DnD, interact.js)
+
+### Fixed `analyzePage` SVG Crash
+Fixed `className.split is not a function` error when page contains SVG elements.
+- Now handles both HTML (string) and SVG (SVGAnimatedString) className types
+
+## 🔧 Improvements
+
+### Better AI Agent Behavior
+- Improved tool descriptions to prevent premature `executeScript` usage
+- `click`, `type`, `analyzePage` emphasized as PRIMARY tools
+- `executeScript` marked as ⚠️ LAST RESORT
+- New "Tool Usage Priority" section in README
+
+### Enhanced `analyzePage`
+- Now detects HTML select elements with all options
+- Returns: value, text, index, selected, disabled status
+- Enables smarter `selectOption` usage
+
+## 📊 Stats
+
+- **Total tools**: 44 (was 40)
+- **Files changed**: 9
+- **Lines added**: +957
+- **Lines removed**: -48
+
+## 🚀 Installation
+
+```bash
+npx chrometools-mcp
+```
+
+Or update in your MCP config:
+```json
+{
+  "mcpServers": {
+    "chrometools": {
+      "command": "npx",
+      "args": ["chrometools-mcp"]
+    }
+  }
+}
+```
+
+## 🙏 Contributors
+
+Special thanks to users who reported issues:
+- Tailwind CSS selector bug reporter
+- Gantt chart drag testing feedback
+
+---
+
+**Full Changelog**: https://github.com/docentovich/chrometools-mcp/blob/main/CHANGELOG.md