modify_html

Instructions

Implementation Reference

• src/tools/devtools-modify.ts:6-30 (registration)

  Registration of the 'modify_html' tool via server.tool() with Zod schema for inputs (selector, action, value, attributeName, tabId, apiKey) and async handler that sends a 'modify_html' command via WebSocket bridge

  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}` }] };
    }
  );

• src/tools/devtools-modify.ts:18-29 (handler)

  Handler function for the 'modify_html' tool - calls bridge.sendCommand with the 'modify_html' command and returns success/error response

  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}` }] };
  }

• src/tools/devtools-modify.ts:9-17 (schema)

  Zod schema defining input validation for the 'modify_html' tool: selector (required string), action (enum of setOuterHTML/setInnerHTML/setAttribute/removeAttribute/removeNode), value (optional string), attributeName (optional string), tabId (optional number), apiKey (optional string)

  {
    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'),
  },

• src/websocket-bridge.ts:63-103 (helper)

  sendCommand method on WebSocketBridge that sends the 'modify_html' command (and params) to the Chrome extension via WebSocket and returns the response

  async sendCommand(cmd: BridgeCommand): Promise<BridgeResponse> {
    if (!this.isConnected()) {
      return {
        success: false,
        error: {
          code: 'NOT_CONNECTED',
          message: 'Chrome extension is not connected. Ensure the extension is installed, enabled, and the browser is running.',
        },
      };
    }
  
    const id = crypto.randomUUID();
    const timeout = cmd.timeout ?? DEFAULT_TIMEOUT;
  
    return new Promise<BridgeResponse>((resolve, reject) => {
      const timer = setTimeout(() => {
        this.pending.delete(id);
        resolve({
          success: false,
          error: {
            code: 'TIMEOUT',
            message: `Command '${cmd.command}' timed out after ${timeout}ms`,
          },
        });
      }, timeout);
  
      this.pending.set(id, { resolve, reject, timer });
  
      const message = {
        id,
        type: 'request',
        command: cmd.command,
        params: cmd.params,
        tabId: cmd.tabId,
        apiKey: cmd.apiKey,
        timestamp: Date.now(),
      };
  
      this.client!.send(JSON.stringify(message));
    });
  }

• src/types.ts:1-27 (helper)

  Type definitions for BridgeCommand and BridgeResponse used by the tool's handler when communicating via WebSocket

  export interface BridgeCommand {
    command: string;
    params: Record<string, unknown>;
    tabId?: number;
    apiKey?: string;
    timeout?: number;
  }
  
  export interface BridgeResponse {
    success: boolean;
    data?: unknown;
    error?: {
      code: string;
      message: string;
    };
  }
  
  export interface PendingRequest {
    resolve: (value: BridgeResponse) => void;
    reject: (error: Error) => void;
    timer: ReturnType<typeof setTimeout>;
  }
  
  export const DEFAULT_TIMEOUT = 30_000;
  export const LONG_TIMEOUT = 60_000;
  export const WEBSOCKET_PORT = parseInt(process.env.WEBSOCKET_PORT || '7890', 10);