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

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

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

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

แต่การสร้างส่วนขยายเป็นเพียงขั้นตอนแรกเท่านั้น เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์ช่วยให้ผู้ช่วยการเขียนโค้ด 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 คุณสามารถเลือกปลั๊กอิน Modern Web Guidance ซึ่งรวมถึงทักษะส่วนขยาย หรือจะเพิ่มผ่านการปรับแต่ง > สร้างด้วยปลั๊กอินของ Google > Modern Web Guidance ก็ได้

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

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

คำแนะนำสำหรับเอเจนต์ที่ได้รับความนิยมมากที่สุดบางรายมีดังนี้

Antigravity

หากต้องการใช้เซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้ทำตามวิธีการจากเอกสารของ Antigravity เพื่อติดตั้งเซิร์ฟเวอร์ MCP ที่กำหนดเอง เพิ่มข้อมูลต่อไปนี้ในการกำหนดค่าเซิร์ฟเวอร์ MCP

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

Claude Code

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

ตัวแทนอื่นๆ

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

คำสั่งสำหรับตัวแทน CHROMEWEBSTORE.md

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

ทักษะจะทำงานเมื่อคุณใช้วลี เช่น "มาเผยแพร่สิ่งนี้กัน" หรือ "เตรียมส่วนขยายนี้สำหรับร้านค้า" แต่เพื่อเพิ่มประสิทธิภาพเวิร์กโฟลว์ของเอเจนต์ ให้เพิ่มข้อความต่อไปนี้ลงในคำสั่งของระบบสำหรับเอเจนต์ (เช่น ~/.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.

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

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

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์ช่วยให้ผู้ช่วยการเขียนโค้ด 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.

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

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

ตัวอย่างพรอมต์เพื่อเพิ่มประสิทธิภาพการเผยแพร่ด้วย CHROMEWEBSTORE.md

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

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

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.

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

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 สำหรับเอเจนต์จะช่วยให้คุณสร้างฟีเจอร์คุณภาพสูงได้เร็วขึ้น แต่ก็ยังช่วยให้มั่นใจได้ว่าส่วนขยายของคุณจะเสถียรและพร้อมส่งไปยัง Chrome เว็บสโตร์

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