資料月份 2026-09

Claude Bridge

程式設計開發

AI 程式設計助手 AI 瀏覽器 / 網頁自動化

Inspect React elements and send component context to Claude Code via MCP

在 Chrome 商店安裝 ↗

據 AlphaMoat 統計,截至 2026-09,Chrome 外掛 Claude Bridge 使用者數為 151,環比 +7.1%,評分 5(1 人評價),在全部 9,324 款 AI 瀏覽器外掛中排名第 3,601 位,在「程式設計開發」分類(601 款)中排名第 219 位。

使用者數 · 2026-09

151+7.1%

評分

★ 51 評價

全站排名(9,324 個)

#3,601

「程式設計開發」排名

#219/ 601

Claude Bridge 是什麼

Chrome 商店介紹

Inspect React elements and send component context to Claude Code via MCP Claude Bridge adds a panel to Chrome DevTools that lets you inspect any element on a web page and send its full context to Claude Code.

HOW IT WORKS 1. Open DevTools and go to the "Claude Bridge" panel 2. Click "Inspect" to enter inspection mode 3. Hover over elements to see component names highlighted 4. Click an element to capture it (inspect mode stops automatically) 5. The element data is instantly available in your Claude Code session

WHAT GETS CAPTURED

React component name and source file path
Component props (sanitized, functions and large objects excluded)
Component ancestry chain (up to 3 levels)
CSS selector and outer HTML
Computed styles (layout, typography, colors, spacing)
Bounding box and page URL

SETUP 1. Install the extension 2. Run: claude mcp add claude-bridge -- npx claude-bridge-mcp 3. Open DevTools on any page — look for the "Claude Bridge" tab

Works on any website. React component info is available on React sites; DOM and style capture works everywhere.

展開其餘商店介紹▾

PRIVACY Everything runs locally. Captured data is sent only to a local MCP server on your machine (localhost:18925). No data is collected or transmitted to external servers.