莎士比亚
用于Playwright浏览器自动化和CSSOM检查的MCP服务器。将基于文本的CSS分析与运行时浏览器检查相结合，以进行全面的样式调试。
特性
- 导航：在无头Chromium浏览器中打开URL
- 截图：捕获完整或视口屏幕截图
- 评估：在页面上下文中执行任意JavaScript
- 获取计算样式：检索特定元素的计算CSS
- 查询元素：查找所有匹配的元素并获取其计算样式
- HTTPS支持：自动接受用于本地开发的自签名证书
安装
npm install
npx playwright install chromium用法
添加到克劳德代码
claude mcp add --transport stdio shakespeare -- node /path/to/shakespeare/index.js可用工具
导航
导航到浏览器中的URL。
{
"url": "https://localhost:5173"
}截图
截取当前页面的屏幕截图。
{
"fullPage": true
}评估
在页面上下文中执行JavaScript。
基本用法：
{
"script": "document.querySelectorAll('.card').length"
}输出模式的高级用法：
{
"script": "document.documentElement.outerHTML",
"output_mode": "file",
"output_path": "/path/to/output.html"
}参数：
script（必填）：要执行的JavaScript代码output_mode（可选）：如何处理输出
- "direct" （默认）：立即返回Claude的上下文 - "file"：写入磁盘并返回文件路径
output_path（可选）：使用时自定义文件路径output_mode: "file"size_limit（可选）：自动文件模式的字符阈值（默认值：200000≈25%上下文）
get_computerd_styles
获取特定元素的计算CSS样式。
{
"selector": ".user-card .btn",
"properties": ["width", "max-width", "color"]
}如果 properties 省略，返回所有计算样式。
查询元素
查询所有匹配的元素并获取它们的计算样式。
{
"selector": ".card",
"properties": ["gap", "padding", "margin"]
}返回一个数组，其中包含每个匹配元素的计算样式。
关闭浏览器
关闭浏览器实例以释放资源。
{}工作流
工作流程1：地方发展项目
对于产出较小且可控的开发项目：
// Navigate to local dev server
navigate({ url: "https://localhost:5173" })
// Extract small sections directly
evaluate({
script: "document.querySelector('.main-content').innerHTML"
})
// Get specific data
evaluate({
script: `
Array.from(document.querySelectorAll('.card')).map(el => ({
class: el.className,
offsetTop: el.offsetTop,
offsetHeight: el.offsetHeight
}))
`
})工作流程2：JavaScript渲染文档网站
要从JS渲染的网站获取大型文档，请使用Shakespeare进行提取，然后使用专门的工具进行清理：
// Step 1: Navigate to docs site
navigate({ url: "https://docs.framework.dev" })
// Step 2: Extract HTML to file (auto-triggers if >200k chars)
evaluate({
script: "document.documentElement.outerHTML",
output_mode: "file",
output_path: "/tmp/raw-docs.html"
})
// Step 3: Use specialized cleaning tools
// Option A: Use webfetch-clean MCP tool directly on the URL
// (webfetch-clean handles fetching + cleaning in one step)
// Option B: Use other HTML processing tools on the saved file
// Read tool with processing, pandoc, etc.
// For smaller pages, extract specific sections:
evaluate({
script: "document.querySelector('main').innerHTML"
})工作流程3：样式调试
// Navigate to page
navigate({ url: "https://localhost:5173" })
// Take screenshot to see current state
screenshot({ fullPage: true })
// Query all cards to see their gaps
query_elements({
selector: ".card",
properties: ["margin-top", "margin-bottom", "gap"]
})
// Get specific element's computed styles
get_computed_styles({
selector: "#logged-in-state",
properties: ["gap", "display", "flex-direction"]
})上下文保护
Shakespeare在提取大型HTML时会自动防止上下文溢出：
自动行为：
- 20万字符以下：直接返回给Claude（安全，约占上下文的25%）
- 超过20万个字符：自动切换到文件模式并发出警告
- 自定义限制：调整
size_limit参数
尺寸警告：
- 直接模式：显示字符数和估计的令牌使用情况
- 文件模式：确认文件写入位置
例子：
// This will auto-write to file if HTML is huge
evaluate({
script: "document.documentElement.outerHTML"
})
// This allows larger direct output (use cautiously)
evaluate({
script: "document.documentElement.outerHTML",
size_limit: 500000 // ~62% of context
})
// Force file output regardless of size
evaluate({
script: "document.documentElement.outerHTML",
output_mode: "file",
output_path: "/path/to/output.html"
})工具分离
莎士比亚专注于 提取 -其他工具手柄 处理:
- 莎士比亚：浏览器自动化、JS执行、HTML提取、大小管理
- webfetch清理：HTML清理（删除脚本/样式/广告），降价转换
- 读取工具：查看带有行号的已保存文件，部分读取
- 其他工具：pandoc、html到markdown、自定义处理器
这种分离使每个工具都能在其特定任务中脱颖而出。
组合方法
基于文本的分析（读取工具）：
- 一次查看所有CSS规则
- 了解开发人员意图
- 发现模式和潜在冲突
运行时检查（莎士比亚）：
- 查看实际渲染的内容
- 调试特异性和级联问题
- 验证更改是否有效
- 提取JS渲染的内容进行分析
这些共同提供了对样式的架构设计和运行时行为的完全可见性。
发展
服务器在stdio传输上运行，并在所有工具调用中维护一个浏览器实例。浏览器在首次使用时会自动启动，并可以通过以下方式明确关闭 close_browser.
许可证
麻省理工学院