Your first extension

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

קוד המקור לדוגמא זו נמצא ב- GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

תחילה, יש צורך בפיירפוקס מגירסה 45 ומעלה.

כתיבת ההרחבה

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

mkdir borderify
cd borderify

manifest.json

כעת, יש ליצור קובץ בשם  "manifest.json" ישירות תחת התיקייה  "borderify" . שימו בו את התוכן הבא:

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}
  • שלושת המפתחות הראשונים: manifest_version, name, ו- version, הם חובה ומכילים מטאדאטה בסיסית עבור ההרחבה
  • description הוא אופציונאלי, אך מומלץ: הוא מוצג בבמנהל התוספים
  • icons הוא אופציונאלי, אך מומלץ : הוא מאפשר לך לציין צלמית עבור ההרחבה, שתוצג במנהל התוספים.

המפתח המעניין ביותר כאן הוא  content_scripts, המגדיר לפיירפוקס איך לטעון תסריט לתוך דפי רשת שכתובת ה-  URL שלהם תואמת תבנית מסויימת. במקרה זה, מבקשים מפיירפוקס לטעון תסריט ששמו  "borderify.js" אל תוך כל דפי ה-HTTP או HTTPS המוגשים על ידי  "mozilla.org" או כל תתי המתחמים שלו.

בכמה מצבים ייתכן ותצטרכו לציין ID עבור ההרחבה. אם יש צורך לציין מזהה תוסף, כללו את המפתח  applications ב-manifest.json והגדירו את התכונה gecko.id שלו:

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

icons/border-48.png

ההרחבה צריכה לכלול צלמית. היא תוצג על יד רישום ההרחבה במנהל ההרחבות. הקובץ manifest.json הבטיח שתהיה לנו צלמית ב-"icons/border-48.png".

צרו את התיקייה "icons" ישירות תחת התיקייה  "borderify" . שמרו שם צלמית בשם "border-48.png".  תוכלו להשתמש  בזאת מתוך הדוגמא שלנו, הלקוחה מתוך  the Google Material Design iconset, ובשימוש תחת תנאי רשיון ה-Creative Commons Attribution-ShareAlike .

אם תבחרו לספק צלמית משלכם, היא צריכה להיות בגודל  48x48 פיקסלים. תוכלו לספק גם צלמית בגודל 96x96 פיקסלים, לצורך תצוגות ברזולוציה יותר גבוהה,  ואם תעשו זאת היא תצויין כתכונת ה-96 באובייקט icons אשר ב-manifest.json:

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

לחלופין, תוכלו לספק כאן קובץ  SVG , ומימדיו ישונו בהתאם. (למרות ב: אם תשתמשו ב- SVG והצלמית תכלול טקסט, ייתכן שתרצו להשתמש בכלי   "convert to path"  של עורך ה-SVG כדי לשטח את הטקס , כך שהמידות יותאמו עם size/position עקביים.)

borderify.js

לסיום, צרו קובץ בשם  "borderify.js" ישירות תחת התיקייה "borderify" . שימו בו את התוכן הזה:

document.body.style.border = "5px solid red";

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

לבדוק שזה עובד

תחילה, בדקו היטב שכל הקבצים נמצאים במקומות הנכונים:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

התקנה

פתחו את  "about:debugging" בפיירפוקס, , הקליקו  "טעינת תוספות זמניות..." and ובחרו כל קובץ שהוא  בתיקיית ההרחבה:

כעת ההרחבה תותקן, ותישאר עד שתתחילו מחדש את פיירפוקס.

לחלופין, תועלו להריץ את ההרחבה משורת הפקודה באמצעות הכלי web-ext.

בדיקה

כעת נסו לבקר בעמוד תחת  "mozilla.org", ותראו רקע אדום מסביב לדף :

אך אל תנסו זאת ב- addons.mozilla.org! תסריטי תוכן בשלב זה חסומים באותו מתחם.

ערכו ניסוי קטן. ערכו את תסריט התוכן לשנות את צבע הרקע, או עשו משהו אחר לתוכן הדף. שמרו את תוכן התסריט , ואז טענו את קבצי ההרחבה בהקלקה על קישור  ה "טעינה מחדש" ב- about:debugging. תוכלו לראות את השינויים מיד:

אריזה ופרסום

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

מה הלאה?