YetiBrowser MCP

[!IMPORTANT] โปรเจกต์นี้ถูกเก็บถาวรแล้ว มันถูกสร้างขึ้นเพื่อแก้ปัญหาการควบคุมเบราว์เซอร์ใน AI agent อย่าง Claude และ Codex แต่ตอนนี้ agent เหล่านั้นมีฟังก์ชันเหล่านี้ในตัวแล้วโดยไม่ต้องใช้โซลูชันแบบ MCP เฉพาะทาง

YetiBrowser MCP

YetiBrowser MCP เป็นการนำเวิร์กโฟลว์ Browser MCP มาใช้แบบโอเพนซอร์สเต็มรูปแบบ มันเชื่อมต่อเซิร์ฟเวอร์ MCP ที่ใช้ Node เข้ากับส่วนขยาย Chrome/Firefox เพื่อให้ไคลเอนต์ Model Context Protocol—Codex/Claude Code, Cursor, Windsurf, MCP Inspector หรือเครื่องมือของคุณเอง—สามารถควบคุมแท็บเบราว์เซอร์จริงได้โดยอัตโนมัติ โดยที่ทุกไบต์ยังคงอยู่บนเครื่องของคุณและตรวจสอบได้

ทำไมต้องเลือก YetiBrowser MCP?

• โปร่งใสและปรับแต่งได้ – ไม่มีการดาวน์โหลดแบบ blob ตรวจสอบ ฟอร์ก และขยายทุกคอมโพเนนต์ได้
• เน้นโลคอลเป็นหลัก – ส่วนขยายสื่อสารกับเซิร์ฟเวอร์ MCP บน localhost เท่านั้น ข้อมูลการท่องเว็บไม่เคยออกจากอุปกรณ์ของคุณ
• ข้ามเบราว์เซอร์ – ลอจิกร่วมกันขับเคลื่อนแพ็คเกจทั้ง Chrome และ Firefox (บิลด์ Firefox กำลังรอการสนับสนุน Manifest V3 ที่ดีขึ้น ดังนั้น UX การเชื่อมต่ออาจถูกจำกัดจนกว่า Mozilla จะส่ง API MV3 เต็มรูปแบบ)
• เครื่องมือที่เน้นนักพัฒนา – การจับคอนโซลที่สมบูรณ์ยิ่งขึ้น การเปรียบเทียบ DOM การดัมพ์สถานะหน้า และภาพหน้าจอเต็มหน้าที่สร้างมาเพื่อการดีบักและ QA
• พร้อมสำหรับการใช้งานจริง – สคริปต์และเอกสารสำหรับการแพ็คเกจ การเผยแพร่ และการรวมเข้ากับเวิร์กโฟลว์ IDE

เค้าโครงที่เก็บ

• packages/shared – นิยาม TypeScript ที่ใช้ร่วมกันสำหรับข้อความและสคีมาเครื่องมือ
• packages/server – เซิร์ฟเวอร์ MCP ที่เชื่อมไคลเอนต์ MCP เข้ากับแท็บเบราว์เซอร์ที่กำลังทำงาน
• extensions/shared – ซอร์สส่วนขยายที่ใช้ร่วมกัน (พื้นหลัง/ป๊อปอัป) และแอสเซท
• extensions/chrome / extensions/firefox – เลเยอร์การแพ็คเกจต่อเบราว์เซอร์
• docs/ – คำสั่งพื้นที่ทำงาน รายการตรวจสอบการเผยแพร่ และบันทึกคุณสมบัติ
• scripts/ – ยูทิลิตี้ตัวช่วย เช่น package-extensions.sh สำหรับ zip รีลีส

เครื่องมือ MCP ที่พร้อมใช้งาน

• browser_snapshot – จับภาพสแนปช็อตที่เน้นการเข้าถึงของหน้าปัจจุบัน
• browser_snapshot_diff – เปรียบเทียบสแนปช็อตล่าสุดสองรายการเพื่อเน้นการเปลี่ยนแปลง DOM/ARIA
• browser_navigate – โหลด URL ใหม่ในแท็บที่เชื่อมต่อและส่งคืนสแนปช็อตที่อัปเดต
• browser_go_back / browser_go_forward – เลื่อนผ่านประวัติในขณะที่รักษา MCP ให้ซิงค์กัน
• browser_wait – หยุดการทำงานอัตโนมัติชั่วคราวตามจำนวนวินาทีที่กำหนด
• browser_wait_for – บล็อกจนกว่าตัวเลือกจะปรากฏขึ้น (เลือกให้มองเห็นได้) ก่อนดำเนินการต่อ
• browser_press_key – จำลองการกดปุ่มคีย์บอร์ดบนองค์ประกอบที่โฟกัส
• browser_click – คลิกองค์ประกอบที่ระบุโดยตัวเลือก CSS
• browser_hover – เลื่อนตัวชี้เมาส์ไปเหนือองค์ประกอบเป้าหมาย
• browser_drag – ลากองค์ประกอบไปยังเป้าหมายการวางสำหรับ UI แบบเรียงลำดับ/ลากและวาง
• browser_type – พิมพ์ข้อความ (เลือกส่งด้วย Enter ได้) ลงในองค์ประกอบที่แก้ไขได้
• browser_fill_form – กรอกข้อมูลในอินพุต/ซีเล็กต์/เช็คบ็อกซ์/เรดิโอหลายรายการในการเรียกครั้งเดียว
• browser_select_option – เลือกหนึ่งตัวเลือกหรือมากกว่าในองค์ประกอบ <select>
• browser_screenshot – จับภาพหน้าจอวิวพอร์ตหรือเต็มหน้าผ่านโปรโตคอล DevTools
• browser_get_console_logs – ส่งคืนเอาต์พุตคอนโซลล่าสุด รวมถึงข้อผิดพลาดพร้อม stack traces
• browser_page_state – ดัมพ์ฟอร์ม คีย์พื้นที่เก็บข้อมูล และคุกกี้สำหรับหน้าที่เชื่อมต่อ
• browser_connection_info – รายงานพอร์ต WebSocket บริดจ์ สถานะการเชื่อมต่อ และเวอร์ชันส่วนขยาย
• browser_evaluate – รัน JavaScript ที่กำหนดเองภายในหน้าและส่งคืนผลลัพธ์ที่ซีเรียลไลซ์เป็น JSON ได้
• browser_handle_dialog – ยอมรับหรือปิดไดอะล็อก alert/confirm/prompt ด้วยข้อความพร้อมท์เสริม

การติดตั้งส่วนขยายเบราว์เซอร์ MCP

เบราว์เซอร์ Chrome

• ติดตั้งส่วนขยายเบราว์เซอร์ Chrome ล่าสุดที่นี่: https://chromewebstore.google.com/detail/hpedknkjljpopinabjjmljgckhlancni?utm_source=item-share-cb
• ปล่อยให้เป็นโหมดการเชื่อมต่อ อัตโนมัติ เว้นแต่คุณจะรันหลายอินสแตนซ์ของ YetiBrowser MCP Server

เบราว์เซอร์ Firefox (ยังไม่พร้อมใช้งานในขณะนี้)

• เนื่องจากความสามารถที่จำกัดของ Manifest v3 ใน Firefox รุ่นเสถียร ส่วนขยาย Firefox จึงถูกระงับไว้จนกว่าจะมีการสนับสนุนเต็มรูปแบบโดยทั่วไป (นอกเหนือจากบิลด์ Nightly)

การติดตั้งเซิร์ฟเวอร์ MCP

Codex CLI

• แก้ไขไฟล์ ~/.codex/config.toml ของคุณและเพิ่มรายการ MCP:

  [mcp_servers.yetibrowser-mcp]
  command = "npx"
  args = ["-y", "@yetidevworks/server"]
  

• รีสตาร์ทคำสั่ง codex CLI คุณควรเห็น yetibrowser-mcp อยู่ในรายการภายใต้เครื่องมือ /mcp
• หากคุณต้องการระบุพอร์ตเฉพาะ ให้ใช้รูปแบบนี้สำหรับรายการ args: args = ["-y", "@yetidevworks/server", "--ws-port", "9010"]

Claude Code

• ตรวจสอบให้แน่ใจว่าติดตั้งส่วนขยายและเชื่อมต่อกับแท็บแล้ว จากนั้นเริ่มเซิร์ฟเวอร์ MCP ด้วย npx -y @yetidevworks/server (หรือรัน CLI ที่บิลด์ในเครื่อง)
• เพิ่มรายการเซิร์ฟเวอร์ลงใน ~/Library/Application Support/Claude/claude_desktop_config.json (ดูตัวอย่างใน docs/publishing.md)
• รีสตาร์ท claude เพื่อให้รับเซิร์ฟเวอร์ MCP ใหม่ คุณควรเห็น yetibrowser-mcp อยู่ในรายการภายใต้เมนูเครื่องมือ /mcp เมื่อส่วนขยายเชื่อมต่อแล้ว

ไคลเอนต์อื่นๆ ที่รู้จัก MCP

• ไคลเอนต์ MCP ใดๆ สามารถเชื่อมต่อได้โดยการสปอว์น CLI (npx -y @yetidevworks/server) หรือเลือกระบุพอร์ตเฉพาะ เช่น npx -y @yetidevworks/server --ws-port 9010
• เซิร์ฟเวอร์เปิดเผยการขนส่ง MCP มาตรฐานผ่าน stdio ดังนั้นใช้กลไกการกำหนดค่าใดๆ ที่ไคลเอนต์ของคุณรองรับเพื่อรันคำสั่งข้างต้นเมื่อเชื่อมต่อแท็บแล้ว

MCP Inspector

• สำหรับการทดสอบและดีบักนอกตัวแทนเขียนโค้ด
• npx @modelcontextprotocol/inspector npx -y @yetidevworks/server -- --ws-port 9010 เพื่อรันและตรวจสอบเซิร์ฟเวอร์ MCP ร่วมกับส่วนขยายเบราว์เซอร์ YetiBrowser MCP

การแก้ไขปัญหา

• CLI จะเดินผ่านพอร์ต 9010-9020 จนกว่าจะพบพอร์ตว่าง โดยบันทึก switched to เมื่อมันเลื่อนไปข้างหน้า ส่ง --ws-port <port> หากคุณต้องการตรึงพอร์ตเฉพาะแทน
• ป๊อปอัปส่วนขยายเบราว์เซอร์สะท้อนพฤติกรรมนั้น: ปล่อยให้เป็น "อัตโนมัติ" เพื่อติดตามพอร์ตของ CLI หรือเลือก "กำหนดเอง" และป้อนพอร์ตที่รายงานโดย browser_connection_info / บันทึก CLI เพื่อเขียนทับ
• เพียงถามเครื่องมือ AI ของคุณเกี่ยวกับพอร์ตการเชื่อมต่อ ตัวอย่างเช่น: what is the yetibrowser mcp connction info? จากนั้นตั้งค่าพอร์ตกำหนดเองเป็นพอร์ตที่รายงาน

เอกสารประกอบและสคริปต์บิลด์

• คำสั่งพื้นที่ทำงานอยู่ใน docs/workspace-commands.md
• ขั้นตอนการเผยแพร่ (npm + ร้านค้าส่วนขยาย) อยู่ใน docs/publishing.md
• ลักษณะการทำงานของภาพหน้าจอมีเอกสารใน docs/screenshot.md
• สร้าง zip ที่แจกจ่ายได้สำหรับ Chrome/Firefox ด้วย ./scripts/package-extensions.sh (เอาต์พุตไปที่ artifacts/)
• นโยบายความเป็นส่วนตัวระดับที่เก็บมีอยู่ใน PRIVACY.md