Glide CSS Injector - Chrome Extension
A Chrome extension that streamlines injecting custom CSS snippets into your Glide app’s appearance settings. Browse a curated library of CSS snippets and inject them with one click!
What It Does
If you’ve ever customized your Glide app’s appearance with CSS, you know the workflow: find your saved CSS snippets, copy them, navigate to your app’s appearance settings, paste into the CSS textarea, repeat. This extension eliminates that friction.
Key Features:
- One-Click Injection - Select a snippet from the popup and it’s instantly added to your CSS textarea
- Curated Snippet Library - Access a growing collection of useful CSS customizations
- Smart Caching - Snippets are cached for fast loading
- Search & Filter - Quickly find snippets by name, description, category, or CSS content
- Non-Destructive - Appends CSS to existing content, never overwrites your work
- Visual Indicator - A floating icon shows when the extension is active on the page
How It Works
-
Install the Extension from the Chrome Web Store (or load unpacked for development)
-
Navigate to Appearance Settings in any Glide app:
go.glideapps.com/app/YOUR_APP_ID/settings/appearance -
Click the Extension Icon to open the snippet browser
-
Search or Browse the available snippets by category:
- Layout
- Typography
- Buttons
- Cards
- Forms
- Navigation
- Effects
-
Click a Snippet to inject it into the CSS textarea
-
Save in Glide - Click Glide’s save/publish button to persist your changes
Installation
From Chrome Web Store
(Coming soon)
Manual Installation (Developer Mode)
- Download the extension files
- Unzip “css-injector.zip”
- Go to
chrome://extensions/ - Enable “Developer mode” (toggle in top right)
- Click “Load unpacked”
- Select the
glide-css-injectorfolder inside the “css-injector.zip” file.
Available Snippet Categories
| Category | Description |
|---|---|
| Layout | Grid systems, spacing, containers, hide/show elements |
| Typography | Font styles, text effects, heading modifications |
| Buttons | Button styles, hover effects, custom shapes |
| Cards | Card layouts, shadows, borders, image treatments |
| Forms | Input styling, validation states, custom selects |
| Navigation | Menu styles, tab bars, breadcrumbs |
| Effects | Animations, transitions, hover states |
Example Snippets
Hide Glide Branding
[data-testid="glide-branding"],
.glide-branding {
display: none !important;
}
Custom Button Style
button[data-appearance="filled"] {
border-radius: 25px;
text-transform: uppercase;
letter-spacing: 1px;
}
Card Shadow Enhancement
[data-component="card"] {
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
FAQ
Does this work with all Glide apps?
Yes! The extension works on any Glide app’s appearance settings page.
Will my CSS be saved automatically?
No - the extension injects CSS into the textarea, but you still need to click Glide’s save/publish button to persist changes.
Can I request new snippets?
Yes! Post in the comments below with CSS you’d like to see added to the library.
Is this extension safe?
Yes. The extension:
- Only activates on Glide appearance settings pages
- Cannot access your Glide data or credentials
- Only modifies the CSS textarea (with your explicit click)
- Is open source for transparency
Technical Details
- Manifest V3 - Built on Chrome’s latest extension platform
- Minimal Permissions - Only requests access to Glide domains
- React-Compatible - Uses multiple event strategies to ensure Glide detects CSS changes
- Offline Fallback - Includes a default snippet library if the server is unreachable
Contributing
Have a CSS snippet that would benefit the community? Share it in the comments or navigate to the CSS Injector app here.! Include:
- A descriptive name
- What it does
- The CSS code
- Which category it belongs to
Built for the Glide community. Feedback and suggestions welcome!
