เบาสร้าง Skill ที่ทำให้ Claude Code ใช้งาน browser ได้ดีกว่าเจ้าของทำเอง
Table of Contents
ไม่กี่วันก่อนผมเพิ่งเห็น update ใหม่ของ Claude Code ที่เพิ่ม feature ใหม่คือ --chrome ที่ทำให้ cc สามารถสั่งและควบคุม Chrome browser ของเราได้เอง แล้วก็มองเห็นภาพบน browser ได้ด้วย ไม่ได้อ่านผ่าน text อย่างเดียว ซึ่งก็ฮือฮาพอสมควรเพราะในมุมของ web dev หลายคนก็มองนอกจากสั่งให้มันสร้างหน้า web ได้แล้ว ตอนนี้มันยังเข้าไปตรวจงานได้เองแล้ว (ก่อนหน้ามันก็มี playwright mcp อยู่แล้วแหละ แต่นี่ Claude Code ทำเองเลยนะ) ซึ่งแปลว่าตอนนี้ Claude Code ก็ไม่น้อยหน้า Antigravity จากฝั่ง Google ที่ปูทางทำไปก่อนโดยการใช้ Chrome Extension เหมือนกัน
แต่แล้วผมก็ไถ feed ไปเจอโพสต์นึงบน X ของคุณ Sawyer Hood บอกว่า agent skill ที่เขาเขียนเองเนี่ย มันเร็วกว่า Chrome integration ตัวใหม่ถึง 2 เท่า เมื่อให้ทำ task เดียวกันบน Claude Code เลยเด้อ แถมแปะ video ให้ดูเป็นตัวอย่าง พร้อมแนบ benchmark (ที่แกทำเอง!!) มาด้วยว่าเร็วจริงๆ
Skill ที่ว่ามันชื่อว่า dev-browser ที่สามารถติดตั้งได้ผ่าน /plugin ของ Claude Code ได้เลยง่ายๆ จากคู่มือบน Github repo
🔧 อย่าเพิ่งเชื่อ ลองก่อน #
หลังจากนั้นก็ลองเลยสิครับ ติดตั้งตาม README กันไปแบบง่ายๆ แล้วลองให้ ดึงข้อมูลข่าวจาก Hacker News เหมือนในตัวอย่างนั่นแหละ
ก็พบว่ามันทำได้จริง(ต้องได้ดิ) แล้วก็ชัดว่าไอ้การทำงานของ dev-browser เนี่ย มันมีจังหวะ ping pong ไปๆมาๆ ระหว่าง browser กับ agent น้อยกว่า ถ้าทำผ่าน browser นี่แทบจะทุก action มันจะค่อยๆทำอย่างใจเย็น step by step
อ้อ บอกความแตกต่างกันก่อนอีกนิด!!
- Chrome Integration ที่ Claude ทำขึ้นมาให้เนี่ยมันเป็น MCP tool ที่จะคุยกับ Chrome Extension ที่เราต้องลงไว้บน Google Chrome ของเรา
dev-browserมันเป็นแค่ skill มี markdown กับ script ไม่กี่ไฟล์ที่ติดลงไปด้วยเอาไว้ run กับสั่งงาน playwright อีกที
โอเค.. มันทำงานได้ดีจริง แล้วก็ดูจะจริงตามที่เคลมไว้ด้วยแฮะ!! ซึ่งใครสนใจแค่การใช้งาน จริงๆ ตรงนี้ไปลองเอง กับ project ตัวเองได้เลยละเนี่ย
ต่อไปนี้จะเป็นส่วนที่อยากรู้เพิ่มเติมส่วนตัวแล้วว่าทำไม dev-browser มันดูจะทำงานได้ไวกว่า
🔍 opensource อยู่แล้ว เข้าไปดูหน่อยละกัน #
ผมไม่รอช้า clone GitHub repo SawyerHood/dev-browser มาดูเลยว่าเป็นยังไง เดี๋ยวจะอธิบายกันสั้นๆ เผื่อเป็นแนวทางให้คนที่อยากหัดทำ Agent Skill ได้ไปไล่กันเองสะดวกขึ้น
แล้วก็จะพยายามถอด Secret Sauce ของ Key Feature ที่เขาบอกว่า
“LLM-friendly DOM snapshots”
มันคืออิหยัง เพราะทางนี้ก็ไม่ได้เป็น web developer ขนาดนั้นเลยอยากเข้าใจด้วย มาเริ่มจากโครงสร้างหลักๆ ของ skill นี้ดีกว่า เมื่อเราเปิดโฟลเดอร์ dev-browser/skill มันจะประกอบด้วย 2 อย่างหลักๆ คือ
[ 1 ] Tool: คือ script ต่างๆ ที่เขาเขียนเอาไว้เพื่อทำงานกับ browser ผ่าน playwright ทั้งที่เป็น Bash script หรือ Typescript (รายละเอียดให้ Claude Code ไปอ่านให้ได้อีกทีนะใครขี้เกียจ… ผมก็ขี้เกียจ)
[ 2 ] Prompt: ที่เก็บไว้ใน markdown ไฟล์ชื่อ SKILL ในนี้หลักๆ และในนี้ 90% พูดถึงการเรียกใช้ Tool ที่พกมาด้วยนั่นแหละ แล้วก็รวมถึงท่าตัวอย่างในการเขียน script (tsx) ที่เอาไว้ควบคุม browser ด้วย
พออ่าน prompt ก็จะเห็นว่าเขาเน้นหนักไปทางเครื่องไม้เครื่องมือซะเยอะ แล้วก็ไปเจอว่า มันมีกระบวนท่านึงที่เห็นแล้ว “อ๋อ” เลยว่าทำไม dev-browser ถึงบอกว่า “LLM-friendly” นั่นก็คือ
“ARIA Snapshot” #
เพราะแทนที่ browser จะโยน raw HTML ทั้งก้อนไปให้ agent ได้อ่าน มันจะเป็นการโยน YAML ที่อธิบายโครงสร้าง ของหน้า web ไปแทน เช่น
- banner:
- link "Hacker News" [ref=e1]
- navigation:
- link "new" [ref=e2]
- link "past" [ref=e3]
- link "comments" [ref=e4]
- link "ask" [ref=e5]
- link "submit" [ref=e6]
- link "login" [ref=e7]
- main:
- list:
- listitem:
- link "Article Title Here" [ref=e8]
- text: "528 points by username 3 hours ago"
- link "328 comments" [ref=e9]
มันช่วยให้ LLM agent สามารถมองเห็นโครงสร้างของหน้าเว็บได้ชัดเจน โดยที่ไม่ต้องเอาข้อมูลที่เป็น noise อย่างพวก CSS class หรือ script ต่างๆส่งไปด้วย very good!! 😎
“Ref system” #
นอกจากนั้นถ้าสังเกตจะเห็นว่าในแต่ละ element มันมี [ref=x] อยู่ ตรงนี้ก็ช่วยทำให้ agent ระบุตำแหน่งของข้อมูลหรือ element ได้ง่าย โดยไม่ต้องใช้รูปภาพ screenshot บน browser มาช่วย ลดอาการกดผิดปุ่ม ผิด link ไปได้อีก
“Script + Playwright” #
และสุดท้ายคือการทำ action กับ browser ตัว agent ของเรามันใช้การเขียน script เลย ทำให้สามารถบอก browser ทำงานหลายๆ step ได้ในการลั่นคำสั่งเดียว ไม่ต้องมารอ ping pong ทำทีละอย่างแบบ MCP tool ที่ Claude ทำมาให้ ซึ่งก็แปลว่ามันจะประหยัดเวลาไปได้แบบมากมายก่ายกอง และประหยัด turn ในการส่ง message ด้วย(= ประหยัด usage token)
🤔 สุดท้าย พรศ. ได้อะไรจากการแงะ #
จากที่ลองใช้และแกะการทำงานของ dev-browser มันทำให้ผมมองเห็นเรื่องสำคัญๆ คือ
- Agent Skill มาแน่ มันจะเป็นมาตรฐานใหม่ ที่น่าจะถูกใช้แทน MCP Server ในอนาคต กับงานที่ต้องการความ multi skill อย่างการเขียน code หรืองานเลขาที่ทำหลายอย่าง ต้องรู้เรื่องนู่นนี่นั่นเยอะไปหมด เพราะมันติดตั้งง่าย แค่ลงด้วย command หรือลากวางใส่โฟลเดอร์ ก็พร้อมใช้แล้ว (ง่ายกว่าลง MCP server)
- Prompt Engineer + Software Engineer ยังทำงานร่วมกันได้สนุกสนานเหมือนเดิมแหละ ไม่ได้ตายกันไปข้างนึงอยู่แล้ว เพราะ Sawyer เองเขาก็ไม่ได้ทิ้งน้ำหนักไปที่ฝั่งใด ฝั่งนึงอย่างเดียว แต่เอามาทำงานด้วยกันให้ได้ผลดีกว่าของเดิม
สุดท้ายผมไม่ได้ฟันธงหรอกว่า claude --chrome มันจะไร้ประโยชน์ เพราะกับคนทั่วไป Chrome Extension มันก็เหมาะกว่าอยู่แล้ว ซึ่งเป็นที่ของคนส่วนมากด้วยซ้ำ
ใครอยากลองใช้ ไปติดตั้งกันดูได้เพื่อพิสูจน์ความจริง