tauri_webview_get_styles
Retrieve computed CSS styles from elements in Tauri applications for UI debugging and testing purposes. Specify CSS selectors to inspect element styling during development.
Instructions
[Tauri Apps Only] Get computed CSS styles from elements in a Tauri app. Requires active tauri_driver_session. Targets the only connected app, or the default app if multiple are connected. Specify appIdentifier (port or bundle ID) to target a specific app. For browser style inspection, use Chrome DevTools MCP instead.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| windowId | No | Window label to target (defaults to "main") | |
| appIdentifier | No | App port or bundle ID to target. Defaults to the only connected app or the default app if multiple are connected. | |
| selector | Yes | CSS selector for element(s) to get styles from | |
| properties | No | Specific CSS properties to retrieve. If omitted, returns all computed styles | |
| multiple | No | Whether to get styles for all matching elements (true) or just the first (false) |
Implementation Reference
- Main handler function: destructures options, builds execution script using SCRIPTS.getStyles, and executes it via executeInWebview in the target webview.export async function getStyles(options: GetStylesOptions): Promise<string> { const { selector, properties, multiple = false, windowId, appIdentifier } = options; const script = buildScript(SCRIPTS.getStyles, { selector, properties: properties || [], multiple, }); try { return await executeInWebview(script, windowId, appIdentifier); } catch(error: unknown) { const message = error instanceof Error ? error.message : String(error); throw new Error(`Get styles failed: ${message}`); } }
- Zod schema defining input parameters for the tool, extending WindowTargetSchema.export const GetStylesSchema = WindowTargetSchema.extend({ selector: z.string().describe('CSS selector for element(s) to get styles from'), properties: z.array(z.string()).optional().describe('Specific CSS properties to retrieve. If omitted, returns all computed styles'), multiple: z.boolean().optional().default(false) .describe('Whether to get styles for all matching elements (true) or just the first (false)'), });
- packages/mcp-server/src/tools-registry.ts:422-447 (registration)Tool registration entry in the central TOOLS array, binding schema and handler with metadata.{ name: 'tauri_webview_get_styles', description: '[Tauri Apps Only] Get computed CSS styles from elements in a Tauri app. ' + 'Requires active tauri_driver_session. ' + MULTI_APP_DESC + ' ' + 'For browser style inspection, use Chrome DevTools MCP instead.', category: TOOL_CATEGORIES.UI_AUTOMATION, schema: GetStylesSchema, annotations: { title: 'Get Styles in Tauri Webview', readOnlyHint: true, openWorldHint: false, }, handler: async (args) => { const parsed = GetStylesSchema.parse(args); return await getStyles({ selector: parsed.selector, properties: parsed.properties, multiple: parsed.multiple, windowId: parsed.windowId, appIdentifier: parsed.appIdentifier, }); }, },
- Injected JavaScript IIFE: selects elements by CSS selector, retrieves computed styles (specific properties or all), returns JSON string./** * Get computed CSS styles for elements * * @param {Object} params * @param {string} params.selector - CSS selector for element(s) * @param {string[]} params.properties - Specific CSS properties to retrieve * @param {boolean} params.multiple - Whether to get styles for all matching elements */ (function(params) { const { selector, properties, multiple } = params; const elements = multiple ? Array.from(document.querySelectorAll(selector)) : [document.querySelector(selector)]; if (!elements[0]) { throw new Error(`Element not found: ${selector}`); } const results = elements.map(element => { const styles = window.getComputedStyle(element); if (properties.length > 0) { const result = {}; properties.forEach(prop => { result[prop] = styles.getPropertyValue(prop); }); return result; } // Return all styles const allStyles = {}; for (let i = 0; i < styles.length; i++) { const prop = styles[i]; allStyles[prop] = styles.getPropertyValue(prop); } return allStyles; }); return JSON.stringify(multiple ? results : results[0]); })