App shell and navigation
CSS / JS Quick Injection
Global Tweaks - Same CSS & JS on Every Page
AppMintAppwrightBoth builders - the steps below are the same in each.
1What Is CSS/JS Quick Injection?#
Quick Injection adds the SAME CSS and JavaScript to EVERY page your app loads - no conditions, no per-site rules.
Think of it as a global style sheet and a global startup script that always runs, no matter which page the user is on.
✅ Perfect for:
- Branding tweaks (colors, fonts, logo)
- Hiding global elements (header, footer, cookie banner)
- Small layout or font-size fixes for all pages
- Adding a global floating button (WhatsApp, chat, back-to-top)
❌ NOT designed for:
- Running code only on specific URLs → use Smart User Scripts instead
- Complex automations with timing → use Smart User Scripts
2Where to Find It in the Generator#
Step 4 (Permissions) → scroll down → 🎨 CSS / JS Quick Injection card.
Two text boxes:
- 🎨 Custom CSS - paste raw CSS rules
- ⚡ Custom JavaScript - paste raw JS (no wrapping needed)
Both are optional. Leave empty to skip.
3Example 1: Hide Cookie Banner & Header#
Globally remove a sticky header and cookie consent popup on every page:
/* ── 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;
}4Example 2: Full Dark Mode (CSS only)#
Turn any website dark with a single CSS filter - images stay natural:
/* ── 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;
}5Example 3: Scale / Zoom Fix#
Website looks tiny or too large on mobile? Fix the zoom level:
/* 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;
}6Example 4: Floating WhatsApp Button (JS)#
Adds a floating WhatsApp contact button on every page (replace the phone number):
// 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);
})();7Example 5: Auto-Accept Cookies (JS)#
Automatically click 'Accept' on cookie consent dialogs:
// 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();
});
})();8How It Works Internally#
- CSS is inserted as a <style id=\'__userscript_css__\'> tag into the page <head> after load.
- JS is inserted as a <script id=\'__userscript_js__\'> tag after load.
- Both run on EVERY page after onPageFinished - including back-navigation.
- Double-injection is blocked by checking the element ID first.
- Works in offline ZIP apps too.
⚠️ Limitation: Runs AFTER page load. Early-executing scripts on the page may already have run. For before-load injection use Smart User Scripts (document-start).