CSS / JS Quick Injection

1Apa Itu CSS/JS Quick Injection?#

Quick Injection menambahkan CSS dan JavaScript yang SAMA ke SETIAP halaman yang dimuat aplikasi Anda - tanpa syarat, tanpa aturan per situs.

Anggap ini sebagai style sheet global dan skrip startup global yang selalu berjalan, di halaman mana pun pengguna berada.

✅ Cocok untuk:

• Penyesuaian branding (warna, font, logo)
• Menyembunyikan elemen global (header, footer, banner cookie)
• Perbaikan kecil tata letak atau ukuran font untuk semua halaman
• Menambahkan tombol mengambang global (WhatsApp, chat, kembali ke atas)

⌠TIDAK dirancang untuk:

• Menjalankan kode hanya di URL tertentu → gunakan Smart User Scripts
• Otomatisasi kompleks dengan pengaturan waktu → gunakan Smart User Scripts

2Di Mana Menemukannya di Generator#

Langkah 4 (Permissions) → gulir ke bawah → kartu 🎨 CSS / JS Quick Injection.

Dua kotak teks:

• 🎨 Custom CSS - tempel aturan CSS mentah
• ⚡ Custom JavaScript - tempel JS mentah (tidak perlu dibungkus)

Keduanya opsional. Kosongkan untuk melewati.

3Contoh 1: Sembunyikan Banner Cookie & Header#

Hapus header menempel dan popup persetujuan cookie di setiap halaman secara global:

/* ── 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;
}

4Contoh 2: Mode Gelap Penuh (hanya CSS)#

Ubah situs apa pun jadi gelap dengan satu filter CSS - gambar tetap terlihat alami:

/* ── 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;
}

5Contoh 3: Perbaikan Skala / Zoom#

Situs web terlihat terlalu kecil atau terlalu besar di ponsel? Perbaiki tingkat zoom:

/* 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;
}

6Contoh 4: Tombol WhatsApp Mengambang (JS)#

Menambahkan tombol kontak WhatsApp mengambang di setiap halaman (ganti nomor teleponnya):

// 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);
})();

7Contoh 5: Terima Cookie Otomatis (JS)#

Otomatis klik 'Accept' pada dialog persetujuan cookie:

// 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();
  });
})();

8Cara Kerjanya di Balik Layar#

• CSS disisipkan sebagai tag <style id=\'__userscript_css__\'> ke <head> halaman setelah dimuat.
• JS disisipkan sebagai tag <script id=\'__userscript_js__\'> setelah dimuat.
• Keduanya berjalan di SETIAP halaman setelah onPageFinished - termasuk saat navigasi kembali.
• Penyisipan ganda dicegah dengan memeriksa ID elemen terlebih dahulu.
• Juga berfungsi di aplikasi ZIP offline.

âš ï¸ Batasan: Berjalan SETELAH halaman dimuat. Skrip yang berjalan lebih awal di halaman mungkin sudah dieksekusi. Untuk penyisipan sebelum dimuat, gunakan Smart User Scripts (document-start).