☰

API for CustomElements in YouTube

A JavaScript tool to modify CustomElements in YouTube

目前为 2023-05-09 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/465819/1187826/API%20for%20CustomElements%20in%20YouTube.js

作者
𝖢𝖸 𝖥𝗎𝗇𝗀
版本
1.0
创建于
2023-05-09
更新于
2023-05-09
大小
6.4 KB
许可证
MIT
  • Once all registered callbacks are performed, the injector will be cleared.
  • Such feature currently we require the browser supporting WeakRef.
  • 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.

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://gf.qytechs.cn/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)

  • ES6 is still required.
  • Polyfill for customElements on older browser (e.g. Waterfox Classic/Firefox 56) is compatible.
  • 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();
  }
})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址