modify_css

Instructions

Implementation Reference

• src/tools/devtools-modify.ts:32-53 (handler)

  The handler function for the 'modify_css' tool. It accepts a CSS selector and a styles object, sends a 'modify_css' command via WebSocket to the browser extension, and returns a success/error message.

  server.tool(
    'modify_css',
    'Modify CSS styles of elements on the page',
    {
      selector: z.string().describe('CSS selector of the element(s) to style'),
      styles: z.record(z.string()).describe('Object of CSS property-value pairs (e.g., {"color": "red", "display": "none"})'),
      tabId: z.number().optional().describe('Target tab ID (defaults to active tab)'),
      apiKey: z.string().optional().describe('API key for authentication'),
    },
    async ({ selector, styles, tabId, apiKey }) => {
      const result = await bridge.sendCommand({
        command: 'modify_css',
        params: { selector, styles },
        tabId,
        apiKey,
      });
      if (!result.success) {
        return { content: [{ type: 'text', text: `Error: ${result.error?.message}` }], isError: true };
      }
      return { content: [{ type: 'text', text: `Applied ${Object.keys(styles).length} style(s) to ${selector}` }] };
    }
  );

• src/tools/devtools-modify.ts:35-40 (schema)

  Input schema for the 'modify_css' tool: selector (string), styles (record of strings), optional tabId (number), optional apiKey (string).

  {
    selector: z.string().describe('CSS selector of the element(s) to style'),
    styles: z.record(z.string()).describe('Object of CSS property-value pairs (e.g., {"color": "red", "display": "none"})'),
    tabId: z.number().optional().describe('Target tab ID (defaults to active tab)'),
    apiKey: z.string().optional().describe('API key for authentication'),
  },

• src/tools/devtools-modify.ts:5-54 (registration)

  Registration function that registers 'modify_css' (and 'modify_html') as MCP tools on the server.

  export function registerDevtoolsModifyTools(server: McpServer, bridge: WebSocketBridge) {
    server.tool(
      'modify_html',
      'Modify DOM elements on the page (set HTML, attributes, or remove elements)',
      {
        selector: z.string().describe('CSS selector of the element to modify'),
        action: z.enum(['setOuterHTML', 'setInnerHTML', 'setAttribute', 'removeAttribute', 'removeNode'])
          .describe('The modification action to perform'),
        value: z.string().optional().describe('New HTML content or attribute value'),
        attributeName: z.string().optional().describe('Attribute name (for setAttribute/removeAttribute)'),
        tabId: z.number().optional().describe('Target tab ID (defaults to active tab)'),
        apiKey: z.string().optional().describe('API key for authentication'),
      },
      async ({ selector, action, value, attributeName, tabId, apiKey }) => {
        const result = await bridge.sendCommand({
          command: 'modify_html',
          params: { selector, action, value, attributeName },
          tabId,
          apiKey,
        });
        if (!result.success) {
          return { content: [{ type: 'text', text: `Error: ${result.error?.message}` }], isError: true };
        }
        return { content: [{ type: 'text', text: `Modified ${selector}: ${action}` }] };
      }
    );
  
    server.tool(
      'modify_css',
      'Modify CSS styles of elements on the page',
      {
        selector: z.string().describe('CSS selector of the element(s) to style'),
        styles: z.record(z.string()).describe('Object of CSS property-value pairs (e.g., {"color": "red", "display": "none"})'),
        tabId: z.number().optional().describe('Target tab ID (defaults to active tab)'),
        apiKey: z.string().optional().describe('API key for authentication'),
      },
      async ({ selector, styles, tabId, apiKey }) => {
        const result = await bridge.sendCommand({
          command: 'modify_css',
          params: { selector, styles },
          tabId,
          apiKey,
        });
        if (!result.success) {
          return { content: [{ type: 'text', text: `Error: ${result.error?.message}` }], isError: true };
        }
        return { content: [{ type: 'text', text: `Applied ${Object.keys(styles).length} style(s) to ${selector}` }] };
      }
    );
  }

• src/tools/index.ts:40-40 (registration)

  registerAllTools calls registerDevtoolsModifyTools to register the modify tools (including modify_css).

  registerDevtoolsModifyTools(server, bridge);