קונספטי ערכות נושא

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

אפשרויות ערכת נושא אלה יכולות להיות מיושמות כערגות נושא סטטיות (למרות שתמונות ערכת הנושא עצמן יכולות להיות מונפשות) או כערכות נושא דינמיות המיוצרות בהרחבת הדפדפן.

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

ערכות נושא סטטיות

ערכות נושא סטטיות מצויינות על ידי שימוש במשאבים כגון הרחבות דפדפן: קובץ  manifest.json להגדיר רכיבי ערכת נושא עם רכיבים אלה מאוחסניחם באותה תיקייה כמו הקובץ   manifest.json רו בתת-תיקייה. משאבים אלה נארזים אחר-כך בקובץ דחוס לפרסום ב-  addons.mozilla.org (AMO) או בהפצה עצמית. למידע נוסף על הפצה עצמית, בקרו ב- חתימה והפצה של התוסף שלך.

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

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

הגדרץ ערכת נושא

ליצירת ערכת נושא (בדוגמא זו ערכת תמונה בודדת פשוטה):

  • צרו תיקייה במיקום מתאים על המחשב שלכם.
  • הוסיפו את קובץ תמונת ערכת הנושא בתיקייה:
    <mytheme>
     <your_header_image>.<type>
  • צרו קובץ בשם manifest.json בתיקייה וערכו את תוכנו כדלהלן :
    {
      "manifest_version": 2,
      "version": "1.0",
      "name": "<your_theme_name>",
      "theme": {
        "images": {
          "headerURL": "<your_header_image>.<type>"
        },
        "colors": {
          "accentcolor": "#FFFFFF",
          "textcolor": "#000"
        }
      }
    }
    
    כאשר:
    • "accentcolor": הוא בצבע הרקע של אזור הכותרות של ערכת הנושא שלכם.
    • "textcolor": צבע הטקסט באזור הכותרות.
  • ארזו את ערכת הנושא ושלחו ל- AMO, במילוי הוראות אלה. ערכות נושא יכוללות להישלח ל- AMO לצורך אירוח או הפצה עצמית.

גישות ערכת נושא סטטית

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

ערכות נושא של תמונה אחת

זו אפשרות ה"ציור" הבסיסית או המינימלית בה ניתן להגדיר:

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

על שטח תמונת הכותרת שלך למלא מקסימום גובה של 200 פיקסלים. מקסימום רוחב התמונה נקבע על ידי הרזולוציה של הצג עליו פיירפוקס מציג ובכמה מהצג פיירפוקס משתמש. בפועל, זאת אומרת שיהיה צורך להתיר קוחב של עד 5120 פיקסלים (לדור הבא של צגי 5K). אולם, על פני יצירת תמונה רחבה מאוד גישה עדיפה היא ליצור תמונה יותר צרה עם קצה שמאלי שקוף כך שהיא תדהה לצבע הרקע. לדוגמא, נוכל להשתמש בתמונה הבאה:

An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency.
בשילוב עם צבע רקע משלים לליצירת אפקט זה בכותרת
A single image theme using the weta.png image

ראו פרטים על ערכת נושא זו בדוגמת  ערכות הנושא weta_fade.

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

ערכות נושא של ריבוי תמונות

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

בתלות באפקט שברצונך ליצור ייתכן ויהיה צורך לדכא את התמונה המחוייבת "headerURL": בתמונה ריקה או שקופה. שימוש בתמונה ריקה או שקופה יעשה , לדוגמא , אם ברצונך להכניס תמונהמיושרת למרכז באריח כמו
An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency.
ליצירת האפקס הזה
A single image theme using the additional images option to align an image to the center of the heading and tile it.
כאן תוכלו לציין תמונת weta כך:

"images": {
  "headerURL": "empty.png",
  "additional_backgrounds": [ "weta_for_tiling.png"]
},

ואת הכנסת התמונות לאריחים כך:

"properties": {
  "additional_backgrounds_alignment": [ "top" ],
  "additional_backgrounds_tiling": [ "repeat"  ]
},

פרטים מלאים אודות איך לאתחל ערכת נושא זו ניתן למצוא בדוגמת  ערכות הנושא weta_tiled. פאטים מלאים אודות ישור ואפשרויות יצירת אריחים ניתן למצוא ב - "theme" key description.

לחלופין, ניתן להשתמש ביותר מתמונה אחת , למשל בשילוב תמונות ה weta המקוריות עם זאת המעוגנת לשמאל הכותרת
An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency.
ליצירת האפקט
A theme using the additional images option to place two mirrored image to the left and right of the browser header.

בו התמונה מצויינת על ידי:

"images": {
  "headerURL": "empty.png",
  "additional_backgrounds": [ "weta.png", "weta-left.png"]
},

והיישור  שלה על ידי:

"properties": {
  "additional_backgrounds_alignment": [ "right top" , "left top" ]
},

פרטים מלאים אודות איך לאתחל ערכת נושא זו ניתן למצוא בדוגמת   ערכות הנושא  weta_mirror. פרטים מלאים אודות אפשרויות היישור ניתן למצוא ב-  "theme" key description.

ערכות נושא סטטיות מונפשות

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

ניתן גם להנפיש ערכות נושא תכנותית, ובזה נדון בערכות נושא דינמיות.

עדכון ערכות נושא סטטיות

אם ערכת הנושא הסטטית שלך מאורחת ב- AMO, ניתן להעלות גרסה חדשה באמצעות Developer Hub על ידי הצעדים הבאים:

  1. ביקור בעמוד המוצר עבור ההרחבה שלך דרך  Developer Hub
  2. בחירת "Upload New Version" בצד שמאל
  3. העלאת הקובץ הארוז לוידוא או שינוי באמצעות מחולל ערכות הנושא

עבור ערכות נושא מאורחות עצמית, ניתן להעלות גרסה חדשה דרך AMO על ידי ביצוע הצעדים דלעיל או שיטופלו על ידך דרך כתובת URL מעודכנת  או עדכוני יישום חיצוני. גירסה חדשה תצטרך להיחתם דרך Developer Hub.

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

ערכות נושא דינמיות

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

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

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

השימוש בממשק ה- theme הוא ישיר. תחילה, יש לבקש  הרשאת  "theme" בקובץ manifest.json של ההרחבה. השלב הגא, בונים אובייקט JSON המכיל אותה אינפורמציה שתשתמשו בה בקובץ manifest.json של ערכת נושא סטטית, לבסוף, יש להעביר את אובייקט ה- JSON בקריאת  theme.update().

לדוגמא, הקוד הבא מתוך  dynamic theme example מגדיר את התוכן עבור אלמנטי היום והלילה של ערכת הנושא הדינמית

const themes = {
  'day': {
    images: {
     headerURL: 'sun.jpg',
    },
    colors: {
     accentcolor: '#CF723F',
     textcolor: '#111',
    }
  },
  'night': {
    images: {
     headerURL: 'moon.jpg',
    },
    colors: {
     accentcolor: '#000',
     textcolor: '#fff',
    }
  }
};

עכת הנושא.אובייקט ערכת הנושא מועבר אז ל- theme.update() לשינוי ערכת הנושא של הכותרת, כבקטע קוד זה מתוך אותה דוגמא

function setTheme(theme) {
  if (currentTheme === theme) {
    // No point in changing the theme if it has already been set.
    return;
  }
  currentTheme = theme;
  browser.theme.update(themes[theme]);
}

לימדו עוד אודות ערכות נושא דינמיות, וראו דוגמאות נוספות בסרטון הבא::

אם טרם יצרת הרחבת דפדפן, צפה/י ב- ההרחבה הראשונה שלך להדרכה צעד-צעד.

תאימות בין דפדפנים

קיימת תאימות מוגבלת בין ערכות נושא בדפדפנים המובילים. לדפדפן אופרה גישה שונה לחלוטין , וערכות הנושא של  Microsoft Edge אינן פתוחות עדיין למפחתים/ות.

יש איזו שהיא תאימות בין ערכות נושא של פיירפוקס  ועאכות נושא של כרום, בתנאי שהיכולת לנייד ערכת נושא של הרחבה בת תמונה יחידה מפיירפוקס לכרום.  זה נעשה על ידי תיקון המפתחות ב-manifest.json  כלהלן:

  • "headerURL": ישונה ל- "theme_frame":
  • "accentcolor": ישונה ל- "frame":
  • "textcolor": ישונה ל- "tab_background_text":

בשתומת לב לכך ש- "frame": ו- "tab_background_text": תומכים רק בהגדרות מערך צבעים  RGB בכרום.

אז, בדוגמת ערכת הנושא בת התמונה היחידה (weta_fade) יכולה להיתמך בכרום  באמצעות קובץ ה-manifest.json הבא:

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "<your_theme_name>",
  "theme": {
    "images": {
      "theme_frame": "weta.png"
    },
    "colors": {
      "frame": [ 173 , 176 , 159 ],
      "tab_background_text": [ 0 , 0 , 0 ]
    }
  }
}

אולם, יהיו מספר הבדלים

  • כרום מכניס תמונות לאריחי “theme_frame”: משמאל אזור הכותרת.

The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented.

לעוד מידע , ראו רשימות ב-Chrome compatibility.