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

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

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

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

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

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

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

Antigravity

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

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

   

3. หากต้องการเพิ่มเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้ไปที่การตั้งค่า > การปรับแต่ง คลิกปุ่มเพิ่มเซิร์ฟเวอร์ 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" เมื่อ Agent เริ่มทดสอบส่วนขยายในเบราว์เซอร์ 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 อื่นๆ

ดูวิธีการตั้งค่า 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 ที่ทันสมัย ตัวอย่างเช่น สกิล API ของ AI ในตัวจะช่วยให้ Agent ที่เขียนโค้ดด้วยระบบ AI ใช้ API เวอร์ชันล่าสุดเสมอ พร้อมด้วยข้อมูลเพิ่มเติมเกี่ยวกับกฎสถาปัตยกรรมที่ชัดเจนและข้อจำกัดด้านฮาร์ดแวร์สำหรับการใช้ API เหล่านี้ เพื่อให้การจัดการการดาวน์โหลดโมเดลมีประสิทธิภาพ มุ่งเน้นที่ความปลอดภัย และมีกลยุทธ์การทำงานล้มเหลวอย่างเหมาะสม

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

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

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

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