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

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

מהי הרחבה של Google Chrome?

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

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

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

מה תעשה תוסף Google Chrome שלנו?

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

instagram viewer

אתה תלמד איך לעשות

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

בניית תוסף עשה זאת בעצמך לכרום

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

שלב 1: יצירת הקבצים

אתה יכול לאחסן את התוסף שלך במחשב המקומי שלך כאשר אתה לא מתכנן להפיץ אותו. אנחנו צריכים רק ליצור ארבעה קבצים שונים כדי ליצור את ההרחבה שלנו; קובץ HTML, קובץ CSS, קובץ JavaScript וקובץ JSON.

קראנו לקבצים שלנו index.html, style.css, script.js ו-manifest.json. לקובץ המניפסט חייב להיות שם זה כדי לעבוד כמו שצריך, אבל אתה יכול לתת לאחרים כל שמות שתרצה, כל עוד אתה משנה את הקוד שלך בהתאם.

עליך למקם את הקבצים הללו באותה תיקיית שורש.

שלב 2: בניית קובץ המניפסט

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

{
"שֵׁם": "חיפוש אוטומטי של MakeUseOf.com",
"גִרְסָה": "1.0.0",
"תיאור": "כלי חיפוש למציאת מאמרים מעניינים",
"manifest_version": 3,
"מְחַבֵּר": "סמואל גארבט",
"הרשאות": ["אִחסוּן", "תוכן הצהרתי", "ActiveTab", "סקריפטים"],
"host_permissions": [""],
"פעולה":{
"default_popup": "index.html",
"default_title": "חיפוש אוטומטי של MUO"
 }
}

שלב 3: בניית HTML ו-CSS

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

הקובץ index.html שלנו כולל תגי html, head ו-body. תג head מכיל כותרת עמוד וקישור לגיליון הסגנונות שלנו, בעוד שהגוף הוא בית לתג h1, כפתור שלוקח אותך אל MakeUseOf.com, וכפתור נוסף בו נשתמש כטריגר עבור א תַסרִיט. תג סקריפט ממש בסוף המסמך כולל את script.js קוֹבֶץ.

<html>
<רֹאשׁ>
<כותרת>חיפוש אוטומטי של MUO</title>
<meta charset="utf-8">
<קישור rel="גיליון סגנונות" href="style.css">
</head>
<גוּף>
<h1>חיפוש אוטומטי של MUO</h1>
<a href="https://www.makeuseof.com/" target="_רֵיק"><כפתור מזהה ="כפתור אחד">עבור אל MakeUseOf.com</button></א>
<כפתור מזהה ="כפתור שני">התחל חיפוש אקראי</button>
</body>
<script src="script.js"></script>
</html>

קובץ ה-CSS שלנו אפילו יותר פשוט מה-HTML שלנו, ומשנה את הסגנון של חמישה אלמנטים בלבד. יש לנו כללים עבור תגי ה-html והגוף שלנו, כמו גם עבור תגי h1 ושני הכפתורים שלנו.

html {
 רוחב: 400 פיקסלים;
}
גוף {
 משפחת גופנים: Helvetica, sans-serif;
}
h1 {
 יישור טקסט: מרכז;
}
#buttonOne {
 border-radius: 0px;
 רוחב: 100%;
 ריפוד: 10px 0px;
}
#buttonTwo {
 border-radius: 0px;
 רוחב: 100%;
 ריפוד: 10px 0px;
 שוליים-עליון: 10px;
}

שלב 4: בניית JavaScript

כשלב האחרון בתהליך זה, הגיע הזמן לבנות את קובץ script.js שלנו.

הפונקציה הראשונה בקובץ הזה, נקראת insertScript(), נמצא במקום כדי להוסיף את הפונקציה האחרת (חיפוש אוטומטי()) לדף הנוכחי. זה מאפשר לנו לתפעל את הדף ולהשתמש בתכונות החיפוש שכבר קיימות באתר MakeUseOf.com.

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

ה חיפוש אוטומטי() הפונקציה קצת יותר מסובכת. זה מתחיל עם מערך המכיל 20 מהקטגוריות באתר MUO, נותן לנו מדגם טוב להפיק ממנו בעת ביצוע החיפושים האקראיים שלנו. בעקבות זאת, אנו משתמשים ב- Math.random() פונקציה ליצירת מספר אקראי בין 0 ל-19 על מנת לבחור ערך מהמערך שלנו.

עם מונח החיפוש שלנו ביד, כעת עלינו לדמות לחיצה על כפתור כדי לפתוח את שורת החיפוש של MUO. תחילה אנו משתמשים במסוף המפתחים של Chrome כדי למצוא את המזהה של לחצן החיפוש, ולאחר מכן אנו מוסיפים את זה לקוד ה-JavaScript שלנו עם נְקִישָׁה() פוּנקצִיָה.

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

// פונקציה זו מכניסה את פונקציית החיפוש האוטומטי שלנו לקוד הדף
פוּנקצִיָהinsertScript() {
// זה בוחר את הכרטיסייה הממוקדת עבור הפעולה ומעביר את פונקציית החיפוש האוטומטי
 chrome.tabs.query({פָּעִיל: נָכוֹן, currentWindow: נָכוֹן}, כרטיסיות => {
כרום.scripting.executeScript({יַעַד: {tabId: כרטיסיות[0].תְעוּדַת זֶהוּת}, פוּנקצִיָה: חיפוש אוטומטי})
 })
// זה סוגר את חלון ההרחבה כדי לבחור בסרגל החיפוש של האתר
חַלוֹן.סגור();
}


// זהו מאזין אירועים שמזהה קליקים על ה" שלנוהַתחָלָה אַקרַאִי לחפש" כפתור
document.getElementById('כפתור שני').addEventListener('נְקִישָׁה', insertScript)


// פונקציה זו בוחרת נושא אקראי מתוך מערך ו 
פוּנקצִיָהחיפוש אוטומטי() {
// זהו מערך לאחסון מונחי החיפוש שלנו
 Const SearchTerms = ["PC ומובייל", "סגנון חיים", "חוּמרָה", "חלונות", "מק",
"לינוקס", "דְמוּי אָדָם", "תפוח עץ", "מרשתת", "בִּטָחוֹן",
"תִכנוּת", "בידור", "פִּריוֹן", "קריירה", "יְצִירָתִי",
"משחקים", "מדיה חברתית", "בית חכם", "עשה זאת בעצמך", "סקירה"];


// זה יוצר מספר אקראי בין 0 ל-19
תן selectorNumber = מתמטיקה.קוֹמָה(מתמטיקה.random() * 20);


// זה משתמש במספר האקראי כדי לבחור ערך מהמערך
תן בחירה = מונחי חיפוש[מספר בחירה];


// זה מדמה לחיצה על סמל החיפוש באתר MUO
 document.getElementById("js-search").נְקִישָׁה();


// זה מגדיר את סרגל החיפוש של אתר MUO כמשתנה
var סרגל החיפוש = מסמך.getElementById("js-search-input");


// זה מכניס את מונח החיפוש האקראי שלנו לשורת החיפוש
 searchBar.value = searchBar.value + בחירה;
// זה מסיים את התהליך על ידי הפעלת טופס האתר
 document.getElementById("טופס חיפוש2").שלח();
}

שלב 5: הוספת הקבצים שלך ל-Chrome://extensions

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

פתח את Google Chrome, עבור אל chrome://extensions וודא שהמחוון של מצב מפתחים בפינה השמאלית העליונה נמצא במצב מופעל.

נְקִישָׁה טען פרוק בפינה השמאלית העליונה, ולאחר מכן בחר את התיקיה שבה שמרת את קבצי ההרחבה ולחץ בחר תיקייה.

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

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

בניית תוסף Google Chrome

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

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

6 הרחבות מפוקפקות של Google Chrome שכדאי להסיר בהקדם האפשרי

קרא הבא

לַחֲלוֹקצִיוּץלַחֲלוֹקאימייל

נושאים קשורים

  • תִכנוּת
  • הרחבות לדפדפן
  • בניית אתרים
  • JavaScript

על הסופר

סמואל ל. גארבט (44 מאמרים שפורסמו)

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

עוד מסמואל ל. גארבט

הירשם לניוזלטר שלנו

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

לחץ כאן כדי להירשם