יצירת תוספים באמצעות סוכני קידוד

סוכני AI לתכנות, כמו Antigravity, יכולים עכשיו ליצור קוד של תוספים ברמת דיוק מרשימה. אבל כדי לממש את הפוטנציאל שלהם ולקבל תוצאות איכותיות, צריך לספק להם את ההקשר והכלים המתאימים.

במדריך הזה מוסבר איך להגדיר את הכלים המתאימים בסוכני התכנות, ואיך הם יכולים לעזור לכם לפתח תוספים טובים יותר מהר יותר.

יצרנו מיומנות לסוכני תכנות שמיועדת במיוחד לפיתוח תוספים. המיומנות הזו היא חלק מיוזמה רחבה יותר שלנו, Modern Web Guidance, שמספקת לסוכני תכנות מבוססי-AI את המומחיות בפלטפורמת האינטרנט, את השיטות המומלצות ואת דפוסי ה-API המודרניים.

אבל פיתוח התוסף הוא רק השלב הראשון. כדי לעזור לכם לוודא שהקוד פועל כמו שצריך, כלי הפיתוח ל-Chrome לסוכני AI מאפשרים לעוזרי עזרה בתכנות לנפות באגים בתוספים ישירות ב-Chrome, וליהנות מיכולות ניפוי הבאגים ומהתובנות לגבי הביצועים של כלי הפיתוח.

הגדרה

Modern Web Guidance

כדי להשתמש בחבילת המיומנויות, מתקינים את Modern Web Guidance בסביבה המועדפת ומוסיפים לה את מיומנות התוספים. ריכזנו כאן הוראות לכמה מהכלים הפופולריים.

CLI

ההתקנה המומלצת לרוב סוכני התכנות (כולל Gemini CLI, ‏ Claude Code ו-Codex) היא באמצעות ה-CLI של modern-web-guidance שנוצר על ידי צוות Chrome. התקנת המיומנויות דרך ה-CLI של modern-web-guidance תעדכן אותן באופן אוטומטי.

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

הפקודה הזו מפעילה אשף אינטראקטיבי להתקנת המיומנויות לפי ההעדפות שלכם. כשמוצגות האפשרויות, בוחרים את סוכני התכנות ובוחרים גם את chrome-extensions וגם את modern-web-guidance.

Antigravity

כשמתקינים את Antigravity, אפשר לבחור את הפלאגין Modern Web Guidance שכולל את מיומנות התוספים, או להוסיף אותו דרך התאמות אישיות > פיתוח פתרונות עם פלאגינים של Google > Modern Web Guidance.

כלי פיתוח ל-Chrome לסוכני תכנות

אתם יכולים להוסיף את כלי הפיתוח ל-Chrome לסוכני AI לסוכן התכנות שבחרתם כפלאגין, כתוסף או כשרת MCP.

ריכזנו כאן הוראות לכמה מהסוכנים הפופולריים ביותר.

Antigravity

1. מורידים את Antigravity IDE (לא מומלץ להשתמש ב-Antigravity כי הוא לא מאפשר לערוך ידנית את הגדרות שרת ה-MCP).

2. בהפעלה, או בהגדרות > התאמות אישיות, בקטע פיתוח פתרונות עם Google, מפעילים את כלי הפיתוח ל-Chrome. הפעולה הזו תתקין רק את המיומנות של כלי הפיתוח ל-Chrome, ולא את שרת ה-MCP.

   

3. כדי להוסיף את שרת ה-MCP של כלי הפיתוח ל-Chrome, עוברים אל הגדרות > התאמה אישית, לוחצים על הכפתור הוספת שרת MCP ומחפשים את כלי הפיתוח ל-Chrome.

   

   

   

4. לוחצים על פתיחת הגדרות ה-MCP כדי לפתוח את הגדרות שרת ה-MCP. שימו לב שצריך לסגור את ההגדרות כדי לראות את קובץ התצורה ב-IDE.

   

5. מוסיפים את שני הפרמטרים הבאים להגדרה: --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. יוצרים סביבת עבודה חדשה ויוצרים הנחיה לבדיקה: "Create a hello world תוסף ל-Chrome. בודקים באמצעות כלי הפיתוח ל-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

סוכנים אחרים

הוראות להגדרת סוכנים אחרים זמינות במסמכים של Chrome DevTools MCP GitHub.

הוראות לסוכן CHROMEWEBSTORE.md

חלק חשוב בתהליך הפרסום של תוסף הוא מילוי הפרטים במרכז השליטה למפתחים. כדי לפתור את הבעיה הזו, סוכן התכנות יוצר ומתחזק קובץ CHROMEWEBSTORE.md שעוקב אחרי המידע הנדרש, כולל הצדקות לכל בקשת הרשאה בקוד.

היכולת תופעל כשתשתמשו בביטויים כמו "Let's publish this" או "Prepare this extension for the store". כדי לייעל את Agentic Workflows, הוסיפו את הטקסט הבא להוראות המערכת של הסוכן (לדוגמה, ~/.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.

פיתוח ובדיקה של התוסף באמצעות סוכני תכנות

התוסף Modern Web Guidance עוזר לסוכנים בשלוש דרכים עיקריות:

• ידע עדכני על ממשקי API: הסוכנים לומדים על ממשקי ה-API העדכניים ביותר, שיכול להיות שפורסמו אחרי שהמודל שבו אתם משתמשים אומן.
• שיטות מומלצות: הסוכנים יכולים לגשת לכל השיטות המומלצות שהצוות שלנו למד במהלך השנים שבהן פיתחנו תוספים ל-Chrome.
• מוכנות לשליחה: הוא עוקב אחרי המידע שאתם צריכים כדי לשלוח את התוסף לחנות האינטרנט של Chrome, וכך מקל על ההפצה.

Modern Web Guidance כוללת גם מיומנויות שקשורות לכל מה שצריך כדי לספק חוויית שימוש מצוינת, כמו ביצועים, נגישות וממשקי API מודרניים. לדוגמה, מיומנויות מובנות של ממשקי API של AI מבטיחות שסוכני תכנות מבוססי-AI תמיד ישתמשו בגרסה העדכנית של ה-API, יחד עם מידע נוסף על כללים ארכיטקטוניים מפורשים ומגבלות חומרה לשימוש בממשקי ה-API האלה. כך אפשר לנהל ביעילות את הורדות המודלים, להתמקד באבטחה ולהשתמש באסטרטגיות חלופיות בצורה חלקה.

היכולת הזו גם עוזרת לסוכן לעקוב אחרי המידע שנדרש לפרסום, כולל הצדקות לכל בקשת הרשאה בקוד. לדוגמה, אם תבקשו מסוכן התכנות ליצור תוסף באמצעות Side Panel API ולפרסם אותו בחנות האינטרנט של Chrome, הסוכן יזהה שהוא צריך את ההרשאה sidePanel. לאחר מכן, המערכת תיצור קובץ CHROMEWEBSTORE.md עם הצדקה. כשתהיו מוכנים לשלוח את הבקשה, תוכלו לבדוק את ההצדקה, לבצע שינויים לפי הצורך ולהעתיק אותה ישירות למרכז השליטה למפתחים.

כלי הפיתוח ל-Chrome לסוכני AI מאפשרים לעוזרי 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 כי הוא יודע שהוא צריך לשמור נתונים. הסוכן יכול עכשיו ליצור תוסף, להתקין אותו, לצפות בו פועל ולאמת את היציבות שלו בלי שתצטרכו לצאת מממשק הצ'אט.

זו דוגמה להנחיה פשוטה. כדי לקבל מידע נוסף על טכניקות שונות של הנדסת פרומפטים ולמצוא את מה שהכי מתאים לתרחיש השימוש שלכם, כדאי לעיין במדריך שלנו בנושא הנדסת פרומפטים.

דוגמאות להנחיות לייעול ההפצה באמצעות CHROMEWEBSTORE.md

התקנת המיומנות של התוסף והוספת הוראות לסוכן יעשו את רוב העבודה, אבל אם תהיו ספציפיים בהנחיות, תוכלו לקבל תוצאות טובות יותר בשלב הפיתוח שבו אתם נמצאים. הנה מדריך קצר שמסביר איך להנחות את הסוכן ליצור, לעדכן ולתחזק את קובץ 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.

סיכום

שילוב של מיומנויות Modern Web Guidance עם כלי פיתוח ל-Chrome לסוכני AI עוזר לכם לפתח תכונות באיכות גבוהה מהר יותר, וגם מבטיח שהתוסף שלכם יציב ומוכן לשליחה לחנות האינטרנט של Chrome.

כדאי להתחיל להתנסות בכלים האלה בפרויקט הבא שלכם כדי לראות איך הם יכולים לייעל את פיתוח התוספים, מאב הטיפוס הראשוני ועד לפרסום.