สร้างส่วนขยายด้วยเอเจนต์การเขียนโค้ด

ตอนนี้ Agent การเขียนโค้ด AI เช่น Antigravity สามารถสร้างโค้ดส่วนขยายได้อย่างแม่นยำจนน่าประทับใจ อย่างไรก็ตาม หากต้องการปลดล็อกศักยภาพของโมเดลเหล่านี้อย่างแท้จริงและได้ผลลัพธ์ที่มีคุณภาพสูง คุณต้องให้บริบทและเครื่องมือที่เหมาะสมแก่โมเดล

คู่มือนี้จะอธิบายวิธีตั้งค่าเครื่องมือที่เหมาะสมในเอเจนต์การเขียนโค้ด และวิธีที่เครื่องมือเหล่านี้จะช่วยคุณสร้างส่วนขยายที่ดีขึ้นได้เร็วขึ้น

เราได้สร้างทักษะสำหรับ Agent การเขียนโค้ดที่ออกแบบมาเพื่อการพัฒนาส่วนขยายโดยเฉพาะ ทักษะนี้เป็นส่วนหนึ่งของโครงการริเริ่มที่กว้างขึ้นของเรา นั่นคือคำแนะนำในการพัฒนาเว็บที่ทันสมัย ซึ่งจะช่วยให้ Agent การเขียนโค้ด AI มีความเชี่ยวชาญด้านแพลตฟอร์มเว็บ แนวทางปฏิบัติแนะนำ และรูปแบบ API ที่ทันสมัย

แต่การสร้างส่วนขยายเป็นเพียงขั้นตอนแรกเท่านั้น เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ช่วยให้ผู้ช่วยความช่วยเหลือในการเขียนโค้ด AI สามารถแก้ไขข้อบกพร่องของส่วนขยายได้โดยตรงใน Chrome และใช้ประโยชน์จากความสามารถในการแก้ไขข้อบกพร่องและข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ เพื่อช่วยคุณยืนยันว่าโค้ดทำงานได้ตามที่คาดไว้

ตั้งค่า

คำแนะนำในการพัฒนาเว็บที่ทันสมัย

หากต้องการใช้แพ็กทักษะ ให้ติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยในสภาพแวดล้อมที่ต้องการ แล้วเพิ่มทักษะส่วนขยายลงในสภาพแวดล้อมนั้น ต่อไปนี้เป็นวิธีการสำหรับเครื่องมือยอดนิยมบางส่วน

CLI

การติดตั้งที่แนะนำสำหรับเอเจนต์การเขียนโค้ดส่วนใหญ่ (รวมถึง Gemini CLI, Claude Code และ Codex) คือการติดตั้งผ่าน modern-web-guidance CLI ที่สร้างโดยทีม Chrome การติดตั้งทักษะผ่าน modern-web-guidance CLI จะอัปเดตทักษะให้เป็นเวอร์ชันล่าสุดโดยอัตโนมัติ

  npx modern-web-guidance@latest install --choose

ซึ่งจะเรียกใช้วิซาร์ดแบบอินเทอร์แอกทีฟเพื่อติดตั้งทักษะตามค่ากำหนดของคุณ เมื่อเห็นตัวเลือก ให้เลือกตัวแทนการเขียนโค้ด แล้วเลือกทั้ง chrome-extensions และ modern-web-guidance

Antigravity

เมื่อติดตั้ง Antigravity คุณสามารถเลือกปลั๊กอินคำแนะนำในการพัฒนาเว็บที่ทันสมัยซึ่งรวมถึงทักษะส่วนขยาย หรือจะเพิ่มผ่านการปรับแต่ง > ปลั๊กอิน Build With Google > คำแนะนำในการพัฒนาเว็บที่ทันสมัยก็ได้

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent การเขียนโค้ด

คุณสามารถเพิ่มเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ลงใน Agent การเขียนโค้ดที่ต้องการได้ ไม่ว่าจะเป็นปลั๊กอิน ส่วนขยาย หรือเซิร์ฟเวอร์ MCP

ต่อไปนี้เป็นวิธีการสำหรับ User Agent ที่ได้รับความนิยมมากที่สุดบางส่วน

Antigravity

1. ดาวน์โหลด Antigravity IDE (ไม่แนะนำให้ใช้ Antigravity เนื่องจากไม่อนุญาตให้คุณแก้ไขการกำหนดค่าเซิร์ฟเวอร์ MCP ด้วยตนเอง)

2. เมื่อเริ่มต้นระบบ หรือในการตั้งค่า > การปรับแต่ง ให้เปิดใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในส่วนสร้างด้วย Google การดำเนินการนี้จะติดตั้งเฉพาะทักษะเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เท่านั้น แต่จะไม่ติดตั้งเซิร์ฟเวอร์ MCP

   

3. หากต้องการเพิ่มเซิร์ฟเวอร์ Chrome DevTools MCP ให้ไปที่การตั้งค่า > การปรับแต่ง คลิกปุ่มเพิ่มเซิร์ฟเวอร์ MCP แล้วค้นหาเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

   

   

   

4. คลิกเปิดการกำหนดค่า MCP เพื่อเปิดการกำหนดค่าเซิร์ฟเวอร์ MCP โปรดทราบว่าคุณต้องปิดการตั้งค่าเพื่อดูไฟล์การกำหนดค่าใน IDE

   

5. เพิ่มพารามิเตอร์การกำหนดค่า 2 รายการต่อไปนี้ --categoryExtensions (เพื่อเปิดใช้เครื่องมือส่วนขยาย) และ --autoConnect (เพื่อเปิดใช้การเชื่อมต่อกับโปรไฟล์ Chrome ที่มีอยู่ ซึ่งจำเป็นเมื่อใช้ API ของ AI ในตัวของ Chrome หรือต้องลงชื่อเข้าใช้)

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. หากต้องการเปิดใช้การแก้ไขข้อบกพร่องระยะไกล ให้เปิด Chrome ไปที่ chrome://inspect/#remote-debugging แล้วเลือกอนุญาตการแก้ไขข้อบกพร่องระยะไกลสำหรับอินสแตนซ์เบราว์เซอร์นี้

   

7. รีสตาร์ท Antigravity IDE

8. สร้างพื้นที่ทำงานใหม่และสร้างพรอมต์ทดสอบ: "สร้างส่วนขยาย Chrome Hello World ทดสอบโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome" เมื่อตัวแทนเริ่มทดสอบส่วนขยายในเบราว์เซอร์ Chrome จะแสดงกล่องโต้ตอบที่ขอสิทธิ์การแก้ไขข้อบกพร่องระยะไกล เลือกอนุญาต ขณะที่เปิดใช้เซสชันการแก้ไขข้อบกพร่องระยะไกล Chrome จะแสดงแบนเนอร์ "ซอฟต์แวร์ทดสอบอัตโนมัติกำลังควบคุม Chrome อยู่"

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

ตัวแทนอื่นๆ

ดูวิธีการตั้งค่า Agent อื่นๆ ได้ที่เอกสารใน GitHub ของ MCP สำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

คำสั่งสำหรับ Agent ของ CHROMEWEBSTORE.md

ส่วนสำคัญของการเผยแพร่ส่วนขยายคือการกรอกข้อมูลในแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์ ทักษะนี้จะช่วยแก้ปัญหานี้โดยให้ Agent การเขียนโค้ดสร้างและดูแลรักษาไฟล์ CHROMEWEBSTORE.md ซึ่งจะติดตามข้อมูลที่จำเป็น รวมถึงเหตุผลสำหรับคำขอสิทธิ์แต่ละรายการที่ขอในโค้ด

ทักษะจะทำงานเมื่อคุณใช้วลีอย่าง "มาเผยแพร่รายการนี้กัน" หรือ "เตรียมส่วนขยายนี้สำหรับ Store" แต่หากต้องการปรับปรุงเวิร์กโฟลว์แบบ Agentic ให้เพิ่มข้อความต่อไปนี้ลงในคำสั่งของระบบสำหรับ Agent (เช่น ~/.gemini/GEMINI.md สำหรับ Antigravity หรือ ~/.claude/CLAUDE.md สำหรับ Claude)

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

สร้างและทดสอบส่วนขยายด้วย Agent การเขียนโค้ด

ทักษะส่วนขยายที่รวมอยู่ในคำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วย Agent ได้ 3 วิธีหลักๆ ดังนี้

• ความรู้เกี่ยวกับ API ที่อัปเดต: เครื่องมือนี้จะสอน Agent เกี่ยวกับ API ล่าสุด ซึ่งอาจเผยแพร่หลังจากโมเดลที่คุณใช้ได้รับการฝึก
• แนวทางปฏิบัติแนะนำ: ช่วยให้ตัวแทนเข้าถึงแนวทางปฏิบัติแนะนำทั้งหมดที่ทีมของเราได้เรียนรู้ตลอดหลายปีที่ผ่านมาในการสร้างส่วนขยาย Chrome
• ความพร้อมในการส่ง: ติดตามข้อมูลที่คุณอาจต้องใช้ในการส่งส่วนขยายไปยัง Chrome เว็บสโตร์ ซึ่งจะช่วยให้เผยแพร่ได้ง่ายขึ้น

นอกจากนี้ คำแนะนำในการพัฒนาเว็บที่ทันสมัยยังมีทักษะที่ครอบคลุมทุกสิ่งที่คุณต้องการเพื่อมอบประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้ เช่น ประสิทธิภาพ, การช่วยเหลือพิเศษ และ API ที่ทันสมัย ตัวอย่างเช่น ทักษะ API ของ AI ในตัวช่วยให้มั่นใจว่าเอเจนต์การเขียนโค้ด AI จะใช้ API เวอร์ชันล่าสุดเสมอ พร้อมกับข้อมูลเพิ่มเติมเกี่ยวกับกฎสถาปัตยกรรมที่ชัดเจนและข้อจำกัดด้านฮาร์ดแวร์สำหรับการใช้ API เหล่านี้ เพื่อให้จัดการการดาวน์โหลดโมเดลได้อย่างมีประสิทธิภาพ มุ่งเน้นที่ความปลอดภัย และกลยุทธ์การสำรองข้อมูลที่ราบรื่น

นอกจากนี้ ทักษะนี้ยังช่วยให้ Agent ติดตามข้อมูลที่จำเป็นสำหรับการเผยแพร่ ซึ่งรวมถึงเหตุผลสำหรับคำขอสิทธิ์แต่ละรายการที่ขอในโค้ด เช่น หากคุณขอให้เอเจนต์การเขียนโค้ดสร้างส่วนขยายโดยใช้ Side Panel API และเผยแพร่ไปยัง Chrome เว็บสโตร์ เอเจนต์จะทราบว่าต้องใช้สิทธิ์ sidePanel จากนั้นระบบจะสร้างไฟล์ CHROMEWEBSTORE.md พร้อมเหตุผล เมื่อพร้อมส่ง คุณสามารถตรวจสอบเหตุผลนี้ ปรับเปลี่ยนหากจำเป็น และคัดลอกลงในแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์ได้โดยตรง

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ช่วยให้ผู้ช่วยความช่วยเหลือในการเขียนโค้ดด้วย AI สามารถติดตั้งและแก้ไขข้อบกพร่องของส่วนขยายในอินสแตนซ์ Chrome ที่ทำงานอยู่ได้ โดยเฉพาะอย่างยิ่ง

• ติดตั้งและถอนการติดตั้งส่วนขยาย
• แสดงรายการส่วนขยายที่ติดตั้งไว้ทั้งหมดและโหลดซ้ำ
• ทริกเกอร์การดำเนินการของส่วนขยาย
• ตรวจสอบทุกแพลตฟอร์มของส่วนขยาย (ป๊อปอัป, แผงด้านข้าง, Service Worker)

ต่อไปนี้เป็นพรอมต์และวิดีโอที่แสดงวิธีการทำงานในทางปฏิบัติ

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

ในกรณีนี้ Agent ควรสร้างไฟล์ Manifest V3 และขอสิทธิ์ storage เนื่องจากทราบว่าต้องเก็บรักษาข้อมูลไว้ ตอนนี้ Agent สามารถสร้างส่วนขยาย ติดตั้ง ดูการทำงาน และยืนยันความเสถียรได้โดยที่คุณไม่ต้องออกจากอินเทอร์เฟซแชทเลย

นี่คือตัวอย่างพรอมต์แบบง่าย ดูข้อมูลเพิ่มเติมเกี่ยวกับเทคนิคพรอมต์ต่างๆ และค้นหาเทคนิคที่เหมาะกับกรณีการใช้งานของคุณมากที่สุดได้ที่คู่มือวิศวกรรมพรอมต์ (Prompt Engineering)

ตัวอย่างพรอมต์เพื่อปรับปรุงการเผยแพร่ด้วย CHROMEWEBSTORE.md

แม้ว่าการติดตั้งทักษะส่วนขยายและการเพิ่มคำสั่งให้กับ Agent จะช่วยทำงานส่วนใหญ่ได้ แต่การระบุพรอมต์ที่เจาะจงจะช่วยให้ได้ผลลัพธ์ที่ดีขึ้นสำหรับขั้นตอนการพัฒนาที่คุณกำลังทำอยู่ ต่อไปนี้เป็นคำแนะนำโดยย่อเกี่ยวกับวิธีพรอมต์ Agent ให้สร้าง อัปเดต และดูแลรักษาไฟล์ CHROMEWEBSTORE.md

• การเผยแพร่ครั้งแรก: เมื่อส่วนขยายมีฟีเจอร์ครบถ้วนและคุณต้องการสร้างการแสดงข้อมูลผลิตภัณฑ์ใน Store ครั้งแรก

Prepare the extension for publication on the Chrome Web Store.

• การอัปเดตสิทธิ์และเหตุผล: Chrome เว็บสโตร์บังคับใช้นโยบายวัตถุประสงค์เดียวและกำหนดให้ต้องระบุเหตุผลแบบละเอียดสำหรับคำขอสิทธิ์แต่ละรายการใน manifest.json

We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.

• การจัดการกับการปฏิเสธจาก Store: หากส่วนขยายถูกปฏิเสธหรือมีการแจ้งว่าไม่เหมาะสมในระหว่างกระบวนการตรวจสอบ คุณสามารถระบุเหตุผลการปฏิเสธให้ตัวแทนทราบโดยตรงและขอให้อัปเดตข้อมูลเมตาการปฏิบัติตามข้อกำหนดได้

Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

บทสรุป

การรวมทักษะคำแนะนำในการพัฒนาเว็บที่ทันสมัยเข้ากับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent จะช่วยให้คุณสร้างฟีเจอร์คุณภาพสูงได้เร็วขึ้น และยังช่วยให้มั่นใจได้ว่าส่วนขยายของคุณมีความเสถียรและพร้อมสำหรับการส่งไปยัง Chrome เว็บสโตร์

เริ่มทดลองใช้เครื่องมือเหล่านี้ในโปรเจ็กต์ถัดไปเพื่อดูว่าเครื่องมือเหล่านี้จะช่วยปรับปรุงการพัฒนาส่วนขยายตั้งแต่ต้นแบบเริ่มต้นไปจนถึงการเผยแพร่ได้อย่างไร