Skip to main content

ใช้ Claude Code กับ Chrome (beta)

เชื่อมต่อ Claude Code กับ Chrome browser เพื่อทดสอบ web apps, debug ด้วย console logs, อัตโนมัติการกรอกฟอร์ม และดึงข้อมูลจากหน้าเว็บ

Claude Code รวมเข้ากับ Claude in Chrome browser extension เพื่อให้ความสามารถ browser automation จาก CLI หรือ VS Code extension build code จากนั้นทดสอบและ debug ใน browser โดยไม่ต้องสลับ contexts

Claude เปิด tabs ใหม่สำหรับ browser tasks และแชร์สถานะ login ของ browser ดังนั้นสามารถเข้าถึงไซต์ที่คุณ signed in อยู่ได้ Browser actions รันใน Chrome window ที่มองเห็นได้แบบ real time เมื่อ Claude พบหน้า login หรือ CAPTCHA มันจะหยุดและขอให้คุณจัดการด้วยตนเอง

note

Chrome integration อยู่ใน beta และปัจจุบันรองรับ Google Chrome และ Microsoft Edge ยังไม่รองรับ Brave, Arc หรือ Chromium-based browsers อื่นๆ WSL (Windows Subsystem for Linux) ก็ยังไม่รองรับด้วย

ความสามารถ​

เมื่อเชื่อมต่อ Chrome คุณสามารถเชื่อม browser actions กับ coding tasks ใน workflow เดียวได้:

  • Live debugging: อ่าน console errors และ DOM state โดยตรง จากนั้นแก้ไข code ที่ทำให้เกิดปัญหา
  • Design verification: build UI จาก Figma mock จากนั้นเปิดใน browser เพื่อตรวจสอบว่าตรงกัน
  • Web app testing: ทดสอบ form validation ตรวจสอบ visual regressions หรือ verify user flows
  • Authenticated web apps: โต้ตอบกับ Google Docs, Gmail, Notion หรือแอปที่คุณ logged in โดยไม่ต้องใช้ API connectors
  • Data extraction: ดึงข้อมูลที่มีโครงสร้างจากหน้าเว็บและบันทึกไว้ในเครื่อง
  • Task automation: อัตโนมัติงานที่ทำซ้ำใน browser เช่น data entry, form filling หรือ multi-site workflows
  • Session recording: บันทึก browser interactions เป็น GIFs

ข้อกำหนดเบื้องต้น​

ก่อนใช้ Claude Code กับ Chrome คุณต้องการ:

note

Chrome integration ไม่รองรับผ่าน third-party providers เช่น Amazon Bedrock, Google Cloud Vertex AI หรือ Microsoft Foundry

เริ่มต้นใน CLI​

ขั้นตอนที่ 1: เปิด Claude Code พร้อม Chrome

claude --chrome

คุณยังสามารถเปิดใช้งาน Chrome จากภายใน session ที่มีอยู่โดยรัน /chrome

ขั้นตอนที่ 2: ขอให้ Claude ใช้ browser

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

รัน /chrome ได้ตลอดเวลาเพื่อตรวจสอบสถานะการเชื่อมต่อ จัดการ permissions หรือเลือก browser ที่จะใช้

เปิดใช้งาน Chrome ตามค่าเริ่มต้น​

หากต้องการหลีกเลี่ยงการส่ง --chrome ทุก session ให้รัน /chrome และเลือก "Enabled by default"

note

การเปิดใช้งาน Chrome ตามค่าเริ่มต้นเพิ่มการใช้ context เนื่องจาก browser tools จะโหลดเสมอ

ตัวอย่าง workflows​

ทดสอบ web application ในเครื่อง​

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

Debug ด้วย console logs​

Open the dashboard page and check the console for any errors when
the page loads.

อัตโนมัติการกรอกฟอร์ม​

I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.

Draft content ใน Google Docs​

Draft a project update based on the recent commits and add it to my
Google Doc at docs.google.com/document/d/abc123

ดึงข้อมูลจากหน้าเว็บ​

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

รัน multi-site workflows​

Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company website and add a note
about what they do.

บันทึก demo GIF​

Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.

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

Extension ไม่ถูกตรวจพบ​

  1. ตรวจสอบว่า Chrome extension ติดตั้งและเปิดใช้งานใน chrome://extensions
  2. ตรวจสอบว่า Claude Code เป็นเวอร์ชันล่าสุดด้วย claude --version
  3. ตรวจสอบว่า Chrome กำลังรัน
  4. รัน /chrome และเลือก "Reconnect extension"
  5. หากปัญหายังคงอยู่ ให้รีสตาร์ททั้ง Claude Code และ Chrome

Browser ไม่ตอบสนอง​

  1. ตรวจสอบว่า modal dialog (alert, confirm, prompt) บล็อกหน้าเว็บหรือไม่
  2. ขอให้ Claude สร้าง tab ใหม่และลองอีกครั้ง
  3. รีสตาร์ท Chrome extension โดยปิดและเปิดใช้งานใหม่ใน chrome://extensions

การเชื่อมต่อขาดหายระหว่าง sessions ยาว​

Service worker ของ Chrome extension สามารถ idle ระหว่าง extended sessions ซึ่งขัดการเชื่อมต่อ รัน /chrome และเลือก "Reconnect extension"

ข้อความแจ้งข้อผิดพลาดทั่วไป​

Errorสาเหตุวิธีแก้
"Browser extension is not connected"Native messaging host ไม่สามารถเชื่อมต่อ extension ได้รีสตาร์ท Chrome และ Claude Code จากนั้นรัน /chrome เพื่อเชื่อมต่อใหม่
"Extension not detected"Chrome extension ไม่ได้ติดตั้งหรือปิดใช้งานติดตั้งหรือเปิดใช้งาน extension ใน chrome://extensions
"No tab available"Claude ลองดำเนินการก่อน tab พร้อมขอให้ Claude สร้าง tab ใหม่และลองใหม่
"Receiving end does not exist"Extension service worker หยุดทำงานรัน /chrome และเลือก "Reconnect extension"

ดูเพิ่มเติม​