स्मार्ट यूज़र स्क्रिप्ट्स

1स्मार्ट यूज़र स्क्रिप्ट क्या हैं?#

स्मार्ट यूज़र स्क्रिप्ट अलग-अलग नाम वाली स्क्रिप्ट हैं - हर एक की अपनी:
🌐 URL मैच पैटर्न (किन पेजों पर चलना है)
⏱ Run-at टाइमिंग (लोड से पहले, लोड के दौरान या बाद)
✅ Enable/Disable टॉगल

ये डेस्कटॉप ब्राउज़र के Greasemonkey या Tampermonkey की तरह काम करती हैं - लेकिन सीधे आपके ऐप में बनी हुई।

✅ इनके लिए बिल्कुल सही:

• ऑटो-लॉगिन सिर्फ़ /login पेज पर
• विज्ञापन सिर्फ़ आर्टिकल पेज पर छिपाएँ (https://news.com/article/*)
• MutationObserver से DOM बदलावों पर नज़र रखें
• फ़्लैश से बचने के लिए पेज रेंडर होने से पहले (document-start) इंजेक्ट करें

Quick Injection से मुख्य अंतर:
Quick Injection = सभी पेजों पर एक ही CSS/JS
Smart User Scripts = हर स्क्रिप्ट, हर URL, हर टाइमिंग पर अलग नियंत्रण

2इसे कहाँ पाएँ#

चरण 4 (Permissions) → नीचे स्क्रॉल करें → 🤖 Smart User Scripts कार्ड।

नई स्क्रिप्ट बनाने के लिए '+ Add' दबाएँ। हर स्क्रिप्ट में होता है:

• Name - मैनेजर की सूची में दिखता है
• URL Match Patterns - हर पंक्ति में एक (* वाइल्डकार्ड समर्थित)
• Run At - document-end / document-start / document-idle
• Code - आपका JavaScript
• Enabled टॉगल

स्क्रिप्ट बदलने या डिलीट करने के लिए किसी भी पंक्ति पर टैप करें।

3URL मैच पैटर्न के उदाहरण#

पैटर्न तय करते हैं कि स्क्रिप्ट किन पेजों पर चलेगी। वाइल्डकार्ड के लिए * इस्तेमाल करें:

# 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/*

4Run-At टाइमिंग की व्याख्या#

• document-end (डिफ़ॉल्ट)

पेज लोड पूरा होने के बाद चलती है। सुरक्षित, सबसे ज़्यादा संगत। एलिमेंट छिपाने, बटन जोड़ने और ट्रैकिंग के लिए इस्तेमाल करें।

• document-start ⚡ (एडवांस्ड)

पेज रेंडर होने से पहले चलती है। shouldInterceptRequest के ज़रिए स्क्रिप्ट को कच्चे HTML में इंजेक्ट करती है। CSP हेडर हटा देती है। डार्क-मोड CSS के लिए या लेआउट पेंट से पहले व्यूपोर्ट तय करने के लिए इस्तेमाल करें।

• document-idle ⏱

पेज लोड के 1.5 सेकंड बाद चलती है। देर से लोड होने वाले AJAX कंटेंट या कुछ देर बाद आने वाले मोडल पकड़ने के लिए अच्छी।

5उदाहरण 1: ऑटो-लॉगिन सिर्फ़ /login पर#

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

6उदाहरण 2: आर्टिकल पेज पर पेवॉल छिपाएँ#

Match: 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';
})();

7उदाहरण 3: डायनामिक कंटेंट पर नज़र रखें (MutationObserver)#

Match: *://*/*
Run-at: document-end
पेज लोड के बाद आने वाले एलिमेंट के लिए (लेज़ी-लोड मोडल, विज्ञापन):

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

8उदाहरण 4: रेंडर से पहले डार्क मोड लागू करें (document-start)#

Match: *://*/*
Run-at: document-start
पेज पेंट होने से पहले CSS इंजेक्ट करता है - सफ़ेद फ़्लैश नहीं आता:

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

9उदाहरण 5: कस्टम एनालिटिक्स / इवेंट ट्रैकिंग#

Match: https://myshop.com/*
Run-at: document-idle
पेज पूरी तरह स्थिर होने के बाद कस्टम इवेंट भेजें:

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

10सुरक्षा और सीमाएँ#

⚡ document-start मेल खाने वाले पेज के Content-Security-Policy हेडर हटा देता है। इसे सिर्फ़ उन साइट पर इस्तेमाल करें जो आपकी अपनी हैं या जिन पर आप साफ़ तौर पर भरोसा करते हैं।

🔒 Same-Origin Policy: JS क्रॉस-ओरिजिन iframe (PayPal, Stripe, Google लॉगिन) तक नहीं पहुँच सकता। यह ब्राउज़र इंजन लागू करता है और इसे टाला नहीं जा सकता।

📵 सिर्फ़ HTTPS: इंजेक्ट की गई स्क्रिप्ट में geolocation या कैमरा जैसे API के लिए HTTPS ज़रूरी है।

✅ दोहरे रन से सुरक्षा: हर स्क्रिप्ट एक विंडो फ़्लैग से सुरक्षित है, इसलिए वह हर पेज पर सिर्फ़ एक बार चलती है।

✅ ऑफ़लाइन भी चलती है: स्मार्ट यूज़र स्क्रिप्ट ZIP में बंडल किए ऑफ़लाइन ऐप में भी चलती हैं।