יוטיוב | הוספת כפתור "הורדה" באופן אוטומטי מתחת לוידאו | JS+tampermonkey

[chv]

עריכה: כרגע לא עובד

תגובה: תוסף | הורדה מיוטיוב דרך videownload.ml (נטפרי ) | כרום\פיירפוקס

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

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

איך זה עובד? ככה: כל אתר בנוי משלוש מרכיבים: HTML, CSS, ו-JS (javascript). הJS זה החלק של כל הצד התיכנותי של האתר. זו שפת תוכנה שמשתמשים בה בעיקר באתרי אינטרנט והיא השפה הפופלרית ביותר בעולם בתיכנות (עד כמה שאפשר למדוד כזה דבר. לוגית - המשפט הזה שגוי).

בכל אתר שאתם נמצאים, אתם יכולים לשלוח פקודות בJS לאתר. עושים את זה פשוט דרך ה"קונסול" - console של הדפדפן: לוחצים F12 נכנסים לכרטיסיה console, כותבים מה שאתם רוצים ולוחצים ctrl+enter.

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

הבעיה בכל הסיפור הזה, בתכלס, זה שכל פעם תצטרכו ללחוץ על הסימניה\להקליד את הפקודה בקונסול. וזה מרגיז - אנחנו רוצים שהכפתור הורדה (לדוגמא) ייכנס אוטומטית ליוטיוב. וגם - זה תופס מקום בסרגל הסימניות. מה עושים?

בדיוק בשביל זה נוצר - מי שלא הכיר: tampermonkey .
התקנה בכרום
התקנה בפיירפוקס

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

במקרה שלנו - מדובר על סקריפט ליצירת כפתור "הורדה" ביוטיוב.

יש כבר כמה "סימניות" שרצות עם סקריפטים כאלו, הכי מוכר זה משום מה זה - http://forum.netfree.link/post/85648. (זה מוריד בצורה פשוטה על ידי פריקה של stremingData. השורה הכי קריטית בקוד הארוך הזה (יותר מידי ארוך.. כל האורך בשביל שיהיה סמל עם חץ למטה ליד המילה "הורדה"..) היא זו: const formats = JSON.parse(ytplayer.config.args.player_response).streamingData.formats; זה מוציא מהנגן את כתובת ההורדה של הניגון הנוכחי)

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

const observer = new MutationObserver(() => {
  if (document.querySelector("ytd-menu-renderer #top-level-buttons")) {
    observer.disconnect();
    const video_id = new URLSearchParams(new URL(location).search).get("v");
    const dlink = "https://videownload.ml/download/https://youtu.be/" + video_id;
    const dbutton = document.createElement("div");
    dbutton.style.fontSize = "1.35rem";
    dbutton.innerHTML = `<div id="nfdownload" title="הורדת הסרטון למחשב (דרך האתר videowload.ml)" style="align-items: center; line-height: 2.5"><a style="color :black; text-decoration: none; display: inline-block;" href="${dlink}" target="_blank"><img src="https://github.com/chaim-chv/files-sending-for-netfree-users/raw/master/1.png" width="100" height="38"></a></div>`;
    document
      .querySelector("ytd-menu-renderer #top-level-buttons")
      .appendChild(dbutton);
  }
});
observer.observe(document, {
  attributes: true,
  childList: true,
  subtree: true,
});

תודה לניק someuser מפורום נטפרי על תרומתו ל"פיתוח" הסקריפט. בזכותו התייתר שלב ארוך וטיפשי בפעולת הסקריפט בגרסא הראשונה. כרגע הסקריפט מאזין לשינוי בקיום האלמנט הנצרך להוספת הכפתור (""ytd-menu-renderer #top-level-buttons"") וברגע שהוא קיים הוא מבצע את פעולת הוספת הכפתור.

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

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

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

זה יוצר כפתור הורדה כזה:

בהצלחה!! לשאלות נוספות תכתבו כאן.

[מתחיל-מומחה]

אוהב לקרוא את הפוסטים הארוכים והמשעשעים שלך....
בבקשה, תהיה משועמם הרבה פעמים

כמה הערות/הארות -
מה זו החיפושית הזו שנמצאת לי בתוסף על הסקריפט הנוכחי שמא תולעת ח"ו שתלת לנו.... ????

מדוע אצלי ביוטיוב מופיע כך

ולא כמו אצלך?

[chv]

@מתחיל-מומחה החיפושית (זה לא תולעת..) זה כפתור לדווח ליוצר הסקריפט על באג.
ההוראות שכתבת לא נצרכות כאן כיוון שהקובץ של הסקריפט בנוי כך שבלחיצה על הקישור זה נפתח אוטומטית כהצעת התקנה של tampermonkey.
בפועל כשתלחץ על ה"כאן" בהודעה למעלה, ייפתח לך כזה חלון:

צריך ללחוץ על install כמו שכתבתי. וזהו.

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

[מתחיל-מומחה]

@chv אמר ביוטיוב | הוספת כפתור "הורדה" בשורת הכפתורים מתחת לוידאו | JS+tampermonkey:

@מתחיל-מומחה החיפושית (זה לא תולעת..) זה כפתור לדווח ליוצר הסקריפט על באג.

הנה, אני כבר הולך לדווח על רשימה ארוכה של באגים....

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

צריך ללחוץ על install כמו שכתבתי. וזהו.

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

[chv]

@מתחיל-מומחה הבאג שהעלית בתמונה שלך "סודר"..
תלחץ על הסמל של טאמפרמונקי ועל check for updates ותעדכן את הסקריפט

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

[מתחיל-מומחה]

@chv
מוזר... אחרי העדכון דווקא מופיע לי 'הורדה בנטפרי' והפעם באופן תקין.

[chv]

@מתחיל-מומחה ...

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

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

[מתחיל-מומחה]

@chv אמר ב[יוטיוב | הוספת כפתור "הורדה" בשורת הכפתורים מתחת לוידאו |

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

לא קריטי....
(ומה רע בכזה כפתור, לדוגמא? )

[chv]

@מתחיל-מומחה עודכן. תלחץ כאן ותאשר.
מה שעשית נחמד אבל לטעמי היה עדיף משהו קצת יותר.. אבל כמו שכתבת - למי זה חשוב.. מי שזה חשוב לו - שיעצב ויעלה לכאן.

[אנונימוס]

@chv תודה לך על היוזמה...
אני התקנתי כמו שהדרכת
זה מופיע בהתקנה בכרום אך לא מופיע בעמוד של היוטיוב
מה עושים???

[לעכשיו]

@chv וואו...
יש דרך לעשות לעשות את אותו הדבר רק עם הסימניה הנ"ל?

[chv]

@לעכשיו כן בודאי. כמעט כל סקריפט יכול לרוץ בטאמפרמונקי

[chv]

@אנונימוס אמר ביוטיוב | הוספת כפתור "הורדה" באופן אוטומטי מתחת לוידאו | JS+tampermonkey:

@chv תודה לך על היוזמה...
אני התקנתי כמו שהדרכת
זה מופיע בהתקנה בכרום אך לא מופיע בעמוד של היוטיוב
מה עושים???

אולי לא רעננת את העמוד?

[לעכשיו]

@chv אז איך אפשר לעשות את זה?
תודה

[chv]

@לעכשיו מה העניין שלי? למשתמשי נטפרי זה לא משנה.
אם אתה רוצה לעשות משהו לעצמך שיעבוד למשתמשי רשתות אחרות - תלמד בעצמך (זה ממש לא מסובך).

[אנונימוס]

@chv לדעתי זה בעיה בסקריפט שהוא לא הותקן כשאני לוחץ על התקנה זה מה שנותן!
טקסט

[מתחיל-מומחה]

@אנונימוס
מה הבעיה שלך, תלחץ Reinstall

[אנונימוס]

@מתחיל-מומחה לחצתי זה לא נותן .

[chv]

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

לפרטים אודות תוכן העדכון ומהותו עיינו בפוסט הזה בפורום נטפרי.

[מטעמים]

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

אולי ניתן לבקש מנטפרי שירכיבו את זה באופן קבוע לכל מי שמחובר לנטפרי?