כיצד להכין סיומת כרום

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

ראה גם את המאמר שלנו מחשבי ה- Chromebook עם מסך המגע הטוב ביותר

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

תוסיפו לזה, העובדה שאדם יוזם ב- SitePoint משתמש גם באותו אתר שאני עושה כדי לבדוק את מהירות העמודים, GTmetrix ופיתח סיומת של Chrome כדי לבדוק את זה, חשבתי שאעשה את אותו הדבר ואסע אתכם דרכו.

תוספי Chrome

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

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

בנה תוסף Chrome משלך

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

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

יהיה עליך ליצור תיקיה במחשב שלך בכדי לשמור הכל בפנים. צור שלושה קבצים ריקים, manifest.json, popup.html ו- popup.js. לחץ באמצעות לחצן העכבר הימני בתיקיה החדשה ובחר קובץ טקסט וטקסט חדש. פתח את כל אחד משלושת הקבצים בעורך הטקסט שבחרת. ודא כי popup.html נשמר כקובץ HTML ו- popup.js נשמר כקובץ JavaScript. הורד את סמל הדוגמה הזה מגוגל רק למטרות הדרכה זו.

בחר manifest.json והדבק בתוכו את הדברים הבאים:

{"manifest_version": 2, "name": "GTmetrix מנתח מהירות דף", "תיאור": "השתמש ב- GTmetrix כדי לנתח מהירות טעינה של דף אתר", "גרסה": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "הרשאות":}

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

פתח את popup.html והדבק בתוכו את הבאים.

http: //popup.js

מנתח Pagespeed באמצעות GTMetrix

בדוק את מהירות העמוד!

Popup.html נקרא כאשר אתה בוחר בסמל התוסף בדפדפן. נתנו לו שם, תייגנו את הקופץ והוספנו כפתור. בחירת הכפתור תתקשר אל popup.js וזה הקובץ שנשלים בהמשך.

פתח את popup.js והדבק בתוכו את הדברים הבאים:

document.addEventListener ('DOMContentLoaded', פונקציה () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('לחץ', פונקציה () {chrome.tabs.getSelected (null, פונקציה (tab) {d = מסמך; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'קלט'); i.type = 'מוסתר'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, שווא);}, שקר);

אני לא מתיימר לדעת JavaScript, וזו הסיבה שהועיל היה ש- SitePoint כבר היה קיים את הקובץ. כל מה שאני יודע זה שהוא אומר ל- GTmetrix לנתח את הדף בכרטיסייה כרום הנוכחית. שם כתוב 'chrome.tabs.getSelected' התוסף לוקח את ה- URL מהכרטיסייה הפעילה ומזין אותה לטופס האינטרנט. זה הכי רחוק שאוכל להגיע.

בודק את התוסף שלך ל- Chrome

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

1. פתח את Chrome, בחר כלים ותוספים נוספים.
2. סמן את התיבה לצד מצב מפתחים כדי להפעיל אותה.
3. בחר טען סיומת שלא ארוזה ונווט לקובץ שיצרת עבור סיומת זו.
4. בחר אישור כדי לטעון את התוסף וזה אמור להופיע ברשימת התוספים שלך.
5. סמן את התיבה לצד מופעל ברשימה והסמל אמור להופיע בדפדפן שלך.
6. בחר בסמל בדפדפן כך שהקופץ יופיע.
7. בחר בלחצן, בדוק עמוד זה עכשיו!

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

לוקח הרחבות קדימה

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

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

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

האם יצרת תוסף Chrome משלך? רוצים לקדם או לשתף אותו? ספר לנו להלן אם כן!