API for CustomElements in YouTube

A JavaScript tool to modify CustomElements in YouTube

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/465819/1304833/API%20for%20CustomElements%20in%20YouTube.js

Tác giả
𝖢𝖸 𝖥𝗎𝗇𝗀
Phiên bản
1.5.3
Đã tạo
09-05-2023
Đã cập nhật
01-01-2024
Giấy phép
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