כיצד ליצור ערכת נושא של Chrome מהטפט האהוב עליך

מאזגלריית הנושא של Chrome הושקה, ראינו זרימה מתמדת של נושאים מדהימים. הם נהדרים, אבל מה אם אתה רוצה ליצור משלך? זה הרבה יותר קל ממה שאתה חושב.

ערכת נושא של Chrome אינה אלא הרחבה שאינה מכילה שום קוד JavaScript או HTML. כל נושא נתון מורכב מ-2 אלמנטים:

1. כמה תמונות

2. קובץ מניפסט json.

רכיבים אלה נארזים לאחר מכן בפורמט .crx. (פורמט הקובץ .crx הוא רק וריאציה של ZIP המשמשת את Google Chrome.)

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

לִפנֵי:

לְאַחַר:

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

דברים שתצטרך כדי ליצור ערכת נושא של Chrome:

• הטפט שבו תרצה להשתמש כחלק מהנושא.

• עורך תמונות להוספת אפקטים, במידת הצורך. (אני מעדיףציוף פניקס, אבל יש לך שורה שלאפשרויות אחרות. MS Paint עובד טוב רוב הפעמים;Paint.netהוא מצוין וחינמי אם אתה צריך משהו קצת יותר חזק.)

• עורך טקסט בסיסי כמו Notepad (אני מעדיף Notepad או Notepad ++, אבל יש לךמספר אפשרויות.)

• כמה רעיונות יצירתיים לגבי איך הנושא שלך צריך להיראות.

ברגע שיש לך את הכלים הנדרשים, כך זה עובד:

שלב 1: צור תיקייה עם שם הנושא.

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

כאן, "הנושא שלי" מייצג את שם הנושא שלנו עם תיקיית התמונות שבתוכה.

שלב 2: צור את התמונות עבור הנושא שלך.

שים לב שכל התמונות המשמשות בערכת נושא של כרום צריכות להיות בתמונות PNG. אם יש לך תמונת JPG, תוכל להמיר אותה בקלות ל-PNG, באמצעות ממיר תמונה (כמוהכלי המקוון הזה).

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

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

2. דרישות תמונה: גובה מינימלי: 30 פיקסלים, ללא הגבלה ברוחב.

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

4. דרישות תמונה: גובה מינימלי: 120 פיקסלים, ללא הגבלה ברוחב.

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

6. דרישות תמונה: גובה מינימלי: 65 פיקסלים ללא הגבלה על רוחב.

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

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

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

כך נראית תיקיית הנושא שלנו לאחר שהדבקנו את התמונות הנדרשות בתיקיית "תמונות".

טיפים ליצירת תמונות טובות שיתאימו לתמונת הרקע הראשית שלך:

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

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

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

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

שלב 3: צור את קובץ המניפסט

לכל הרחבת Chrome, אפליקציית אינטרנט וערכת נושא הניתנים להתקנה יש קובץ מניפסט בפורמט JSON, בשם manifest.json, המספק מידע על ערכת הנושא שלנו לדפדפן. (JSON הוא רק שם מפואר לדרך של עיצוב נתונים - אל תתנו לזה להפחיד אתכם.) הוא מורכב מ-4 אלמנטים: תמונות, צבעים, גוונים ומאפיינים. מניפסט בסיסי שעובד היטב עבור כל הנושאים מוצג להלן. ניתן להוריד מניפסט נושא לדוגמהכָּאן.

{
"version": "1.0",
"name": "My Theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/theme_ntp_attribution.png"
},
"colors" : {
"ntp_link": [255,255,255],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [10 , 17 , 27],
"ntp_background": [10 , 17 , 27],
"frame": [10 , 17 , 27],
"toolbar": [10 , 17 , 27],
"tab_text": [255,255,255],
"tab_background_text": [10 , 17 , 27],
"bookmark_text": [255,255,255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom",
"ntp_background_repeat": "no-repeat"
}
}
}

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

• תמונות– רכיבי תמונה המשמשים בערכת הנושא מוגדרים בקטע "תמונות" בקובץ manifest.json. אלו הן התמונות שיצרנו בשלב 2 ושמנו בתיקייה "תמונות". תצטרך להזין את שם התמונה כפי שקראת להן בתוך תיקיית התמונות.

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

כמה נקודות שכדאי לזכור בעת בחירת הצבעים לנושא שלך:

• צבע הרקע של שורת המצב זהה לצבע סרגל הכלים שתבחר.

• צבע הטקסט של שורת המצב זהה לצבע טקסט הכרטיסייה שתבחר.

• צבע הטקסט של לחצן סרגל הכלים (סרגל הכלים להורדה) זהה לצבע הטקסט של סימניה.

• גוונים– אלמנט גוון זה משמש לציון גוון צבע עבור סמלים בתוך כל הכפתורים בסרגל הכלים (אחורה, קדימה, רענון וכו'). הערך של הגוון הוא בערכים צפים הנעים בין 0 ל-1 או -1. בקובץ המניפסט הזה השתמשנו רק ברכיב אחד "כפתורים", שהוא הנפוץ ביותר בשימוש.

• הערך של הגוון הוא בערכים צפים הנעים בין 0 ל-1 או -1. אם אתה משתמש ב-1 אז לא יבוצעו שינויים בצבע האלמנט. ערכי הגוונים מסודרים כ-[Hue, Saturation, Luminance] ותוכלו להשתמש בערכים כמו 0.346, 0.1, -0.5. התאם אותם כדי שהלחצנים יבלוט או ישתלבו.

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

כעת, לאחר שקובץ המניפסט מוכן, תוכל לשמור אותו בתיקייה "העיצוב שלי".

כך נראית תיקיית הנושא שלנו לאחר שקובץ המניפסט נמצא במקום.

ניתן להוריד חבילת נושא פשוטה, המורכבת ממניפסט ותמונות עבור ערכת הנושא Classic Blue Chromeכָּאן. אתה יכול להשתמש בקובץ זה כעזר ראשוני לתחילת העבודה עם ערכת נושא חדשה.

שלב 4: אריזה ותצוגה מקדימה של הנושא שלך

כעת, לאחר שהתמונות וקובץ המניפסט שלך מוכנים, הגיע הזמן לבדוק את ערכת הנושא. הדבר הראשון שצריך לעשות הוא לפתוח את Google Chrome ולפתוח את דף ההרחבות. אתה יכול לפתוח את הדף על ידי הקלדת "chrome://extensions/" בשורת הכתובת והקש על מקש Enter.

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

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

פתרון בעיות:

אם אתה מקבל תיבת דו-שיח שגיאה האומרת שאינך יכול לטעון את התוסף, ודא שלקובץ המניפסט שלך יש עיצוב JSON חוקי ונקרא manifest.json (לא manifest.json.txt או manifest.json.rtf ). אתה יכול להשתמש ב- a

מאמת JSON

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

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

זה גם ייצור PEM או מפתח פרטי לערכת הנושא שלך כדי לאפשר לך לעדכן את האפליקציה הזו בעתיד, לאחר העלאתה לגלריית ההרחבות של Chrome. אם הכל ילך כשורה Chrome יגיד לך שקובצי ה-.crx ו-.pem שלך נוצרו. זה גם מציג היכן נוצרו קבצים אלה.

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

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

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

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

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

אם יש לך שאלות, ספקות או הצעות שתפו אותם בהערות.