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

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

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

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

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

ตั้งค่า

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

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

CLI

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

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

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

Antigravity

เมื่อติดตั้ง Antigravity คุณสามารถเลือกปลั๊กอินModern Web Guidance ซึ่งรวมถึงสกิลส่วนขยาย หรือจะเพิ่มผ่านการปรับแต่ง > สร้างด้วยปลั๊กอินของ Google > Modern Web Guidance ก็ได้

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

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

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

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

Agent อื่นๆ

ดูวิธีการตั้งค่า Agent อื่นๆ ได้ในเอกสารเกี่ยวกับ Chrome DevTools MCP GitHub

คำแนะนำสำหรับ Agent ใน CHROMEWEBSTORE.md

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

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

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

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

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

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.

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

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 เว็บสโตร์

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