מהם עיצובים?

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

בחנות האינטרנט של Chrome תוכלו למצוא כמה עיצובים ולנסות אותם.

עיצוב צמחים ירוקים

נושא של עשן אהבה

עיצוב Jus d'Orange

מניפסט

לפניכם דוגמה לקובץ manifest.json של עיצוב:

{
  "manifest_version": 2,
  "version": "2.6",
  "name": "camo theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame_camo.png",
      "theme_frame_overlay" : "images/theme_frame_stripe.png",
      "theme_toolbar" : "images/theme_toolbar_camo.png",
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
      "theme_ntp_attribution" : "images/attribution.png"
    },
    "colors" : {
      "frame" : [71, 105, 91],
      "toolbar" : [207, 221, 192],
      "ntp_text" : [20, 40, 0],
      "ntp_link" : [36, 70, 0],
      "ntp_section" : [207, 221, 192],
      "button_background" : [255, 255, 255]
    },
    "tints" : {
      "buttons" : [0.33, 0.5, 0.47]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}

צבעים

הצבעים הם בפורמט RGB. כדי למצוא את המחרוזות שאפשר להשתמש בהן בשדה colors (צבעים), אפשר לעיין במאמר kOverwritableColorTable.

תמונות, אימג'ים

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

נכסים

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

גוונים

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

הצבעים מופיעים בפורמט Hue-Saturation-Lightness (HSL), באמצעות מספרים של נקודות צפות בטווח של 0 עד 1.0:

  • Hue הוא ערך מוחלט, 0 ו-1 הם אדום.
  • הערך של רוויה הוא יחסי לתמונה הנוכחית המוצגת. 0.5 מציין ללא שינוי, 0 מציין חוסר רוויה לחלוטין ו-1 מציין רוויה מלאה.
  • גם בהירות היא ערך יחסי, כאשר 0.5 מציין ללא שינוי, 0 מציין כל הפיקסלים בשחור ו-1 מציין כל פיקסלים בלבן.

לחלופין, אפשר להשתמש בפונקציה -1.0 לכל אחד מערכי ה-HSL כדי לציין ללא שינוי.