API for CustomElements in YouTube

A JavaScript tool to modify CustomElements in YouTube

当前为 2023-05-09 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/465819/1187836/API%20for%20CustomElements%20in%20YouTube.js

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

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

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
𝖢𝖸 𝖥𝗎𝗇𝗀
版本
1.0
创建于
2023-05-09
更新于
2023-05-09
大小
6.4 KB
许可证
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.

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://greasyfork.org/scripts/465819-api-for-customelements-in-youtube/code/API%20for%20CustomElements%20in%20YouTube.js?version=1187694
// ==/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).
  • You might use yt-page-data-fetched or similar way to ensure customElements is polyfilled.

Example 3A - ready by yt-page-data-fetched

// @run-at       document-start

(function () {
  'use strict';

  console.log('script started');
  let onYtInitialized = () => {
    document.removeEventListener('yt-navigate', onYtInitialized, true);
    onYtInitialized = null;

    customYtElements.whenRegistered('ytd-rich-grid-renderer', (proto) => {
      console.log('yt element is registered', proto.is);
      proto.calcElementsPerRow = () => 6;
      if (typeof WeakRef === 'function') {
        // You can also check whether the injector is garbage collected (GC) or not.
        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);
      }
    });
  };

  // Please make sure `@run-at document-start` is used
  document.addEventListener('yt-page-data-fetched', onYtInitialized, true);
})();

Example 3B - ready by polyfill

(function () {
  'use strict';

  console.log('script started');
  const onCustomElementsReady = () => {

    console.log('onCustomElementsReady');

    customYtElements.whenRegistered('ytd-rich-grid-renderer', (proto) => {
      console.log('yt element is registered', proto.is);
      proto.calcElementsPerRow = () => 6;
      if (typeof WeakRef === 'function') {
        // You can also check whether the injector is garbage collected (GC) or not.
        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);
      }
    });
  };

  if (typeof customElements === 'undefined') {
    Object.defineProperty(window, 'customElements', {
      get: function () {
        delete window.customElements;
        Promise.resolve(0).then(onCustomElementsReady); // onCustomElementsReady will be immediately called after polyfill js script.
        return undefined;
      },
      set: function () {

      },
      enumerable: false,
      configurable: true
    })
  } else {
    onCustomElementsReady();
  }
})();