כיצד לבנות תוסף לכרום

Google Chrome הוא דפדפן האינטרנט הטוב ביותר כרגע, וחלק מהפנייה של Chrome נובעת מההרחבות המצוינות שלו. החדשות הטובות: זה לא כל כך קשה להתחיל ליצור הרחבות Chrome משלך. במדריך זה, ניקח אותך מהתוסף הפשוט ביותר של Hello World (אין צורך בידע ב-HTML או ב-JavaScript) לתוסף מורכב יותר של שליפת RSS כדי להתחיל את הדרך שלך בתור גורו לייצור הרחבות של Chrome.

הוצאתי את התוסף הראשון שלי לכרום - תוסף הפעלה של Google Music בשםמוזיקה פלוס- הקיץ הזה, ואחריו פשוט יותרתוסף Lifehacker Notifierשמנטר את הזנת ה-RSS של Lifehacker, מציג התראות על פוסטים חדשים בחלונות קופצים או בתגים של HTML 5, וכן הלאה.

היום, נסקור כיצד ליצור את התוסף הראשון והפשוט ביותר של Hello World Chrome, לאחר מכן ניצור גרסה קלה של תוסף Lifehacker Notifier שמביאה עדכון RSS ומציג פריטי עדכון בחלון קופץ כאשר אתה לוחץ על התוסף שלך לַחְצָן. אז בואו נתחיל להאריך!

פֶּתֶק:בעוד שהתוסף Hello World דורש אפס ידע ב-JavaScript או HTML (ולמען האמת, אתה יכול ליהנות מאוד רק עם זה אם תרצה), המחצית השנייה של הפוסט הזה דורשת הבנה של שניהם. כדי להגיע לסוף הפוסט, יהיה צורך בניסיון מסוים. גם הראינו לך בעברכיצד לבנות הרחבה לפיירפוקס, אז אם Firefox היא יותר המהירות שלך, אולי תרצה לבדוק את המדריך הזה.

מה שאתה צריך לדעת לפני שמתחילים

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

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

הפרויקט שלנו: מ"שלום עולם" ועד שולף RSS

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

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

Manifest.json: אבן הפינה של תוסף Chrome שלך

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

אז בואו נתחיל. צור תיקיה חדשה - בואו נקרא להHello World- ובאמצעות עורך הטקסט המועדף עליך, צור קובץ טקסט חדש בשםmanifest.json. העתק והדבק לתוכו את הקוד הבא:

{  "name": "Hello World!",  "version": "1.0",  "description": "My first Chrome extension.",  "browser_action": {    "default_icon": "icon.png"  }}

השם, הגרסה והתיאור כולם די מובנים מאליהם, אבלbrowser_actionזה משהו חדש! הbrowser_actionproperty אומר ל-Chrome שאנחנו יוצרים הרחבה שתוסיף לחצן לסרגל הכלים. עד כה, כל מה שעשינו הוא להקצות סמל לכפתור הזה. בעצם אתה אומר ל-Chrome שלתוסף שלך יש סמל, שנקראicon.png, ושהוא ממוקם באותה תיקיה כמו שלךmanifest.jsonקוֹבֶץ. כמובן, אין לךicon.pngהקובץ שלךHello Worldהתיקיה עדיין, אז בואו נתקן את זה.

הורדהתמונה הקטנה הזו(בְּאֶמצָעוּת) והעתק אותו לתיקיית Hello World שלך.

עוד לא עשינו הרבה, אבל למעשה כבר הכנתם משהו שתוכלו לבדוק, אז בואו נעשה את זה. הצבע על Chromechrome://extensions/, סמן את תיבת הסימון מצב מפתח בפינה השמאלית העליונה של חלון זה, ולאחר מכן לחץ על הלחצן טען תוסף לא ארוז. הצבע על Chrome לתיקיית Hello World שלך, לחץ על בחר או על אישור (משתנה בהתאם למערכת ההפעלה), Chrome יטען את התוסף שלך, ואתה אמור לראות את סמל הגלובוס הקטן שלך מופיע בסרגל הכלים של Chrome כך:

עם זאת, אם תנסה ללחוץ על כפתור Hello World שלך, תבחין שהוא לא עושה כלום. בוא נתקן את זה.

יצירת פעולת דפדפן, או, האם זה לא יהיה נחמד אם הכפתור הזה יעשה משהו?

פתח את שלךmanifest.jsonקובץ והוסף אpopupפעולה שמצביעה על קובץ HTML שנקראpopup.html, ככה:

{  "name": "Hello World!",  "version": "1.0",  "description": "My first Chrome extension.",  "browser_action": {    "default_icon": "icon.png",    "popup": "popup.html"  }}

הערה: שמות הקבצים אינם חשובים כל עוד אתה מפנה את Chrome לקבצים הנכונים - אתה יכול לקרוא לזהhelloworld.htmlבmanifest.jsonכל עוד נתת גם שם לקובץ שלךhelloworld.html.

אם כבר מדברים על, עכשיו אתה צריך ליצורpopup.html. אז, שוב, צור קובץ HTML בשםpopup.htmlותשמור אותו אצלךHello Worldתיקייה. בְּתוֹךpopup.html, פשוט הוסף את הטקסט "Hello World!" (בתיאוריה היית רוצה להכניס שם סימון HTML חוקי, אבל זה לא הכרחי, אז אנחנו הולכים לדלג עליו כאן.)

ודא ששמרתmanifest.jsonוpopup.html, חזור אלchrome://extensions/, לחץ על סמל ההרחבה לצד תוסף Hello World ברשימת התוספים, ולאחר מכן לחץ על הקישור טען מחדש (בתמונה מימין).

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

ההישג נפתח! עידנת את ה-Hello World את תוסף Chrome הראשון שלך. עבודה יפה. עכשיו בואו ניקח את העניינים לדרגה. (אם היו לך בעיות בדרך, הורד את העבודה שלישלום World.zipוהשוו את זה לשלך.)

לאן נלך מכאן?

אז Chrome יכול להוסיף לחצנים לסרגל הכלים שלך, אתה יכול ללחוץ על הכפתורים האלה ומשהו יכול לקרות. Neato! אתה יכול לעצור את פיתוח התוספים שלך כאן וליהנות הרבה מהתקנת הרחבות במחשבי החברים שלך - הוסף סימון תמונה קטנה ב-HTML במקום "Hello World!" שלח הודעה ופתחת תענוג של קונדס! תארו לעצמכם את האפשרויות. החבר התמים שלך לוחץ על כפתור חדש ומפתה ו-טרוק, עז! או לזרוק סרטון יוטיוב ו... RICKROLL! (או אל תעשה את זה. החברים שלך לא יודו לך, אבל אולי אם הם ידעו למה אתה לא מכפיף אותם).

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

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

הגיע הזמן לשלב הבא. החזיר הזה

עכשיו, לאחר שניווטת בבטחה מאפס ל-Hello World, אנחנו הולכים להגביר מעט את הקצב. התוסף "Hello World" לא השתמש בליקק של JavaScript (חוץ מה-JSON), ובעצם גם לא כתבנו שום HTML. הסעיף הזה יתקן את זה.

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

{  "name": "RSS Fetcher",  "version": "0.1",  "description": "Keep up with the latest from [insert web site here].",  "icons": { "16" : "images/icon.png",                        "48" : "images/48.png",                        "128" : "images/128.png"},  "homepage_url": "https://insert_web_site_here.com/",        "background_page": "background.html",        "permissions": [          "https://insert_base_rss_url_here.com/*"        ],        "browser_action": {    "default_icon": "images/icon.png",    "default_title": "[INSERT WEB SITE NAME HERE] Fetcher",    "default_popup": "popup.html"  }}

בואו נעבור במהירות על מה שחדש כאן.

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

• homepage_urlמצביע על כל אתר שאתה רוצה לשייך לתוסף שכתבת.

• background_pageהוא דף HTML שיפעל ברקע כל הזמן, ומאפשר לך לשמור על מצב מסוים או לבצע פעולות קבועות עבור חלקים שונים של התוסף שלך. בהרחבה שלנו, עמוד הרקע ישקול את עדכון ה-RSS כדי לראות אם משהו חדש נדחף לעדכון.

• permissionsאומר ל-Chrome לאילו הרשאות מיוחדות אתה צריך גישה. תוספי ארגז חול של Chrome כך שאין להם גישה לכל פעילות הגלישה שלך אלא אם הם מבקשים זאת (ואתה מאפשר זאת). מאפיין ההרשאות מאפשר לך להגדיר בדיוק אילו הרשאות אתה צריך. במקרה שלנו, אנחנו צריכים הרשאה לטעון הזנת RSS מכתובת שורש, ואנו רוצים להיות מסוגלים ליצור התראות HTML 5 כאשר פריטים חדשים מגיעים.

שמתם לב שלנוmanifest.jsonהקובץ דורש גם הרבה קבצים ותיקיות חדשים, אז במקום לדרוש ממך להגדיר את כולם בעצמך, אתה יכול להוריד גרסה בסיסית ועובדת של הקוד הזה שמביאה מהפיד של Lifehacker RSSכָּאן.

(החלטתי לכלול את התמונות שבהן השתמשתי בתוסף Lifehacker Notifier, אבל ברור שאתה יכול להחליף את כל התמונות שעובדות עבורך.)

אתה גם שם לב שכללתי את jQuery. אם אתה לא מכיר את jQuery, זו מסגרת JavaScript שמקלה בטירוף לעשות הרבה דברים ב-JavaScript. אם אתה עושה משהו באינטרנט עם JavaScript ואתה לא מעניין בבנייה מחדש של הגלגל ואתה מעוניין לחסוך הרבה זמן, כדאי ללמוד להשתמש ב-jQuery. (כמו כן, יש לך מזל! אתר האינטרנט המגניב מאוד Codeacademy יצא לאחרונהמדריך מבוא ל-jQuery.)

כל זה אולי נראה כאילו זה הסתבך ממש מהר, אבל ההבדל העיקרי בין תוסף Hello World שלנו לבין שולף RSS מורכב יותר הוא למעשה די פשוט: שלנוpopup.htmlהקובץ יכיל כעת HTML וקצת JavaScript. ביחד, הם יעשו זאתלעשות דברים בפועלמעבר להצגת "Hello World!" בכל פעם שאתה לוחץ על הכפתור.

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

כיצד פועל Popup.html החדש שלנו

החדשpopup.htmlהקובץ בסיומת שליפת ה-RSS שלנו פועל כך: כאשר אתה לוחץ על כפתור התוסף, הוא נטעןpopup.html. כאשר זה נטען, הוא מעביר שיחה אלbackground.html, מבקש ממנו להביא את עדכון ה-RSS שלנו. פַּעַםbackground.htmlהביא בהצלחה את העדכון, הוא מעביר את ה-XML של הפיד בחזרה אלpopup.html, שמנתח את הפיד לאיזשהו HTML ידידותי, שאותו הוא מציג בתוך החלון הקופץ.

הודעה עוברת בין Background.html ל-Popup.html

בגלל ארגז חול אבטחה שונים שמתרחש ב-Chrome, חלקים מסוימים של התוסף שלך אינם יכולים לגשת לאותם ממשקי API או מידע שחלקים אחרים של התוסף שלך יכולים לגשת. כדי לעקוף זאת, טכניקה נפוצה אחת שתצטרך להשתמש בהרחבות Chrome שלך ​​כוללתהעברת הודעות ונתונים הלוך ושוב בין חלקים שונים של התוסף שלך. כדי להדגים את היסודות של איך זה עובד, הכנסתי את השיטה שמביאה את הזנת ה-RSSbackground.html, ואני קורא לזה מpopup.html. בbackground.html, תשים לב לfetch_feedשִׁיטָה:

function fetch_feed(url, callback) {        var xhr = new XMLHttpRequest();    xhr.onreadystatechange = function(data) {      if (xhr.readyState == 4) {        if (xhr.status == 200) {          var data = xhr.responseText;          callback(data);        } else {          callback(null);        }      }    }    // Note that any URL fetched here must be matched by a permission in    // the manifest.json file!    xhr.open('GET', url, true);    xhr.send();}

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

function onRequest(request, sender, callback) {        if (request.action == 'fetch_feed') {         fetch_feed(request.url, callback);       }}// Wire up the listener.chrome.extension.onRequest.addListener(onRequest);

השורה האחרונה, שמשתמשת בשימושי להפליאchrome.extension API, אומר לדף להאזין לבקשות מחלקים אחרים של התוסף. כשהוא יקבל אחד, הוא יעביר אותו ל-onRequestפוּנקצִיָה. כפי שאתה יכול לראות, הonRequestהפונקציה בודקת אם הבקשה מבקשת פעולה שהיא יודעת לטפל בה (במקרה הזה, בקשה להבאת פיד), ואם כן היא קוראת לפונקציה הזו.

עכשיו בואו נקפוץ אל הpopup.htmlקוֹבֶץ. כאשר הוא נטען, הדף ריק לחלוטין. זה מה שמתחיל לשנות את זה:

$(document).ready(function() {        fetch_feed();});

שֶׁלָנוּfetch_feedהשיטה מפטרת את הבקשה הזו:

function fetch_feed() {        chrome.extension.sendRequest({'action' : 'fetch_feed', 'url' : 'https://reto.homes/tech/avril/index.xml'},                function(response) {                        display_stories(response);                }        );}

כפי שאולי ניחשתם,chrome.extension.sendRequestשולח את הבקשה לחלקים אחרים של התוסף שלך שאולי מאזינים. וכפי שאנו יודעים,background.htmlמקשיב לבקשה בדיוק זו! אז הבקשה שלנו קופצת מpopup.htmlאֶלbackground.html, אשר מביא את הפיד, ואז מעביר אותובְּחֲזָרָהאֶלpopup.html, אשר לאחר מכן קורא לפונקציה שנקראתdisplay_stories, מעביר איתו את התגובה מbackground.html. פונקציית ה-display storys (שלא אעבור עליה כאן אבל אתה יכול לראות במקור) לאחר מכן משתמשת במעט jQuery ו-JavaScript כדי לנתח את פיד ה-XML ולעבד את הסיפורים בחלון הקופץ.

אתה רואה כמה זה קל בצורה בלתי ייאמן???

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

פתרון בעיות

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

השני הוא כלי המפתחים המדהימים של Chrome - וליתר דיוק, קונסולת JavaScript ומפקח DOM. אתה יכול למשוך את המסוף עבור החלון הקופץ שלך על ידי לחיצה ימנית על כפתור התוסף שלך ובחירה בבדיקת חלון קופץ. כמו כן, אתה יכול למשוך את כלי המפתחים עבורbackground.htmlעל ידי לחיצה עלbackground.htmlקישור בתצוגה המורחבת של ההרחבה בchrome://settings/extensions.

משאבים מועילים

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

• המדריך הרשמי למפתחים של תוספי Google Chrome: זוהי נקודת ההתחלה לכל מה שאתה צריך לדעת, מציגה את כל ה-API של ההרחבות השונות שבהן תרצה להשתמש, וכן הלאה. אם אתה יודע איזה סוג של הרחבה אתה רוצה לעשות, אני ממליץ בחום לקחת שעה בערך, לקרוא את המסמכים ולרשום הערות/לשמור קישורים בכל פעם שאתה נתקל במשהו שנשמע כאילו תזדקק לו כדי לבצע את יעד הרחבה.

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

קבל קידוד

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

תמונה מאתליי פראת'ר/Shutterstock.

אתה יכול ליצור קשר עם אדם פאש, מחבר הפוסט הזה, ב-לְצַפְצֵף,Google+, ופייסבוק.