API for CustomElements in YouTube

A JavaScript tool to modify CustomElements in YouTube

Ce script ne doit pas être installé directement. C'est une librairie destinée à être incluse dans d'autres scripts avec la méta-directive // @require https://update.greasyfork.org/scripts/465819/1304833/API%20for%20CustomElements%20in%20YouTube.js

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

You will need to install an extension such as Tampermonkey to install this script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

Auteur
𝖢𝖸 𝖥𝗎𝗇𝗀
Version
1.5.3
Créé
09/05/2023
Mis à jour
01/01/2024
Taille
10,6 ko
Licence
MIT
  • For WeakRef supported browsers, Once all registered callbacks are performed, the injector will be cleared.
  • We offer both asynchronous and synchorized callback in customYtElements.whenRegistered. However, since _initializeProperties() and all other related layouting and rendering will be conducted immediately after component registration. Synchorized callback is preferred.
  • Support polymer_enable_controller_extraction since v1.3.0
  • Support polymer_enable_sink_wrapper since v1.5.0

Browser Support

  • Minimum: (ES6 arrow function, Promise, etc.)
  • Chrome 45+ , Edge 12+, Safari 10+, Firefox 29+, Opera 32+

  • Suggested: (No polyfill for CustomElement required)

  • Chrome 55+, Edge 79+, Safari 10.1+, Firefox 63+, Opera 41+

Example 1:

// ==UserScript==
// @name         Testing
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @run-at       document-start
// @require      https://update.greasyfork.org/scripts/465819/1304833/API%20for%20CustomElements%20in%20YouTube.js
// ==/UserScript==

(function () {
  'use strict';

  console.log('script started');
  customYtElements.whenRegistered('ytd-rich-grid-renderer', (proto) => {
    console.log('yt element is registered', proto.is);
    proto.calcElementsPerRow = () => 5;
  });

})();

Example 2 - GC Checking

  • You might also check whether the injector function is garbage collected (GC) or not.

(function () {
  'use strict';

  console.log('script started');
  customYtElements.whenRegistered('ytd-rich-grid-renderer', (proto) => {
    console.log('yt element is registered', proto.is);
    proto.calcElementsPerRow = () => 5;
    if (typeof WeakRef === 'function') {
      console.debug('Is injector is cleared in memory? (#1)', proto._registered.__injector__.deref() === undefined);
      setTimeout(() => {
        console.debug('Is injector is cleared in memory? (#2)', proto._registered.__injector__.deref() === undefined);
      }, 5000);
    }
  });

})();

example-1-result

Example 3 - Run on old browser (Waterfox Classic) with YouTube built-in polyfill

  • It is compatible to Polyfill for customElements used on older browsers (e.g. Waterfox Classic/Firefox 56).

Example 3

(function () {
  'use strict';

  console.log('script started');
  customYtElements.onRegistryReady( () => {
    // Here you can use customYtElements.whenRegistered and customElements.whenDefined.
    // However, customElements.get might be still the original function instead of YouTube's js function.
    // You might use customYtElements.whenRegistered('ytd-app', ... ) to do your stuff at the very first beginning.

    customYtElements.whenRegistered('ytd-app', (proto) => {
      console.log('YouTube App begins to initialize.')
    });

    customYtElements.whenRegistered('ytd-rich-grid-renderer', (proto) => {
      console.log('yt element is registered', proto.is);
      proto.calcElementsPerRow = () => 6;
    });

  });
})();

Scripts Used this Script