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

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

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

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

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

הגדרה

הנחיות בנושא אינטרנט מודרני

כדי להשתמש בחבילת המיומנויות, צריך להתקין את 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

כדי להשתמש בשרת 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 DevTools 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, וכך מקל על ההפצה.

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

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

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

סיכום

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

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