الحقن السريع لـ CSS / JS

1ما هو الحقن السريع لـ CSS/JS؟#

يضيف الحقن السريع نفس CSS وJavaScript إلى كل صفحة يحمّلها تطبيقك - دون شروط ودون قواعد خاصة بكل موقع.

فكّر فيه كورقة أنماط عامة وسكربت بدء عام يعملان دائمًا، مهما كانت الصفحة التي يتصفحها المستخدم.

✅ مثالي لـ:

• تعديلات الهوية (الألوان والخطوط والشعار)
• إخفاء العناصر العامة (الترويسة والتذييل وشريط ملفات تعريف الارتباط)
• إصلاحات صغيرة في التخطيط أو حجم الخط لكل الصفحات
• إضافة زر عائم عام (WhatsApp أو دردشة أو العودة للأعلى)

❌ غير مصمم لـ:

• تشغيل الكود على روابط محددة فقط ← استخدم سكربتات المستخدم الذكية بدلًا من ذلك
• الأتمتة المعقدة ذات التوقيت ← استخدم سكربتات المستخدم الذكية

2أين تجده في المولّد#

الخطوة 4 (الأذونات) ← مرّر للأسفل ← بطاقة 🎨 الحقن السريع لـ CSS / JS.

مربعا نص:

• 🎨 CSS مخصص - الصق قواعد CSS مباشرة
• ⚡ JavaScript مخصص - الصق JS مباشرة (دون حاجة إلى تغليف)

كلاهما اختياري. اتركه فارغًا لتخطيه.

3مثال 1: إخفاء شريط ملفات تعريف الارتباط والترويسة#

أزل ترويسة ثابتة ونافذة موافقة ملفات تعريف الارتباط من كل صفحة بشكل شامل:

/* ── 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مثال 2: الوضع الداكن الكامل (CSS فقط)#

حوّل أي موقع إلى الوضع الداكن بمرشح CSS واحد - وتبقى الصور طبيعية:

/* ── 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مثال 3: إصلاح المقياس / التكبير#

يبدو الموقع صغيرًا جدًا أو كبيرًا جدًا على الجوال؟ اضبط مستوى التكبير:

/* 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مثال 4: زر WhatsApp عائم (JS)#

يضيف زر تواصل WhatsApp عائمًا في كل صفحة (استبدل رقم الهاتف):

// 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مثال 5: قبول ملفات تعريف الارتباط تلقائيًا (JS)#

انقر تلقائيًا على «قبول» في نوافذ موافقة ملفات تعريف الارتباط:

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

8كيف يعمل داخليًا#

• يُدرج CSS كوسم <style id=\'__userscript_css__\'> في <head> الصفحة بعد التحميل.
• يُدرج JS كوسم <script id=\'__userscript_js__\'> بعد التحميل.
• كلاهما يعمل في كل صفحة بعد onPageFinished - بما في ذلك التنقل للخلف.
• يُمنع الحقن المزدوج بفحص معرّف العنصر أولًا.
• يعمل أيضًا في تطبيقات ZIP دون اتصال.

⚠️ قيد: يعمل بعد تحميل الصفحة. قد تكون السكربتات التي تُنفَّذ مبكرًا في الصفحة قد عملت بالفعل. للحقن قبل التحميل استخدم سكربتات المستخدم الذكية (document-start).