browser_snapshot

Instructions

Implementation Reference

• src/tools/accessibility.ts:14-27 (handler)

  The handler function for the 'browser_snapshot' tool. It sends a 'browser_snapshot' command via the WebSocket bridge to the Chrome extension, then returns the result as text content.

    async ({ tabId, apiKey }) => {
      const result = await bridge.sendCommand({
        command: 'browser_snapshot',
        params: {},
        tabId,
        apiKey,
        timeout: LONG_TIMEOUT,
      });
      if (!result.success) {
        return { content: [{ type: 'text', text: `Error: ${result.error?.message}` }], isError: true };
      }
      return { content: [{ type: 'text', text: result.data as string }] };
    }
  );

• src/tools/accessibility.ts:10-13 (schema)

  Input schema for browser_snapshot — accepts optional tabId and apiKey parameters, validated with Zod.

  {
    tabId: z.number().optional().describe('Target tab ID (defaults to currently active tab)'),
    apiKey: z.string().optional().describe('API key for authentication if enabled'),
  },

• src/tools/accessibility.ts:6-27 (registration)

  Registration of the 'browser_snapshot' tool via server.tool() in the registerAccessibilityTools function. The tool description explains it returns a text-based accessibility tree snapshot.

  export function registerAccessibilityTools(server: McpServer, bridge: WebSocketBridge) {
    server.tool(
      'browser_snapshot',
      'Get a text-based accessibility tree snapshot of the page. This shows the page structure with ARIA roles, names, and states — ideal for understanding page layout when you cannot see screenshots.',
      {
        tabId: z.number().optional().describe('Target tab ID (defaults to currently active tab)'),
        apiKey: z.string().optional().describe('API key for authentication if enabled'),
      },
      async ({ tabId, apiKey }) => {
        const result = await bridge.sendCommand({
          command: 'browser_snapshot',
          params: {},
          tabId,
          apiKey,
          timeout: LONG_TIMEOUT,
        });
        if (!result.success) {
          return { content: [{ type: 'text', text: `Error: ${result.error?.message}` }], isError: true };
        }
        return { content: [{ type: 'text', text: result.data as string }] };
      }
    );

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

  registerAllTools calls registerAccessibilityTools which registers browser_snapshot among all other tools.

  export function registerAllTools(server: McpServer, bridge: WebSocketBridge) {
    registerNavigationTools(server, bridge);
    registerTabManagementTools(server, bridge);
    registerKeyboardTools(server, bridge);
    registerScreenshotTools(server, bridge);
    registerClickTools(server, bridge);
    registerInputTools(server, bridge);
    registerDragDropTools(server, bridge);
    registerHoverTools(server, bridge);
  
    registerDevtoolsSourcesTools(server, bridge);
    registerDevtoolsModifyTools(server, bridge);
    registerDevtoolsNetworkTools(server, bridge);
    registerDevtoolsStorageTools(server, bridge);
    registerDevtoolsConsoleTools(server, bridge);
  
    registerAccessibilityTools(server, bridge);
    registerEmulationTools(server, bridge);
    registerElementTools(server, bridge);
    registerAuditTools(server, bridge);
    registerInteractionTools(server, bridge);
    registerMonitoringTools(server, bridge);
    registerQaTools(server, bridge);
    registerGestureTools(server, bridge);
    registerMacroTools(server, bridge);
    registerVisualRegressionTools(server, bridge);
  }

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

  WebSocketBridge.sendCommand is the helper method used to dispatch the 'browser_snapshot' command to the Chrome extension and await a 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));
    });
  }