API for CustomElements in YouTube

A JavaScript tool to modify CustomElements in YouTube

Этот скрипт недоступен для установки пользователем. Он является библиотекой, которая подключается к другим скриптам мета-ключом // @require https://update.greasyfork.org/scripts/465819/1304833/API%20for%20CustomElements%20in%20YouTube.js

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Для установки этого скрипта вам необходимо установить расширение, такое как Tampermonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

Автор
𝖢𝖸 𝖥𝗎𝗇𝗀
Версия
1.5.3
Создано
09.05.2023
Обновлено
01.01.2024
Размер
10,6 КБ
Лицензия
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