webview_get_styles

Instructions

Implementation Reference

• packages/mcp-server/src/tools-registry.ts:357-384 (registration)

  Registration of the 'webview_get_styles' tool in the tools registry, including description, category, schema reference, and handler that delegates to getStyles().

  {
     name: 'webview_get_styles',
     description:
        '[Tauri Apps Only] Get computed CSS styles from elements in a Tauri app. ' +
        'Supports CSS selectors (default), XPath, and text content matching via the strategy parameter. ' +
        'Requires active 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,
           strategy: parsed.strategy,
           properties: parsed.properties,
           multiple: parsed.multiple,
           windowId: parsed.windowId,
           appIdentifier: parsed.appIdentifier,
        });
     },
  },

• packages/mcp-server/src/driver/webview-interactions.ts:347-364 (handler)

  The getStyles() handler function that builds and executes the style retrieval script in the target webview.

  export async function getStyles(options: GetStylesOptions): Promise<string> {
     const { selector, strategy, properties, multiple = false, windowId, appIdentifier } = options;
  
     const script = buildScript(SCRIPTS.getStyles, {
        selector,
        strategy: strategy ?? 'css',
        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}`);
     }
  }

• packages/mcp-server/src/driver/webview-interactions.ts:97-103 (schema)

  Zod schema (GetStylesSchema) defining inputs: selector, strategy, properties (optional array), multiple (optional boolean), plus inherited windowId and appIdentifier.

  export const GetStylesSchema = WindowTargetSchema.extend({
     selector: z.string().describe('Element selector: CSS selector (default), XPath expression, text content, or ref ID'),
     strategy: selectorStrategyField,
     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/driver/scripts/get-styles.js:1-48 (helper)

  Helper script injected into the webview that resolves elements via window.__MCP__ and retrieves computed CSS styles (specific or all) using window.getComputedStyle().

  /**
   * Get computed CSS styles for elements
   *
   * @param {Object} params
   * @param {string} params.selector - CSS selector, XPath, text, or ref ID (e.g., "ref=e3") for element(s)
   * @param {string} params.strategy - Selector strategy: 'css', 'xpath', or 'text'
   * @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, strategy, properties, multiple } = params;
  
     var elements;
  
     if (multiple) {
        elements = window.__MCP__.resolveAll(selector, strategy);
     } else {
        var el = window.__MCP__.resolveRef(selector, strategy);
        elements = el ? [el] : [];
     }
  
     if (!elements[0]) {
        throw new Error('Element not found: ' + selector);
     }
  
     const results = elements.map(function(element) {
        const styles = window.getComputedStyle(element);
  
        if (properties.length > 0) {
           const result = {};
           properties.forEach(function(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]);
  })

• packages/mcp-server/src/driver/scripts/index.ts:25-30 (helper)

  Registration of the get-styles script in the SCRIPTS map so it can be loaded by buildScript().

     getStyles: loadScript('get-styles'),
     focus: loadScript('focus'),
     findElement: loadScript('find-element'),
     domSnapshot: loadScript('dom-snapshot'),
     elementPicker: loadScript('element-picker'),
  } as const;