get-element-styles
Retrieve specific style properties of an HTML element using a CSS selector, enabling real-time inspection and modification within the Vite MCP Server environment.
Instructions
Retrieves style information of a specific element
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector of the element to inspect | |
| styleProperties | Yes | Array of style property names to retrieve (e.g., ['color', 'fontSize', 'backgroundColor']) |
Implementation Reference
- src/tools/browser-tools.ts:376-441 (handler)The handler function that performs the core logic: validates browser context, evaluates JavaScript in the page to get computed styles using getComputedStyle(element), extracts specified properties, and formats the response.try { // Check browser status const browserStatus = getContextForOperation(); if (!browserStatus.isStarted) { return browserStatus.error; } // Get current checkpoint ID const checkpointId = await getCurrentCheckpointId(browserStatus.page); // Retrieve element styles const styles = await browserStatus.page.evaluate(({ selector, stylePropsToGet }: { selector: string; stylePropsToGet: string[] }) => { const element = document.querySelector(selector); if (!element) return null; const computedStyle = window.getComputedStyle(element); const result: Record<string, string> = {}; stylePropsToGet.forEach((prop: string) => { result[prop] = computedStyle.getPropertyValue(prop); }); return result; }, { selector, stylePropsToGet: styleProperties }); if (!styles) { return { content: [ { type: 'text', text: `Element with selector "${selector}" not found` } ], isError: true }; } // Result message construction const resultMessage = { selector, styles, checkpointId }; return { content: [ { type: 'text', text: JSON.stringify(resultMessage, null, 2) } ] }; } catch (error) { const errorMessage = error instanceof Error ? error.message : String(error); Logger.error(`Failed to get element styles: ${errorMessage}`); return { content: [ { type: 'text', text: `Failed to get element styles: ${errorMessage}` } ], isError: true }; } }
- src/tools/browser-tools.ts:372-374 (schema)Zod schema defining the input parameters: selector (CSS selector) and styleProperties (array of style names to retrieve).selector: z.string().describe('CSS selector of the element to inspect'), styleProperties: z.array(z.string()).describe("Array of style property names to retrieve (e.g., ['color', 'fontSize', 'backgroundColor'])") },
- src/tools/browser-tools.ts:369-442 (registration)The server.tool registration call that defines the tool name, description, input schema, and attaches the handler function within the registerBrowserTools function.'get-element-styles', 'Retrieves style information of a specific element', { selector: z.string().describe('CSS selector of the element to inspect'), styleProperties: z.array(z.string()).describe("Array of style property names to retrieve (e.g., ['color', 'fontSize', 'backgroundColor'])") }, async ({ selector, styleProperties }) => { try { // Check browser status const browserStatus = getContextForOperation(); if (!browserStatus.isStarted) { return browserStatus.error; } // Get current checkpoint ID const checkpointId = await getCurrentCheckpointId(browserStatus.page); // Retrieve element styles const styles = await browserStatus.page.evaluate(({ selector, stylePropsToGet }: { selector: string; stylePropsToGet: string[] }) => { const element = document.querySelector(selector); if (!element) return null; const computedStyle = window.getComputedStyle(element); const result: Record<string, string> = {}; stylePropsToGet.forEach((prop: string) => { result[prop] = computedStyle.getPropertyValue(prop); }); return result; }, { selector, stylePropsToGet: styleProperties }); if (!styles) { return { content: [ { type: 'text', text: `Element with selector "${selector}" not found` } ], isError: true }; } // Result message construction const resultMessage = { selector, styles, checkpointId }; return { content: [ { type: 'text', text: JSON.stringify(resultMessage, null, 2) } ] }; } catch (error) { const errorMessage = error instanceof Error ? error.message : String(error); Logger.error(`Failed to get element styles: ${errorMessage}`); return { content: [ { type: 'text', text: `Failed to get element styles: ${errorMessage}` } ], isError: true }; } } );
- src/tools/browser-tools.ts:55-95 (helper)Utility function getContextForOperation used by the handler to retrieve the active browser page/context, handling contextId or defaulting to most recent.const getContextForOperation = (contextId?: string): BrowserStatus => { let contextInstance; if (contextId) { contextInstance = contextManager.getContext(contextId); if (!contextInstance) { return { isStarted: false, error: { content: [ { type: 'text', text: `Browser '${contextId}' not found. Use 'list-browsers' to see available browsers or 'start-browser' to create one.` } ], isError: true } }; } } else { contextInstance = contextManager.getMostRecentContext(); if (!contextInstance) { return { isStarted: false, error: { content: [ { type: 'text', text: 'No active browsers found. Use \'start-browser\' to create a browser first.' } ], isError: true } }; } } // Note: contextInstance.page is now always defined (never null) return { isStarted: true, page: contextInstance.page }; };
- src/tools/browser-tools.ts:98-104 (helper)Utility function to extract the current checkpoint ID from a meta tag in the page, included in the response.const getCurrentCheckpointId = async (page: Page) => { const checkpointId = await page.evaluate(() => { const metaTag = document.querySelector('meta[name="__mcp_checkpoint"]'); return metaTag ? metaTag.getAttribute('data-id') : null; }); return checkpointId; };