Быстрая вставка CSS / JS

1Что такое быстрая вставка CSS/JS?#

Быстрая вставка добавляет ОДИН И ТОТ ЖЕ CSS и JavaScript на КАЖДУЮ страницу, которую загружает ваше приложение — без условий и правил для отдельных сайтов.

Считайте это глобальной таблицей стилей и глобальным стартовым скриптом, которые работают всегда, на какой бы странице ни находился пользователь.

✅ Отлично подходит для:

• Правки оформления (цвета, шрифты, логотип)
• Скрытие глобальных элементов (шапка, подвал, баннер cookie)
• Небольшие правки вёрстки или размера шрифта для всех страниц
• Добавление глобальной плавающей кнопки (WhatsApp, чат, «наверх»)

❌ НЕ предназначено для:

• Запуска кода только на определённых URL → используйте вместо этого умные пользовательские скрипты
• Сложные автоматизации с таймингом → используйте умные пользовательские скрипты

2Где найти это в генераторе#

Шаг 4 (Разрешения) → прокрутите вниз → карточка 🎨 Быстрая вставка CSS / JS.

Два текстовых поля:

• 🎨 Свой CSS — вставьте готовые CSS-правила
• ⚡ Свой JavaScript — вставьте готовый JS (оборачивать не нужно)

Оба поля необязательны. Оставьте пустыми, чтобы пропустить.

3Пример 1: Скрыть баннер cookie и шапку#

Глобально уберите закреплённую шапку и всплывающее окно согласия на cookie на каждой странице:

/* ── 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: Автоматическое принятие cookie (JS)#

Автоматически нажимайте «Принять» в диалогах согласия на 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();
  });
})();

8Как это работает внутри#

• CSS вставляется как тег <style id=\'__userscript_css__\'> в <head> страницы после загрузки.
• JS вставляется как тег <script id=\'__userscript_js__\'> после загрузки.
• Оба выполняются на КАЖДОЙ странице после onPageFinished — включая переход назад.
• Двойная вставка блокируется проверкой ID элемента.
• Работает и в офлайн-приложениях из ZIP.

⚠️ Ограничение: выполняется ПОСЛЕ загрузки страницы. Скрипты на странице, выполняющиеся раньше, могут уже отработать. Для вставки до загрузки используйте умные пользовательские скрипты (document-start).