Browser MCP: ทำระบบอัตโนมัติบนเบราว์เซอร์ด้วย Cursor, Claude และ VS Code

 (browsermcp.io)
2 คะแนน โดย GN⁺ 2025-04-08 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Browser MCP เชื่อมต่อ แอป AI กับเบราว์เซอร์ของผู้ใช้ เพื่อทำงานอย่างการกรอกฟอร์ม การทดสอบ และงานเว็บที่ทำซ้ำ ๆ ให้เป็นอัตโนมัติ
  • ระบบอัตโนมัติทำงานบน เครื่องโลคัล เพื่อลดความหน่วงของเครือข่าย และกิจกรรมบนเบราว์เซอร์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์ระยะไกล
  • ใช้โปรไฟล์เบราว์เซอร์เดิมได้ตามเดิมเพื่อคงสถานะการล็อกอินไว้ และสามารถหลบเลี่ยง การตรวจจับบอต ขั้นพื้นฐานกับ CAPTCHA ได้ด้วยลายนิ้วมือเบราว์เซอร์จริง
  • ขั้นตอนเริ่มต้นมี 3 ขั้น: ติดตั้งส่วนขยายเบราว์เซอร์, เพิ่ม MCP server ในแอป AI และสร้างเวิร์กโฟลว์ระบบอัตโนมัติ
  • มีเครื่องมือที่จำเป็นสำหรับการควบคุมเบราว์เซอร์ เช่น การย้าย URL, คลิก, ลากแล้ววาง, สแนปช็อต, ภาพหน้าจอ และการดูคอนโซลล็อก

ทำงานอัตโนมัติบนเบราว์เซอร์ที่ทำได้ยากด้วยแอป AI เพียงอย่างเดียว

  • งานอัตโนมัติที่ต้องใช้ การควบคุมเบราว์เซอร์ เช่น การกรอกฟอร์มซ้ำ ๆ บนเว็บไซต์ เป็นสิ่งที่จัดการได้ยากด้วยแอป AI อย่าง Cursor หรือ Claude เพียงอย่างเดียว
  • Browser MCP เชื่อมแอป AI เข้ากับเบราว์เซอร์ของผู้ใช้ เพื่อให้สามารถทำงานบนเว็บแทนผู้ใช้ได้
  • กรณีใช้งานหลักมี 2 แบบ
    • การทดสอบอัตโนมัติ: AI editor ทดสอบโค้ดแบบ end-to-end ตรวจสอบ user flow และองค์ประกอบ UI รวมถึงยืนยันการทำงานของแอปพลิเคชันในหลายสถานการณ์
    • งานอัตโนมัติ: จัดการงานบนเว็บที่ทำซ้ำ ๆ เช่น การเก็บข้อมูล การกรอกฟอร์ม และการทำเวิร์กโฟลว์อัตโนมัติ

ขั้นตอนติดตั้งและรูปแบบการรันบนโลคัล

  • การเริ่มต้นประกอบด้วย 3 ขั้นตอน
    • ติดตั้ง ส่วนขยาย Browser MCP ลงในเบราว์เซอร์
    • เพิ่ม MCP server ของ Browser MCP เข้าไปในแอป AI เพื่อเชื่อมต่อกับส่วนขยายเบราว์เซอร์
    • เริ่มสร้างเวิร์กโฟลว์ระบบอัตโนมัติให้ AI assistant จัดการงานซ้ำ ๆ ภายในเบราว์เซอร์
  • ระบบอัตโนมัติจะทำงานบนเครื่องโลคัลของผู้ใช้
    • มุ่งเน้นประสิทธิภาพที่ดีขึ้นและลดความหน่วงของเครือข่าย
    • กิจกรรมบนเบราว์เซอร์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์ระยะไกลและคงอยู่บนอุปกรณ์
    • ใช้โปรไฟล์เบราว์เซอร์เดิมเพื่อคงสถานะการล็อกอินของบริการต่าง ๆ
    • ใช้ลายนิ้วมือเบราว์เซอร์จริงเพื่อหลบเลี่ยงการตรวจจับบอตขั้นพื้นฐานและ CAPTCHA

เครื่องมือที่มีให้และแพลตฟอร์มที่รองรับ

  • มีเครื่องมือที่จำเป็นสำหรับการควบคุมเบราว์เซอร์
    • Navigate, Go Back, Go Forward, Wait
    • Press Key, Click, Drag & Drop, Hover, Type Text
    • Snapshot, Screenshot, Get Console Logs
  • รองรับ Cursor, Claude, Windsurf และ VSCode
  • ดูเอกสารได้ที่ Documentation

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-04-08
ความคิดเห็นบน Hacker News

  • [!warning!] ส่วนขยาย Chrome ของโปรเจกต์นี้ส่งข้อมูลเทเลเมทรีแบบละเอียดไปยัง PostHog และ Amplitude: https://storage.googleapis.com/cobrowser-images/telemetry.pn..., https://storage.googleapis.com/cobrowser-images/pings.png
    นอกจากนี้ แม้จะมีซอร์สของเซิร์ฟเวอร์ MCP ฝั่งโลคัลรวมอยู่ด้วย แต่ไม่มีซอร์สของส่วนขยาย Chrome และดูเหมือนจะบันเดิล https://github.com/ruifigueira/playwright-crx โดยไม่ระบุที่มา จึงน่าสงสัยมาก

    • ผมเป็นผู้สร้าง Browser MCP เอง ส่วนขยายใช้ ID อุปกรณ์แบบไม่ระบุตัวตน และส่งอีเวนต์วิเคราะห์เมื่อมีการเรียกใช้เครื่องมือ
      ถ้าดูทราฟฟิกเครือข่ายจะยืนยันได้ว่าไม่มีการส่งข้อมูลที่เป็นส่วนบุคคลหรือระบุตัวตนได้เลย จุดประสงค์คือรวบรวมข้อมูลการใช้งานแบบไม่ระบุตัวตน เพื่อดูว่าส่วนขยายถูกใช้งานมากแค่ไหน คล้ายกับที่เว็บไซต์นับจำนวนผู้เข้าชม ผมแบ่งเวลาไปหลายโปรเจกต์ การรู้จำนวนผู้ใช้ที่แอ็กทีฟจึงช่วยตัดสินใจว่าจะโฟกัสตรงไหน
      ส่วนขยายทั้งหมดผมเขียนเองทั้งหมด และเหตุผลที่ตอนนี้ในรีโปมีเฉพาะเซิร์ฟเวอร์ MCP ได้เขียนไว้ใน GitHub issue นี้แล้ว: https://github.com/BrowserMCP/mcp/issues/1#issuecomment-2784...
      สรุปคือเราใช้ monorepo ที่มีโค้ดซึ่งส่วนขยายทั้งหมดใช้ร่วมกันอยู่ การแยกเฉพาะส่วนขยายนี้ออกมา แล้วคอยซิงก์และดูแลหลาย monorepo ต้องใช้แรงงานค่อนข้างมาก คุณอาจไม่พอใจกับวิธีจัดโครงสร้างโปรเจกต์ก็ได้ แต่ไม่มีเรื่องร้ายๆ แอบแฝง
    • ถ้า “ละเอียด” ที่ว่าหมายถึง deviceId แบบไม่ระบุตัวตน กับตัวนับจำนวนครั้งที่เรียกใช้เครื่องมือ ก็เท่ากับกำลังมองว่าการที่แอปพยายามได้ insight พื้นฐานเกี่ยวกับการใช้งานก็เป็นปัญหาแล้ว
    • ส่วนขยาย Chrome ที่ควรติดตั้งได้ มีเพียงแบบที่ สามารถ build จากซอร์สได้เอง เท่านั้น

  • เว็บไซต์อ้างว่า “ใช้ browser fingerprint จริงเพื่อหลีกเลี่ยงการตรวจจับบอตและ CAPTCHA” แต่ในความเป็นจริงไม่เป็นอย่างนั้น
    เมื่อไม่กี่สัปดาห์ก่อน ผมทำระบบคล้ายๆ กันเองให้ AI ควบคุมเบราว์เซอร์ในเซสชันที่ล็อกอินอยู่ ปรากฏว่าแม้แต่เซสชันที่มนุษย์ใช้งานเองก็เริ่มเจอ CAPTCHA และสุดท้ายถูกหลายเว็บไซต์บล็อก พอหยุดใช้เซสชันเบราว์เซอร์แบบนั้น การบล็อกก็ค่อยๆ หายไปตามเวลา แต่วิธีนี้ไม่ใช่ทางแก้สารพัด และอาจทำให้คุณเสียสิทธิ์เข้าถึงของตัวเองได้

    • เงื่อนไขตั้งต้นของอะไรแบบนี้มักจะเป็น “เมื่อใช้ พร็อกซีคุณภาพสูง”
      อีกอย่าง ส่วนขยายนี้ดูค่อนข้างสะดุดตา จึงคิดว่า Cloudflare bot detection คงใช้เวลาไม่นานในการตรวจจับแบบเดียวกับที่จับ Playwright ได้
    • ส่วนขยายนี้ เปิดใช้งาน debugging ในเบราว์เซอร์ และมีแบนเนอร์แสดงว่ากำลังถูกอัตโนมัติควบคุมอยู่ JavaScript สามารถตรวจจับสิ่งนี้ได้
      จึงมีโปรเจกต์แบบนี้อยู่: https://github.com/Kaliiiiiiiiii-Vinyzu/patchright ซึ่งช่วยซ่อนส่วน debugging จาก JavaScript
    • อาจขึ้นอยู่กับ ความเร็ว ในการคลิกองค์ประกอบของเว็บไซต์ด้วย
    • อยากรู้ว่าต้องดูอะไรถึงจะตรวจจับได้เร็ว เช่น อาจติดตาม การเคลื่อนไหวของเมาส์ แล้วคำนวณว่ามันเคลื่อนที่เรียบร้อยเกินไปไหม และถ้าใส่ noise ที่เหมือนมนุษย์มากขึ้นในการขยับเมาส์ ก็อาจหลบเลี่ยงได้ดีขึ้น
      การทำงานมากเกินไปเร็วเกินไปก็เป็นปัญหา แต่จังหวะเวลาระหว่างการกระทำก็เป็นไปได้เช่นกัน แม้แต่ละคลิกจะไม่ได้เร็ว แต่ถ้าค่าหน่วงเวลาสม่ำเสมอเกินไป ก็เป็นสัญญาณอีกอย่างที่ไม่เหมือนมนุษย์
    • เหตุผลที่มี CAPTCHA อยู่ ก็เพราะเราไว้ใจไม่ได้ว่าผู้คนจะใช้ เครื่องมืออัตโนมัติ อย่างเหมาะสม
      การบอกว่า “หลีกเลี่ยงการตรวจจับบอตและ CAPTCHA” ก็แปลว่าอุปกรณ์พวกนั้นมีอยู่เพราะคนแบบคุณนั่นแหละ ถ้าต้องการเข้าถึงจริงๆ ก็ควรขอ API ซึ่งอาจต้องจ่ายเงินหรือไม่ก็ได้ อาจได้รับอนุญาต หรือเจ้าของไซต์อาจปฏิเสธก็ได้ และถ้าเป็นกรณีหลัง คุณควรยอมรับว่าพฤติกรรมหรือ use case ของคุณเป็นสิ่งที่เขาไม่ต้องการ

  • เหมือนผมหลับไปวันเดียว ตอนนี้เห็น MCP โผล่ไปทั่ว ไม่รู้ว่า MCP คืออะไร และถึงจุดนี้ก็กลัวที่จะถามแล้ว

    • MCP คือวิธีให้ ไลบรารีของเมธอด/API ที่โมเดล LLM สามารถ “เรียกใช้” ได้
      เมื่อบอกชื่อเมธอด พารามิเตอร์ ประเภทผลลัพธ์ และวัตถุประสงค์ให้โมเดลรู้ LLM ก็จะขอให้เซิร์ฟเวอร์ MCP เรียกฟังก์ชัน ตรวจดูผลลัพธ์ แล้วถ้าจำเป็นก็เรียกฟังก์ชันถัดไป ตอนนี้คงยากที่จะบอก ChatGPT ว่า “เปิด Google Maps ด้วยบัญชีของฉัน ค้นหาร้านจักรยานใกล้นิวยอร์ก แล้วเอาเบอร์โทรมาให้” แต่ถ้ามี Browser MCP, ChatGPT ก็สามารถส่งคำสั่งให้เบราว์เซอร์อย่าง “เปิด Google Maps”, “แสดงสกรีนช็อต”, “คลิกตำแหน่งนั้น” ได้
    • จุดแย่ที่สุดคือมันเปิด กล่องแพนโดรา ของช่องโหว่ที่อาจเกิดขึ้น: https://elenacross7.medium.com/%EF%B8%8F-the-s-in-mcp-stands...
    • MCP เป็น มาตรฐาน สำหรับเสียบเครื่องมือที่มีประโยชน์ให้โมเดล AI ใช้งานได้
      สำหรับคนทั่วไป แนวคิดนี้กลับด้านแปลกๆ และไม่ค่อยเป็นธรรมชาติ แต่สำหรับนักพัฒนามันดูเหมือนเครื่องมือที่พวกเขาใช้อยู่ จึงไม่ค่อยรู้สึกสับสน
    • แม้ MCP กำลังถูกนำไปใช้แพร่หลาย แต่ไม่ใช่กระแสจากรากหญ้า ดูเหมือนเป็นการที่บริษัท AI เดิมๆ รีบเข้ามาเพื่อยึด การรับรู้และส่วนแบ่งตลาด ของนักพัฒนา ก่อนที่จะเกิดฉันทามติขึ้นมากกว่า
    • มันคือ remote procedure call (RPC) สำหรับ LLM โดยเฉพาะ และยังเป็นแฟชั่นใหม่ประจำวันนี้ที่กำลังกวาดไปทั่วโลกด้วย

  • คงจะดีถ้าสามารถบอกเบราว์เซอร์บนเว็บช็อปปิงว่า “ช่วยไล่ดูไซด์บอร์ดทั้งหมดในรายการนี้ แล้วกรองเอาเฉพาะตัวที่สูงกว่า 155 ซม. และต่ำกว่า 100 ซม. ให้หน่อย ให้ความสำคัญกับไม้สีเข้มและมีพื้นที่ใส่แผ่นเสียงไวนิลสูง 31.43 ซม.”
    ถ้าดึงรายละเอียดจากหน้าเว็บได้ก็น่าจะมีประโยชน์มาก เลยสงสัยว่ามีเบราว์เซอร์ที่ทำแบบนี้ได้อยู่แล้วหรือยัง

    • กำลังทำของที่คล้ายกันชื่อ MatterRank อยู่ ตอนนี้ทำงานกับ การค้นหาเว็บ
      เช่น สั่งได้ประมาณว่า “ให้จัดอันดับผลลัพธ์ที่เกี่ยวกับ X และมีแนวโน้มแบบ Y สูงขึ้น และลดอันดับผลลัพธ์ที่พยายามขายอะไรบางอย่าง” ลองใช้ได้ที่ https://matterrank.ai
      อยากฟังกรณีใช้งานที่คิดไว้เพิ่มเติมด้วย สงสัยว่าเป็นส่วนขยายเบราว์เซอร์ที่ทำงานบนไซต์ที่กำลังดูอยู่แล้ว, เป็นบริการรวมข้อมูลช็อปปิงที่มีฟีเจอร์นี้, หรือเป็นรูปแบบอื่นไปเลย
    • ทำได้ด้วย browser-use: https://browser-use.com/
    • เวลาตกแต่งภายใน ผมสนใจจริง ๆ กับการหาสินค้าที่ตรงกับพรอมป์ต์ที่เฉพาะเจาะจงมาก ๆ

  • ทำได้ดีมาก ลองทดสอบใน Claude Desktop แล้วทำงานได้ลื่นไหล และรุงรังน้อยกว่า Playwright มาก กำลังไปในทิศทางที่ถูกต้อง
    ไม่แน่ใจว่าทำไปแล้วหรือยัง แต่ถ้าตรวจพบ CAPTCHA บนหน้าเว็บได้ ก็น่าจะให้หยุดการทำงานอัตโนมัติชั่วคราวและแจ้งผู้ใช้ว่าต้องเข้ามาช่วย Playwright มักจะพยายามฝืนเดินหน้าต่อแม้เจอ CAPTCHA

  • งานค้นหาข้อมูลบนเว็บแล้วใส่ผลลัพธ์ลงในสเปรดชีต Google Sheets ตอนแรกทำได้เกือบสมบูรณ์แบบ แต่ในการลองอีก 8–10 ครั้งหลังจากนั้นล้มเหลวโดยสิ้นเชิง
    สงสัยว่ามีปัญหาเรื่องดีเลย์ระหว่างสิ่งที่เกิดขึ้นในเบราว์เซอร์กับแอป MCP ซึ่งในที่นี้คือ Claude Desktop หรือเปล่า ครั้งแรกผมกดสิทธิ์ “Allow for this chat” ได้เร็วพอ และครั้งต่อ ๆ มารู้สึกว่ากว่าเราจะกดอนุญาต LLM ก็รายงานว่า “ดูเหมือนจะมีปัญหาในการคลิก ผมจะลองใหม่ด้วย reference อื่น” ไปแล้ว
    การคลิกชื่อ Google สเปรดชีตแล้วพิมพ์ชื่อ ซึ่งครั้งแรกทำได้สมบูรณ์แบบ กลับล้มเหลว 100% ในความพยายามหลัง ๆ การระบุเซลล์อย่าง A1, B1 และการป้อนข้อมูลลงแถวก็เช่นกัน ประสบการณ์โดยรวมนั้นลื่นไหลมาก การตั้งค่าและการทำงานยอดเยี่ยม แต่เพราะดีเลย์และความเร็วในการกดปุ่มอนุญาต ดูเหมือนว่าใน Claude Desktop จะใช้งานจริงได้ยาก

    • UI ที่ซับซ้อนอย่าง Google Sheets ดูเป็นกรณีใช้งานที่ไม่ดีสำหรับ เซิร์ฟเวอร์ MCP สำหรับการทำเบราว์เซอร์อัตโนมัติ แบบทั่วไป
      น่าจะดีถ้ามีเซิร์ฟเวอร์ MCP แบบนี้ แต่ให้เครื่องมือเฉพาะที่ LLM ใช้อ่านและเขียนเซลล์ Google Sheets ได้ แทนที่จะโต้ตอบกับเว็บเพจแบบทั่วไป ถ้าให้ abstraction ที่เฉพาะเจาะจงกว่านี้ งานแบบนี้น่าจะจัดการได้ดีกว่ามาก
    • เคยทำ Google Sheets MCP แล้ว และใช้ฟีเจอร์ค้นหาในตัวของ Claude สำหรับการ scrape ข้อมูล ซึ่งทำงานได้ค่อนข้างดี
      ตัวอย่าง: https://x.com/xing101/status/1903391600040083488
      การตั้งค่า: https://github.com/xing5/mcp-google-sheets
    • สิ่งที่เจอคือสิ่งที่มักเรียกกันว่า โชค
      เป็นเหตุผลเดียวกับที่ผู้คนคิดอย่างต่อเนื่องว่า ChatGPT เวอร์ชันใหม่ถูกเนิร์ฟ ทั้งที่จริง ๆ แล้วตอนแรกแค่โชคดี และจากผลลัพธ์แรกที่ดีนั้นก็เกิดความคาดหวังที่ไม่สมจริงขึ้นมา ไม่ใช่บั๊กหรือข้อบกพร่อง แต่ใกล้เคียงกับการทอยลูกเต๋าแล้วออกมาดีในเทิร์นแรก ทั้งที่ความเป็นไปได้เชิงสถิติที่จะทำพฤติกรรมที่ต้องการนั้นต่ำ
    • กรณีของผม Google Sheets คลิกตรงไหนก็ไม่ได้เลย ได้ข้อผิดพลาดนี้
      --Error: Cannot access a chrome-extension:// URL of different extension

  • ของแบบนี้น่าคาดหวังมากสำหรับงานทำมืออย่าง การเคลมค่าใช้จ่าย ทุกเดือนต้องเข้าเว็บผู้ให้บริการ ล็อกอิน หาใบแจ้งยอดแล้วดาวน์โหลด สร้างเอกสาร Google ที่กรอกรายละเอียด ดาวน์โหลด แล้วเขียนอีเมลใหม่เพื่ออัปโหลดไฟล์ทั้งหมด
    บางครั้งถ้าจะตรวจซ้ำว่าไฟล์แนบถูกต้อง ก็เปิดดูจากอีเมลโดยตรงไม่ได้ ต้องดาวน์โหลดอีกรอบ จริง ๆ แล้วการทำอัตโนมัติทำได้อยู่แล้ว และแอปติดตามค่าใช้จ่ายที่ดีควรลดงานนี้ได้ครึ่งหนึ่ง แต่เครื่องมือ AI มีศักยภาพที่จะลดภาระการเขียนรายละเอียดเล็ก ๆ น้อย ๆ ได้มาก เวิร์กโฟลว์แบบนี้สำคัญเป็นพิเศษเพราะมักมีการเปลี่ยนแปลงเล็ก ๆ เกิดขึ้นบ่อย

  • สำหรับคนส่วนใหญ่ในนี้อาจเป็นเรื่องชัดเจนอยู่แล้ว แต่ถ้าจะรันเซิร์ฟเวอร์ MCP ต้องติดตั้ง Node.js ก่อน รายละเอียดสำคัญข้อนี้ไม่มีอยู่ในคู่มือตั้งค่า

  • ผมทำของคล้าย ๆ กันไว้ โดยให้ควบคุมฮาร์ดแวร์ซินธิไซเซอร์ เพื่อทำ sound design ได้โดยไม่ต้องจับปุ่ม knob จริง: https://github.com/zerubeus/elektron-mcp

    • ไอเดียดี
      นึกภาพได้ว่าสามารถควบคุมปลั๊กอินจากระยะไกล และให้ LLM ทำ mastering และปรับโทนเสียง ด้วยเครื่องมือที่มีอยู่ แม้ UI ของ VST ที่ซับซ้อนและเน้นกราฟิกมากเกินไปอาจเป็นอุปสรรคด้านประสิทธิภาพ แต่สามารถเชื่อมกับอินเทอร์เฟซ MIDI mapping ที่มีป้ายกำกับเพื่อควบคุม knob และระดับเสียงได้

  • คงจะดีถ้าไม่ต้องพึ่งพาสกรีนช็อต แต่ให้สำรวจหน้าเว็บผ่าน accessibility tree ของ Chrome DevTools ได้: https://developer.chrome.com/blog/full-accessibility-tree

    • จริง ๆ เข้าใจกลับกัน ตอนนี้ไม่มีสกรีนช็อต มีแค่ accessibility tree เท่านั้น