Smart User Scripts

1Apa Itu Smart User Scripts?#

Smart User Scripts adalah skrip bernama yang berdiri sendiri - masing-masing punya:
🌐 Pola pencocokan URL (halaman mana yang dijalankan)
⏱ Waktu run-at (sebelum, saat, atau setelah dimuat)
✅ Sakelar Aktifkan/Nonaktifkan

Cara kerjanya seperti Greasemonkey atau Tampermonkey di browser desktop - tetapi sudah tertanam langsung di aplikasi Anda.

✅ Cocok untuk:

• Login otomatis HANYA di halaman /login
• Sembunyikan iklan HANYA di halaman artikel (https://news.com/article/*)
• Pantau perubahan DOM dengan MutationObserver
• Sisipkan sebelum halaman dirender (document-start) untuk menghindari kilatan

Perbedaan utama dari Quick Injection:
Quick Injection = CSS/JS yang sama di SEMUA halaman
Smart User Scripts = kontrol per skrip, per URL, per waktu

2Di Mana Menemukannya#

Langkah 4 (Izin) → gulir ke bawah → kartu 🤖 Smart User Scripts.

Ketuk '+ Tambah' untuk membuat skrip baru. Setiap skrip memiliki:

• Nama - ditampilkan di daftar pengelola
• Pola Pencocokan URL - satu per baris (mendukung wildcard *)
• Run At - document-end / document-start / document-idle
• Kode - JavaScript Anda
• Sakelar aktif

Ketuk baris mana pun untuk mengedit atau menghapus skrip.

3Contoh Pola Pencocokan URL#

Pola menentukan halaman mana yang menjalankan skrip. Gunakan * sebagai wildcard:

# Run on every page of every site
*://*/*

# Run only on example.com (any path)
https://example.com/*

# Run on ALL pages of ANY .com domain
https://*.com/*

# Run only on the /login path
https://example.com/login
https://example.com/login/*

# Run on news article pages
https://news.example.com/article/*

4Penjelasan Waktu Run-At#

• document-end (default)

Berjalan SETELAH halaman selesai dimuat. Aman dan paling kompatibel. Gunakan untuk menyembunyikan elemen, menambah tombol, pelacakan.

• document-start ⚡ (lanjutan)

Berjalan SEBELUM halaman dirender. Menyisipkan skrip ke HTML mentah lewat shouldInterceptRequest. Menghapus header CSP. Gunakan untuk CSS mode gelap atau memaksa viewport sebelum tata letak digambar.

• document-idle ⏱

Berjalan 1,5 detik setelah halaman dimuat. Cocok untuk menangkap konten AJAX yang terlambat dimuat atau modal yang muncul setelah jeda.

5Contoh 1: Login Otomatis Hanya di /login#

Cocokkan: https://myapp.com/login
Run-at: document-end

// Auto-fill login form
(function() {
  var email = document.querySelector('input[type=email], input[name=email]');
  var pass  = document.querySelector('input[type=password]');
  if (email) email.value = '[email protected]';
  if (pass)  pass.value  = 'mypassword';
  // Uncomment to auto-submit:
  // var form = document.querySelector('form');
  // if (form) form.submit();
})();

6Contoh 2: Sembunyikan paywall di halaman artikel#

Cocokkan: https://news.site.com/article/*
Run-at: document-end

// Hide paywall overlay and restore scroll
(function() {
  var overlay = document.querySelector('.paywall-overlay, .metered-content, #paywall');
  if (overlay) overlay.remove();
  document.body.style.overflow = 'auto';
  document.documentElement.style.overflow = 'auto';
})();

7Contoh 3: Pantau Konten Dinamis (MutationObserver)#

Cocokkan: *://*/*
Run-at: document-end
Untuk elemen yang muncul SETELAH halaman dimuat (modal lazy-load, iklan):

// Remove any modal/popup that appears dynamically
(function() {
  var sel = '.modal, .popup, .overlay, [class*="modal"], [class*="popup"]';
  // Remove existing ones first
  document.querySelectorAll(sel).forEach(function(el) { el.remove(); });
  // Watch for new ones
  var obs = new MutationObserver(function() {
    document.querySelectorAll(sel).forEach(function(el) { el.remove(); });
  });
  obs.observe(document.body, { childList: true, subtree: true });
  // Stop watching after 30 s to save battery
  setTimeout(function() { obs.disconnect(); }, 30000);
})();

8Contoh 4: Paksa Mode Gelap Sebelum Render (document-start)#

Cocokkan: *://*/*
Run-at: document-start
Menyisipkan CSS sebelum halaman dirender - tanpa kilatan putih:

// Inject dark theme before page renders
(function() {
  var s = document.createElement('style');
  s.id = '__force_dark__';
  s.textContent = [
    'html { filter: invert(1) hue-rotate(180deg) !important; }',
    'img,video,canvas,svg { filter: invert(1) hue-rotate(180deg) !important; }'
  ].join('\
');
  (document.head || document.documentElement).appendChild(s);
})();

9Contoh 5: Analitik / Pelacakan Peristiwa Kustom#

Cocokkan: https://myshop.com/*
Run-at: document-idle
Kirim peristiwa kustom setelah halaman benar-benar stabil:

// Track page views + button clicks
(function() {
  // Page view
  console.log('[Analytics] Page: ' + location.href);

  // Track all CTA button clicks
  document.querySelectorAll('button, .btn, a[href]').forEach(function(el) {
    el.addEventListener('click', function() {
      console.log('[Analytics] Clicked: ' + (el.textContent || el.href));
      // Replace with your own tracker call, e.g. gtag('event', ...)
    });
  });
})();

10Keamanan & Batasan#

⚡ document-start menghapus header Content-Security-Policy untuk halaman yang cocok. Gunakan hanya di situs milik Anda atau yang benar-benar Anda percaya.

🔒 Same-Origin Policy: JS tidak dapat mengakses iframe lintas asal (PayPal, Stripe, login Google). Ini diberlakukan oleh mesin browser dan tidak dapat dilewati.

📵 Hanya HTTPS: API seperti geolocation atau kamera di skrip yang disisipkan memerlukan HTTPS.

✅ Perlindungan jalan ganda: setiap skrip dijaga dengan flag window sehingga hanya berjalan sekali per halaman.

✅ Berfungsi offline: Smart User Scripts juga berjalan di aplikasi offline berbasis ZIP.