☰

Greasy Fork is available in English.

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


作者
𝖢𝖸 𝖥𝗎𝗇𝗀
版本
1.5.3
创建于
2023-05-09
更新于
2024-01-01
大小
10.6 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.
  • 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