对 Playwright MCP 进行二次开发，能让您突破其原有功能的边界，将浏览器自动化能力深度定制并嵌入到专属的业务流程和AI智能体中。这意味着您可以针对特定场景（如爬取复杂身份验证的网站、执行独特的企业应用测试流程或连接内部数据系统）构建高度定制化的AI助手，从而打造出竞争对手难以复制的、效率倍增的自动化解决方案，真正释放Playwright在您特定领域内的全部潜力。

下面我将介绍二次开发Playwright MCP的步骤

克隆项目：

git clone https://github.com/microsoft/playwright-mcp.git
cd playwright-mcp

# 查看项目结构
ls -la

安装依赖：

# 安装 Node.js 依赖（需要 Node.js 18+）
npm install

# 或使用 yarn
yarn install

查看 package.json 了解项目结构：

cat package.json

## 2. 开发环境配置

### 安装开发依赖

# 如果需要 TypeScript 编译
npm install -g typescript

# 安装 Playwright 浏览器
npx playwright install

### 创建开发配置文件

创建 `dev-config.json`:

{
  "browser": {
    "browserName": "chromium",
    "isolated": false,
    "launchOptions": {
      "headless": false,
      "devtools": true
    }
  },
  "server": {
    "port": 8931,
    "host": "localhost"
  },
  "capabilities": ["tabs", "pdf", "vision"],
  "outputDir": "./dev-output"
}

## 3. 本地开发启动方式

### 方式一：直接运行源码
 

# 如果是 TypeScript 项目，先编译
npm run build
# 或
tsc

# 直接运行编译后的文件
node dist/index.js --config ./dev-config.json --port 8931

方式二：使用开发脚本

{
  "scripts": {
    "dev": "node dist/index.js --config ./dev-config.json --port 8931 --headless=false",
    "dev:debug": "node --inspect dist/index.js --config ./dev-config.json",
    "build": "tsc",
    "build:watch": "tsc --watch"
  }
}

然后运行:

npm run dev

方式三：使用本地路径启动

# 在项目根目录
node ./dist/index.js --port 8931 --config ./dev-config.json

## 4. 二次开发示例

### 添加自定义工具方法

在源码中找到工具注册位置，添加自定义功能：

// 在 src/tools/ 目录下创建新的工具文件
// 例如: src/tools/custom-tools.ts

export function registerCustomTools(server: Server) {
  // 添加自定义的浏览器操作工具
  server.setRequestHandler(ListToolsRequestSchema, async () => ({
    tools: [
      ...existingTools,
      {
        name: "browser_custom_action",
        description: "执行自定义浏览器操作",
        inputSchema: {
          type: "object",
          properties: {
            action: { type: "string" },
            params: { type: "object" }
          }
        }
      }
    ]
  }));

  // 实现自定义工具的处理逻辑
  server.setRequestHandler(CallToolRequestSchema, async (request) => {
    if (request.params.name === "browser_custom_action") {
      // 实现你的自定义逻辑
      return await handleCustomAction(request.params.arguments);
    }
    // 处理其他工具...
  });
}

修改现有功能

typescript

// 例如增强 browser_snapshot 功能
async function enhancedSnapshot(page: Page) {
  const snapshot = await page.accessibility.snapshot();
  
  // 添加自定义的快照增强逻辑
  const enhancedData = {
    ...snapshot,
    timestamp: new Date().toISOString(),
    viewport: await page.viewportSize(),
    url: page.url(),
    // 添加更多元信息
  };
  
  return enhancedData;
}

5. 配置 MCP 客户端连接本地服务

### Claude Desktop 配置

修改 Claude Desktop 的配置文件：

json

{
  "mcpServers": {
    "playwright-dev": {
      "command": "node",
      "args": ["/path/to/your/playwright-mcp/dist/index.js", "--port", "8931"],
      "env": {
        "NODE_ENV": "development"
      }
    }
  }
}

使用 SSE 端点方式

{
  "mcpServers": {
    "playwright-dev": {
      "url": "http://localhost:8931/sse"
    }
  }
}

## 6. 调试和测试

### 启用调试模式
bash

# 使用 Node.js 调试器
node --inspect-brk dist/index.js --port 8931

# 使用环境变量启用详细日志
DEBUG=playwright-mcp:* node dist/index.js --port 8931

### 测试自定义功能

创建测试脚本 `test-custom.js`:

javascript

import { createConnection } from './dist/index.js';

async function testCustomFeatures() {
  const connection = await createConnection({
    browser: { launchOptions: { headless: false } }
  });
  
  // 测试你的自定义功能
  console.log('Testing custom MCP server...');
}

testCustomFeatures().catch(console.error);

## 7. 打包和分发

### 构建生产版本

# 编译 TypeScript
npm run build

# 如果需要，可以创建可执行文件
npm install -g pkg
pkg package.json --out-path dist-binary

创建本地 npm 包

# 修改 package.json 中的版本和名称
npm pack

# 或者发布到私有 registry
npm publish --registry http://your-private-registry

## 8. 开发最佳实践

### 目录结构建议

playwright-mcp/
├── src/
│   ├── tools/          # 工具定义
│   ├── handlers/       # 请求处理器
│   ├── config/         # 配置管理
│   ├── utils/          # 工具函数
│   └── index.ts        # 入口文件
├── dist/               # 编译输出
├── tests/              # 测试文件
├── dev-config.json     # 开发配置
└── package.json