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

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

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

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

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

הגדרה

Modern Web Guidance

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

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 שכולל את היכולת ליצור תוספים, או להוסיף אותו דרך Customizations (התאמות אישיות) > Build With Google Plugins (פיתוח באמצעות פלאגינים של Google) > Modern Web Guidance (הנחיות ליצירת אתרים מודרניים).

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

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

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

Antigravity

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

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

   

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

   

   

   

4. לוחצים על Open MCP Config (פתיחת ההגדרות של שרת ה-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 ובוחרים באפשרות Allow remote debugging for this browser instance (התרת ניפוי באגים מרחוק עבור מופע הדפדפן הזה).

   

7. מפעילים מחדש את Antigravity IDE.

8. יוצרים סביבת עבודה חדשה וכותבים הנחיה לבדיקה: "צור תוסף ל-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 MCP GitHub.

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

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

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

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

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

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

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

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

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

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