ביצעת כמה שינויים באתר באמצעות הכלי Inspect Element? הנה איך אתה יכול להשתמש בתוסף Tampermonkey כדי להפוך את השינויים האלה קבועים.

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

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

בואו נסתכל כיצד להשתמש ב-Tampermonkey כדי להפוך את השינויים לבדיקת אלמנטים קבועים בדפדפן המקומי שלכם.

מה זה Tampermonkey וכיצד ניתן להתקין אותו?

Tampermonkey, מנהל כתבי משתמש, הוא הרחבת דפדפן פופולרית הזמינה לכל דפדפני האינטרנט הגדולים, כולל Chrome, Edge, Opera Next ו-Firefox. זה מאפשר לך ליצור ולהריץ כתבי משתמש מותאמים אישית וקיימים כדי לשנות דפי אינטרנט כדי לתקן או לשפר אותם.

instagram viewer

הוא כולל גם ספריית כתבי משתמש שנוצרה על ידי משתמשי Tampermonkey אחרים. לדוגמה, אתה יכול להשתמש בסקריפט המשתמש Local YouTube Downloader כדי הורד סרטוני YouTube באמצעות Tampermonkey אוֹ צפה בסרטוני YouTube מסומנים מבלי להתחבר.

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

לפני שנתחיל לכתוב סקריפט, תצטרך להתקין את Tampermonkey. אז בואו נתחיל בהתקנת התוסף:

  1. עבור אל העמוד הרשמי של Tampermonkey. זה יזהה אוטומטית את דפדפן האינטרנט שלך. אם לא, לחץ על כל כרטיסייה מ-Chrome, Microsoft Edge, Firefox, Safari ו-Opera, בהתאם לדפדפן שבו אתה משתמש.
  2. בתוך ה הורד סעיף, לחץ על קבל מהחנות. תופנה לחנות האינטרנט של הדפדפן שלך.
  3. לחץ על להתקין כדי להוסיף את התוסף לדפדפן שלך. בצע את כל ההוראות שעל המסך כדי להשלים את ההתקנה.

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

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

כדי להדגים את היכולות של Tampermonkey, נכתוב סקריפט להוספת כפתור שיתוף WhatsApp כדי לשתף קישורי מאמרים עם אנשי הקשר שלך ב-WhatsApp.

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

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

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

תחילת העבודה עם Tampermonkey

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

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

כותרת ברירת המחדל של Tampermonkey או הערות מטא נתונים נראות כך:

// ==UserScript==
// @name New Userscript


// @namespace http://tampermonkey.net/


// @version 0.1


// @description try to take over the world!


// @author You


// @match http://example.com/*


// @grantnone


// ==/UserScript==


(function() {


'use strict';


// Your code here...
})();

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

עבור מדריך זה, נתמקד ב- @התאמה הנחיה, המכונה מטא נתונים. Tampermonkey משתמש בהנחיה זו כדי להבטיח שכתב המשתמש מוחל רק על אתר או דפי אינטרנט ספציפיים. במקרה זה, ה-Userscript הבא יפעל רק ב-example.com (החלף את כתובת האתר לפי הדרישה שלך) וכל הדפים שלו.

כתיבת כתב משתמש כדי להוסיף לחצן שיתוף WhatsApp

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

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

נתחיל ביצירת כפתור שיתוף בסיסי של WhatsApp.

//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';

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

//add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';

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

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

לשם כך, נבדוק את ווידג'ט השיתוף הקיים כדי למצוא את מיכל האב המכיל את רכיבי השיתוף כדי לאתר אותו ב-userscript. בדף האינטרנט, לחץ על Ctrl + Shift + C כדי לפתוח את Inspect Element. לאחר מכן, בחר את רכיב הווידג'ט השיתוף בדף כדי לבדוק אותו.

אתה תראה שזה an רכיב עם שם המחלקה "שיתוף בתחתית”. אתה יכול לבחור אלמנט זה באמצעות ה- querySelector שיטה בסקריפט המשתמש שלך.

const sharingDiv = document.querySelector ('div.sharing.bottom');

לאחר בחירת האלמנט, הבה נכניס את כפתור השיתוף כילד אליו:

if (sharingDiv) {
 sharingDiv.appendChild(Whatsapp_btn);
}

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

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

functiongenerateWALink() {
 const pageURL = encodeURIComponent(window.location.href);
 return`https://api.whatsapp.com/send? text=${pageURL}`;
}

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

Whatsapp_btn.addEventListener('click', () => {
 const whatsappURL = generateWALink();
 window.open(whatsappURL, '_blank');
});

שמור והפעל את Userscript

לאחר שתהיה לך את ה-userscript מוכן, לחץ Ctrl + S כדי לשמור את השינויים. פתח את ה Userscripts מותקן הכרטיסייה ב- Tampermonkey כדי להציג את כל סקריפטי המשתמש המותקנים בדפדפן שלך.

כדי לראות את סקריפט המשתמש בפעולה, פתח את דף האינטרנט היעד. אתה תראה ירוק לַחֲלוֹק לַחְצָן. לחיצה על הכפתור תנחה אותך לפתוח את שולחן העבודה של WhatsApp, בתנאי שהאפליקציה מותקנת. לאחר מכן תוכל לבחור את איש הקשר מהרשימה כדי לשלוח את הקישור למאמר.

אתה יכול לשנות עוד יותר את הסקריפט כדי להוסיף שיפורים נוספים. לדוגמה, אתה יכול להציג את סמל WhatsApp על הכפתור או לשנות את מיקומו באמצעות פונקציית InsertAfter() .

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

ביצוע של שינויי בדיקה קבועים באמצעות Tampermonkey

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

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