☰

YTCoreUI

Zero-CSS and Zer-Config Native YouTube web components engine

Bu script direkt olarak kurulamaz. Başka scriptler için bir kütüphanedir ve meta yönergeleri içerir // @require https://update.greasyfork.org/scripts/591892/1906143/YTCoreUI.js

Nasıl kurarım

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

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

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu betiği yüklemek için bir betik yöneticisi eklentisi yüklemeniz gerekecektir.

(Zaten bir betik yöneticim var, hadi yükleyelim!)

Nasıl kurarım

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

Yazar
RVFET
Versiyon
2.0.0
Oluşturulma
18.08.2026
Güncellenme
18.08.2026
Boyut
15,4 KB
Lisans
MIT

YTCoreUI Library

A zero-CSS micro-component library for YouTube userscript developers. It builds DOM elements using YouTube's internal design system tokens (--yt-spec-*) and layout classes (ytSpecButtonShapeNext*, Polymer/custom element wrappers).

Why This Exists

  1. Theme Fragility: Hardcoding CSS or shipping custom stylesheets breaks across YouTube's dark/light modes, ambient mode, and theme updates.
  2. DOM Verbosity: Reconstructing YouTube's native button and chip structures manually in vanilla JavaScript requires verbose, repetitive element nesting and class juggling.
  3. No Bundle Overhead: Importing React, Preact, or custom CSS bundles into userscripts adds unnecessary bloat. YTCoreUI relies on the styles YouTube has already evaluated and loaded in the client's memory.

What It Is & What It Isn't

  • It IS: A helper library designed to be imported via @require in your own userscripts to rapidly inject native-looking UI controls (buttons, chips, search boxes, dropdown selects).
  • It IS NOT: A standalone extension with end-user functionality. Installing it alone does nothing.
  • It IS NOT: A full reactive UI framework (no virtual DOM, no state reconciler). It returns standard HTML DOM nodes with simple setter/getter bindings.

Components Provided

  • YTCoreUI.h(tag, attrs, ...children): Minimal hyperscript utility handling inline style objects, event listeners, and nested children.
  • YTCoreUI.icon(name, options): Material Symbols loader and wrapper.
  • YTCoreUI.button(options): Native YouTube Spec Next button (primary, secondary, outline, text) with touch-feedback shapes and dynamic labels.
  • YTCoreUI.chip(options) / YTCoreUI.chipBar(options): Filter chips and single/multi-select chip groups.
  • YTCoreUI.searchbox(options): Integrated YouTube-styled search bar with clear actions and input debouncing hooks.
  • YTCoreUI.select(options): Custom single/multi-select dropdown styled after YouTube's native context menus (ytd-menu-popup-renderer).

Usage

Add the library to your userscript metadata block via @require:

// ==UserScript==
// @name         My YouTube Extension
// @match        https://www.youtube.com/*
// @require      https://update.greasyfork.org/scripts/591892/1906121/YTCoreUI.js
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // 1. Create a native-styled button
  const myButton = YTCoreUI.button({
    text: 'Download',
    variant: 'secondary',
    size: 'm',
    icon: 'download',
    onClick: (e, target) => {
      console.log('Action triggered');
      target.setText('Processing...');
      target.setDisabled(true);
    }
  });

  // 2. Create a dropdown selector
  const mySelect = YTCoreUI.select({
    placeholder: 'Filter Quality',
    options: [
      { label: '1080p', value: '1080' },
      { label: '4K', value: '2160' }
    ],
    onChange: (selectedValue) => {
      console.log('Selected:', selectedValue);
    }
  });

  // 3. Inject directly into YouTube's DOM (e.g., above the player or in the actions bar)
  const targetContainer = document.querySelector('#owner');
  if (targetContainer) {
    targetContainer.appendChild(myButton);
    targetContainer.appendChild(mySelect);
  }
})();