chrometools-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| FIGMA_TOKEN | No | Figma Personal Access Token for design tools. | |
| ENABLED_TOOLS | No | Comma-separated list of tool groups to enable (e.g., 'core,interaction,inspection'). If not set, all tools are enabled. |
Capabilities
Features and capabilities supported by this server
| Capability | Details |
|---|---|
| tools | {} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| pingA | Simple ping-pong tool for testing. Returns 'pong' with optional message. |
| openBrowserB | Open browser and navigate to URL. Window persists for further interactions. |
| clickA | Click element by APOM ID (preferred) or CSS selector. Handles React/Vue/Angular events, waits for navigation. |
| typeA | Type text into input by APOM ID (preferred) or CSS selector. Updates React/Vue/Angular state automatically. |
| getComputedCssA | Get computed CSS styles for element. For layout debugging and responsive design. |
| getBoxModelB | Get element box model: dimensions, positioning, margins, padding, borders. |
| screenshotA | Capture element image (5-10k tokens), or full viewport when no id/selector is given. Use analyzePage for form data/validation (8-10k tokens). |
| saveScreenshotA | Save screenshot to file without returning in context. Auto-scales and compresses. Use maxWidth: null and format: 'png' for original quality. |
| scrollToA | Scroll to element. For lazy loading and visibility testing. |
| waitForElementA | Wait for element to appear. For dynamic content and lazy-loaded elements. |
| executeScriptA | ⚠️ LAST RESORT tool - use ONLY when ALL specialized tools failed. NEVER use for: clicking (use click), typing (use type), scrolling (use scrollTo), reading page elements (use analyzePage), finding elements (use findElementsByText), fetching API data (use listNetworkRequests + getNetworkRequest). May break React/Vue/Angular synthetic events. ALWAYS try specialized tools first. |
| getConsoleLogsA | Get browser console messages. For debugging JS errors and tracking behavior. |
| listNetworkRequestsA | List network requests (method, URL, status). Use getNetworkRequest for details. Supports pagination. |
| getNetworkRequestA | Get network request details (headers, payload, response). Use requestId from listNetworkRequests. |
| filterNetworkRequestsA | Filter network requests by URL pattern. Returns matching requests with full details. |
| hoverA | Hover over element by APOM ID or CSS selector. For hover effects, tooltips, :hover states. |
| pressKeyA | Press keyboard key on focused element or page. For form submission (Enter), closing dialogs (Escape), navigation (Tab, Arrow keys), shortcuts (Ctrl+A). |
| selectOptionA | Select dropdown option by APOM ID or CSS selector. Specify value, text, or index. |
| executeModelActionA | Universal tool to execute any model-specific action on element. This tool works with element models (Strategy Pattern) and can execute any action defined by the model. Use analyzePage() first to see element's model and available actions in the 'models' map. Models: TxtInp (text input), Sel (select), Btn (button), Chk (checkbox), Radio (radio), TxtArea (textarea), Link (link), Range (range), DatePicker (custom date picker), DateInp (HTML5 date), FileInp (file), ColorInp (color). Examples:
|
| dragA | Drag element in any direction. For maps, charts, SVG, canvas, sliders. Use mode='synthetic' for JS libraries (frappe-gantt, jQuery UI). Use scrollHorizontal for scrollbars. |
| scrollHorizontalA | Scroll element horizontally by pixels or to end. For tables, carousels, scrollable containers. |
| setStylesA | Apply inline CSS to element. For live editing and prototyping. |
| setViewportA | Change viewport dimensions. Test responsive layouts across screen sizes. |
| getViewportA | Get viewport size and pixel ratio. For responsive design testing. |
| navigateToB | Navigate to new URL. Reuses browser instance. |
| listFramesA | List all frames (main + iframes) on the current page with url/name/isMain, plus the currently active frame. Use to discover cross-origin iframes (e.g. app.example.com), then switchFrame into one. |
| switchFrameA | Set the active frame so click/type/hover/analyzePage/find/executeScript/waitForElement run INSIDE it — required to automate cross-origin iframes (resolved via CDP, bypassing Same-Origin Policy). Call with no args to reset to the main frame. Auto-resets on navigateTo. |
| getFigmaFrameC | Export Figma frame as PNG. Requires API token and file/node IDs. |
| compareFigmaToElementB | Compare Figma design with browser element. Pixel-perfect validation. |
| getFigmaSpecsB | Extract design specs from Figma: colors, fonts, dimensions, spacing. |
| parseFigmaUrlA | Parse Figma URL to extract fileKey and nodeId. |
| listFigmaPagesA | Get file structure: all pages and frames. Use first to discover file contents. |
| searchFigmaFramesA | Search frames/components by name. Case-insensitive across all pages. |
| getFigmaComponentsB | Get all components from file (Design System). For extracting design system. |
| getFigmaStylesA | Get all styles: color, text, effect, grid. For extracting design tokens. |
| getFigmaColorPaletteA | Extract color palette. Returns unique colors with hex, rgba, usage count. |
| convertFigmaToCodeA | Convert Figma design to React/Tailwind code. Fetches node structure and rendered image, returns simplified design data with AI instructions for generating clean, semantic code. Focuses on React components with Tailwind CSS styling. |
| smartFindElementA | Find elements with natural language. Returns ranked candidates. Prefer analyzePage for better performance. |
| analyzePageA | PRIMARY tool for reading page state. Returns APOM tree: {tree, metadata, groups}. Compact format (default): containers as "tag_id":[children] keys, interactive elements as {id, tag, type, position, metadata} without selectors. Use element IDs (e.g., button_45, input_20) with click/type tools. Selectors registered internally for resolution. Use refresh:true after clicks. Efficient: 8-10k tokens vs screenshot 15-25k. Legend: clickTarget format is "tag:id" (e.g., "kp-chats-list-item:container_58") - use the id part for clicking. No clickTarget = element handles its own click. |
| getElementDetailsA | Get detailed information about element by its APOM ID. Returns full element details including bounds, CSS selector, position, attributes, and computed styles. Can also analyze children elements tree structure. Use this when analyzePage output was simplified and you need complete information about specific element or analyze specific sections in detail. |
| findElementsByTextA | Find elements by visible text content and get their selectors. Use this INSTEAD of executeScript when you need to find elements. Returns working selectors that can be used with click/type tools. Can optionally perform actions directly. |
| selectFromGroupA | Select option(s) from radio or checkbox group by name attribute. For radio groups: selects one option. For checkbox groups: supports multi-select with modes (set/add/remove/toggle). Use 'name' to identify the group, and 'value'/'text' to select by value or label. See groups in analyzePage output for available options. |
| enableRecorderB | Check ChromeTools Extension connection for scenario recording. Use Chrome Extension popup (CT icon) for recording. |
| startRecordingA | Start recording user actions. Follows active tab automatically. Use stopRecording to finish. |
| stopRecordingA | Stop recording and return recorded actions. Does not save the scenario - use this to review actions before saving with saveScenario. |
| getRecorderStateA | Get current recorder state: isRecording, isPaused, action count, current tab |
| saveScenarioA | Save recorded actions as a scenario. Call this after stopRecording to persist the scenario to disk. |
| executeScenarioB | Execute scenario by name with dependency resolution. Use projectId to disambiguate duplicate names. |
| listScenariosB | List all scenarios with metadata. |
| searchScenariosC | Search scenarios by text or tags. |
| getScenarioInfoA | Get scenario details: actions, parameters, dependencies. |
| deleteScenarioC | Delete scenario and secrets. |
| exportScenarioAsCodeA | Export scenario as test code for NEW file. Supports Page Object integration: 'generate-integrated' generates POM + test using it, 'use-existing' generates test using existing POM file. Use appendScenarioToFile for existing files. |
| appendScenarioToFileA | Append scenario as test code to EXISTING file. Supports Page Object integration: 'generate-integrated' generates POM + test using it, 'use-existing' generates test using existing POM file. Use exportScenarioAsCode for new files. |
| generatePageObjectA | Generate Page Object Model (POM) class from current page analysis. Analyzes page structure, extracts interactive elements (inputs, buttons, links), groups them by sections (header, nav, form, etc.), and generates framework-specific code. Supports Playwright (TypeScript/Python) and Selenium (Python/Java). Auto-generates smart element names and helper methods. |
| listTabsA | List all open browser tabs with their URLs, titles, and active status. Use this to see all tabs opened manually or via window.open/target='_blank'. Returns tab index for use with switchTab. |
| switchTabA | Switch active browser tab by index or URL pattern. After switch, all subsequent commands will target the new active tab. Use listTabs first to see available tabs. |
| loadSwaggerA | Load and parse OpenAPI/Swagger spec from URL or local file. Returns structured summary: endpoints, schemas, auth types, base URL. Supports both OpenAPI 2.0 (Swagger) and 3.x, JSON and YAML formats. Use this first to understand an API before generating models or client code. |
| generateApiModelsA | Generate typed data models from OpenAPI/Swagger spec. Creates TypeScript interfaces/types or Python dataclasses/pydantic/TypedDict from API schemas. Handles $ref resolution, enums, allOf/oneOf, nested objects. Use after loadSwagger to generate model files. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/docentovich/chrometools-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server