CSS / JS Hızlı Ekleme

1CSS/JS Hızlı Ekleme Nedir?#

Hızlı Ekleme, uygulamanızın yüklediği HER sayfaya AYNI CSS ve JavaScript'i ekler - koşul yok, siteye özel kural yok.

Bunu, kullanıcı hangi sayfada olursa olsun her zaman çalışan genel bir stil sayfası ve genel bir başlangıç betiği olarak düşünün.

✅ Şunlar için mükemmel:

• Marka ince ayarları (renkler, yazı tipleri, logo)
• Genel öğeleri gizleme (üst bilgi, alt bilgi, çerez bannerı)
• Tüm sayfalar için küçük yerleşim veya yazı boyutu düzeltmeleri
• Genel bir yüzen düğme ekleme (WhatsApp, sohbet, başa dön)

❌ Şunlar için tasarlanmadı:

• Kodu yalnızca belirli URL'lerde çalıştırma → bunun yerine Akıllı Kullanıcı Betikleri'ni kullanın
• Zamanlamalı karmaşık otomasyonlar → Akıllı Kullanıcı Betikleri'ni kullanın

2Oluşturucuda Nerede Bulunur#

4. Adım (İzinler) → aşağı kaydırın → 🎨 CSS / JS Hızlı Ekleme kartı.

İki metin kutusu:

• 🎨 Özel CSS - ham CSS kurallarını yapıştırın
• ⚡ Özel JavaScript - ham JS yapıştırın (sarmalama gerekmez)

İkisi de isteğe bağlıdır. Atlamak için boş bırakın.

3Örnek 1: Çerez Bannerını ve Üst Bilgiyi Gizleme#

Her sayfada yapışkan üst bilgiyi ve çerez onay penceresini genel olarak kaldırın:

/* ── Hide header & nav ── */
header, nav, .navbar, #top-bar, .site-header {
  display: none !important;
}

/* ── Remove cookie/GDPR banners ── */
.cookie-banner, #cookie-notice, .gdpr-popup,
[id*="cookie"], [class*="cookie"] {
  display: none !important;
}

4Örnek 2: Tam Karanlık Mod (yalnızca CSS)#

Tek bir CSS filtresiyle herhangi bir web sitesini karanlık yapın - görseller doğal kalır:

/* ── Dark Mode via CSS filter ── */
html {
  filter: invert(1) hue-rotate(180deg) !important;
}
/* Keep images & media in original colors */
img, video, canvas, svg, picture {
  filter: invert(1) hue-rotate(180deg) !important;
}

5Örnek 3: Ölçek / Yakınlaştırma Düzeltmesi#

Web sitesi mobilde çok küçük veya çok büyük mü görünüyor? Yakınlaştırma düzeyini düzeltin:

/* 85% scale — adjust to your needs */
body {
  zoom: 0.85;
}

/* Force readable font size */
body, p, li, td {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

6Örnek 4: Yüzen WhatsApp Düğmesi (JS)#

Her sayfaya yüzen bir WhatsApp iletişim düğmesi ekler (telefon numarasını değiştirin):

// Floating WhatsApp button
(function() {
  if (document.getElementById('__wa_fab__')) return;
  var btn = document.createElement('a');
  btn.id = '__wa_fab__';
  btn.href = 'https://wa.me/1234567890?text=Hello';
  btn.style.cssText = [
    'position:fixed','bottom:24px','right:20px',
    'width:56px','height:56px','border-radius:50%',
    'background:#25D366','color:#fff','font-size:26px',
    'display:flex','align-items:center','justify-content:center',
    'text-decoration:none','z-index:999999',
    'box-shadow:0 4px 12px rgba(0,0,0,.35)'
  ].join(';');
  btn.textContent = '💬';
  document.body.appendChild(btn);
})();

7Örnek 5: Çerezleri Otomatik Kabul Etme (JS)#

Çerez onay pencerelerinde 'Kabul Et'e otomatik olarak tıklayın:

// Auto-accept cookie banners
(function() {
  var selectors = [
    '.accept-cookies','#accept-btn','#cookie-accept',
    'button[id*="accept"]','button[class*="accept"]',
    '[aria-label*="Accept"]'
  ];
  selectors.forEach(function(sel) {
    var el = document.querySelector(sel);
    if (el) el.click();
  });
})();

8Dahili Olarak Nasıl Çalışır#

• CSS, yüklemeden sonra sayfanın <head> bölümüne bir <style id=\'__userscript_css__\'> etiketi olarak eklenir.
• JS, yüklemeden sonra bir <script id=\'__userscript_js__\'> etiketi olarak eklenir.
• İkisi de geri gitme dahil onPageFinished sonrasında HER sayfada çalışır.
• Çift ekleme, önce öğe kimliği kontrol edilerek engellenir.
• Çevrimdışı ZIP uygulamalarında da çalışır.

⚠️ Sınırlama: Sayfa yüklendikten SONRA çalışır. Sayfadaki erken çalışan betikler zaten çalışmış olabilir. Yükleme öncesi ekleme için Akıllı Kullanıcı Betikleri'ni (document-start) kullanın.