כיצד ליצור הרחבות של Chrome מ - Scratch

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

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

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

תנאים מוקדמים

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

אתה חייב להכיר HTML, CSS ו- JavaScript. [בדוק משאבים]
אתה חייב להיות עורך קוד כדי לכתוב את ההרחבה. [השווה בין עורכי]
(אופציונלי) אם ברצונך להפיץ את התוסף שלך למשתמשים אחרים, עליך להיות בעל חשבון מפתח בחנות האינטרנט של Chrome. [צור חשבון]

הערה: Google מבקשת ממך לשלם סכום נמוך עבור יצירת חשבון מפתח בחנות האינטרנט של Chrome.

צור תוסף

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

1. קבל תבנית

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

Extensionizr הוא מחולל boilerplate הטוב ביותר עבור תוספים של Chrome. זה מאפשר לך לבחור אחד סוגי הרחבה נתון - פעולת דפדפן (פעולה עבור כל הדפים או הדפדפן), פעולת דף (פעולה עבור הדף הנוכחי), או תוסף מוסתר (פעולה ברקע כי הוא מוסתר בדרך כלל בממשק הקדמי).

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

לאחר שתסיים בבחירת האפשרויות ליצירת תוסף לדוגמה, הקש על “הורד את זה!” כפתור ב. סוף כל סוף, לחלץ את הארכיון (. zip) לספרייה ולפתוח את עורך הקוד שלך כדי להתחיל לכתוב את התוסף.

2. קוד הארכה

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

בואו להכיר קבצים ותיקיות אחרים בספריה זו גם כן:

_locales: הוא רגיל מידע על שפת החנות עבור יישום רב לשוני.
c you הוא מתפקד לאחסון ספריות צד-קצה של צד שלישי, כגון Bootstrap 4.
סמל you זה נועד להיות סמלים עבור הרחבה שלך בגדלים שונים.
JS: זה שימושי כדי לשמור ספריות עורפיות של צד שלישי כמו jQuery 3.
src: הוא מאחסן את הקוד בפועל שתכתוב עבור התוסף שלך.

גלובלי

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

לדוגמה, בקוד שלהלן, תבחין ששיניתי את השם, התיאור וה- homepage_url יחד עם default_title תחת browser_action. יתר על כן, אני הוסיף “אחסון” תחת הרשאות כפי שאנו צריכים לאחסן נתונים בתוסף שלנו.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "יישום פשוט לביצוע לכולם", "homepage_url": " https://go.aksingh.net/todoizr "," icon ":" "" 16 ":" icon / icon16.png "," 48 ":" icon / icon48.png "," 128 ":" icon / icon128 , "default_locale": "en", "browser_action": "default_icon": "icons / icon19.png", "default_title": "Todoizr - To-Do Simplified", "default_popup": "src / browser_action / browser_action.html "," הרשאות ": [" אחסון "]

src \ דפדפן_action

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

הערה: אתה תמיד יכול להתחיל לקפוץ עם הקוד על ידי שיבוט מאגר זה.

קוד ראשוני מהתבנית

למרות ספרייה זו היה רק קובץ HTML שיש את כל הקוד, החלטתי לחלק אותו לשלושה קבצים נפרדים עבור בהירות טובה יותר. עם זאת, קובץ ה- HTML בשם “browser_action.html” עכשיו יש את הקוד הבא:

יתר על כן, קובץ הסגנון בשם “browser_action.css” יש את התוכן שלהלן בעוד קובץ ה- JavaScript בשם “browser_action.js” הוא ריק לעת עתה.

 #mainPopup padding: 10px; גובה: 200px; width: 400px; משפחת גופן: Helvetica, אובונטו, Arial, sans-serif;  h1 font-size: 2em;

עיצוב ממשק קופץ

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

בקוד שלהלן, הוספתי שני divs - אחד להצגת הטופס כדי להוסיף פריט מטלה והשני להצגת רשימת הפריטים שכבר נוספו. עם זאת, קוד חדש עבור “browser_action.html” הוא כדלקמן:

          טודויזר

ואת קובץ הסגנון “browser_action.css” עכשיו יש את הקוד הבא:

 כתובת אתר של @import ("./ form_style_5.css"); #mainPopup height: 200px; רוחב: 300px; משפחת גופן: Helvetica, אובונטו, Arial, sans-serif;  / * טופס פריט מטלה * / .form-style-5 margin: auto; ריפוד: 0px 20px;  .form-style-5: first-child background: none; . form-style-5 h1 color: # 308ce3; font-size: 20px; text-align: center; . form-style-5 input [type = "text"] רוחב: אוטומטי; צף: משמאל; שוליים-תחתית: unset; . form-style-5 input [type = "button"] background: # 308ce3; רוחב you אוטומטי; צף: ימינה; ריפוד: 7px; גבול: none; border-radius: 4px; font-size: 14px; . form-style-5 input [type = "button"]: העבר את העכבר רקע: # 3868d5;  / * רשימת מטלות * / .form-style-5: last-child height: inherit; margin-bottom: 5px; . form-style-5 ul ריפוד: 20px;  .form-style-5 ul li font-size: 14px;

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

 / * טופס טופס 5 על ידי Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; ריפוד: 10px 20px; רקע: # f4f7f8; שוליים: 10px אוטומטי; ריפוד: 20px; רקע: # f4f7f8; border-radius: 8px; משפחת גופן: ג'ורג'יה, "טיימס ניו רומן", טיימס, סריף; . form-style-5 fieldset border: none; . form-style-5 legend font-size: 1.4em; margin-bottom: 10px;  .form-style-5 label display: block; שוליים-תחתית: 8px; . type-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"]. 5 קלט [type = "number"], .form-style-5 input [type = "search"], .form-style-5 input [type = = "font-style-5 input [type =" url "], .form-style-5 textarea, .form-style-5 בחר font-family: Georgia," Times New Roman ", Times , serif; רקע: rgba (255,255,255, .1); גבול: none; border-radius: 4px; font-size: 16px; שוליים: 0; outline: 0; ריפוד: 7px; רוחב: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -Moz-box-sizing: border-box; צבע רקע: # e8eeef; צבע: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03); box-shadow: 0 1px 0 rgba (0,0,0,0.03) inset; margin-bottom: 30px; . type-format-5 input [type = "text"]: מיקוד, .form-style-5 input [type = "date"]: מיקוד, .form-style-5 input [type = "datetime"]: מיקוד., 5-style-5 input [type = "email"]: מיקוד, .form-style-5 input [type = "number"]: מיקוד, .form-style-5 input [type = "search"] : מיקוד, .Form-style-5 input [type = "time"]: מיקוד, .form-style-5 input [type = "url"]: מיקוד, .form-style-5 textarea: focus, .form- style-5 select: מיקוד background: # d2d9dd; . form-style-5 בחר -webkit-mirror: menolist-button; גובה: 35px;  .form-style-5 .number background: # 1abc9c; צבע: #fff; גובה: 30px; width: 30px; הצג: inline-block; font-size: 0.8em; margin-right: 4px; line-height: 30px; text-align: center; text-shadow: 0 1px 0 rgba (255,255,255,0.2); border-radius: 15px 15px 15px 0px; . style-5-input [type = "submit"], .form-style-5 input [type = "button"] מיקום: יחסית; בלוק תצוגה; ריפוד: 19px 39px 18px 39px; צבע: #FFF; שוליים: 0 אוטומטי; רקע: # 1abc9c; font-size: 18px; text-align: center; font-style: Normal; רוחב: 100%; border: 1px solid # 16a085; width-width: 1px 1px 3px; margin-bottom: 10px; . type-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: רחף רקע: # 109177;

כתוב את ההיגיון של הקופץ

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

בקוד הבא, אנחנו הולכים להשתמש בשתי פונקציות - sync.get () ו- sync.set (), אשר חלק “chrome.storage“. אנחנו צריכים את השני כדי לשמור את המטלות פריטים האחסון הראשון כדי לאחזר אותם ולהראות אותם.

עם זאת, להלן הקוד הסופי של “browser_action.js” קובץ. כפי שניתן לראות להלן, הקוד הוא מאוד להגיב כדי לעזור לך להבין את מטרתו.

 () todo ', פונקציה (תוצאה) var todo = [] אם (& & result.todo && (/) to.ood.length = (=. ==) = / * לנתח ולקבל את המערך כפי שנשמר כמחרוזת * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) עבור (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  )

.3 טען את התוסף

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

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

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

הפץ תוסף

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

מה הלאה? קרא וקודד

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

עם זאת, להלן כמה שלי מועדף ללכת למשאבים כדי ללמוד לפתח הרחבות עבור Google Chrome ודפדפנים אחרים המבוססים על Chromium:

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

אם עברת את המשאבים האלה ואתה מוכן לאתגר מסוים, נסה להוסיף תכונות בהמשך התוסף שהשלים זה עתה:

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

זה הכל על פיתוח הארכה הראשונה שלך עבור הדפדפן הפופולרי ביותר. איזה הרחבה יצרת? האם נתקלת בבעיה? אנא תן לי לדעת את הסיפור שלך על ידי כתיבת הערה להלן או הודעות לי ב @aksinghnet.

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