Pageside: A Lightweight Browser Extension for Custom Styling, Inspection, TTS & Media Downloads

Introduction

Pageside is a lightweight, privacy-respecting browser extension that gives you practical tools to customize websites, inspect elements, listen to text, and save media — all running entirely in your browser with no servers, accounts, or telemetry.

The repository is named web_extension on GitHub,^[1] but the extension itself ships under the name Pageside. It is a fully functional Manifest V3^[2] extension focused on real daily-use features rather than flashy marketing — and it requires no build step to develop or install.

Key Features

Per-Domain CSS Injection — Write and save custom CSS snippets that apply automatically on every subsequent visit to a specific domain. Perfect for removing annoying banners, adjusting font sizes, or permanently tweaking a site’s layout.
Element Inspector — Click any element on a page to instantly copy its CSS selector to the clipboard, without opening DevTools. Ideal for debugging styles or targeting elements for your custom CSS rules.
Text-to-Speech (TTS) — Select any text and have it read aloud using the browser’s built-in Web Speech API.^[3] Supports multiple languages and accents depending on the voices installed in your OS.
Video & Media Downloader — Right-click any video element or use the popup to detect and extract video source URLs. Handles standard <video> tags and includes special handling for YouTube.
Local-First Storage — All CSS snippets and preferences are saved in chrome.storage.local.^[4] Export and import your full configuration as JSON at any time.
Context Menu Integration — Right-click context menus for one-click video downloads, powered by the background service worker.
Cross-Browser UI — Popup interface on Chromium-based browsers; sidebar mode on Firefox and Opera.

Everything runs client-side. No data ever leaves your browser.

How It Works

Pageside’s four key files map cleanly to four jobs:

File	Role
`manifest.json`	Declares MV3 configuration: permissions, content scripts, service worker, and action popup
`content.js`	Injected into every page; handles CSS injection and the element-inspector overlay
`background.js`	Service worker; registers context menus and relays download requests
`popup.html` / `popup.js`	The main UI: CSS editor, TTS controls, media scanner, and settings

When you type CSS into the popup editor and click Save, the snippet is stored under the current domain key in chrome.storage.local. The content script’s storage.onChanged listener picks up the change and immediately applies the new styles via a dynamically injected <style> element — no page reload required.

The element inspector activates a hover overlay in content.js that highlights elements and computes the shortest unique CSS selector as you move your cursor. Clicking copies the selector and dismisses the overlay.

TTS passes the selected text to window.speechSynthesis.speak() in the popup context, using the browser’s native voices — no audio data ever transits a server.^[3]

The media downloader scans document.querySelectorAll('video, source') for src attributes and surface those URLs in the popup list. The YouTube path uses a separate extraction strategy due to the platform’s multi-quality stream URLs.

Architecture Deep-Dive

Manifest V3 constraints shape the design deliberately. MV3 replaces persistent background pages with an event-driven service worker,^[2] which means Pageside’s background.js wakes up only on context-menu clicks and goes dormant otherwise — a deliberate memory-saving trade-off.

Storage uses chrome.storage.local rather than localStorage because storage is accessible from both the content script and the popup via the same async API, without message passing. The data model is a flat key-value map where the key is the hostname (e.g. example.com) and the value is the saved CSS string.

Content script injection is declared in manifest.json to run at document_idle so it never delays page rendering. Styles are injected into a dedicated <style id="pageside-styles"> element so they can be cleanly removed or updated without touching the page’s own styles.

No build step is intentional and a feature: the extension loads as raw HTML/CSS/JS from the domain-css-injector-v2/ folder. This keeps the barrier to contribution as low as possible and avoids introducing a bundler dependency for what is fundamentally a small codebase.

Browser & Platform Support

Browser	Minimum Version	Notes
Chrome	116+	Primary target; popup UI
Edge	116+	Same as Chrome
Opera	102+	Sidebar mode available
Firefox	121+	Sidebar mode; uses `browser.*` API shim
Kiwi Browser (Android)	Any extension-capable build	Install via `.zip` package
Yandex Browser (Android)	Extension-capable build	Same as Kiwi
Mises Browser (Android)	Extension-capable build	Same as Kiwi
Firefox Nightly (Android)	geckoview-based	Via Firefox Android Add-ons

The extension targets Chromium 116+ because that is when MV3 reached full stability for offscreen documents and context-menu APIs used by the downloader.^[2]

Getting Started

Desktop (Chrome / Edge / Opera):

Clone or download the repository: git clone https://github.com/Ranzlappen/web_extension
Open chrome://extensions (or edge://extensions / opera://extensions).
Enable Developer mode (top-right toggle).
Click Load unpacked and select the domain-css-injector-v2/ folder.
Pin the Pageside icon to your toolbar.

Firefox:

Open about:debugging#/runtime/this-firefox.
Click Load Temporary Add-on and select manifest.json inside domain-css-injector-v2/.
For permanent installation, pack the directory as a .zip and submit to addons.mozilla.org.

Android (Kiwi Browser recommended):

Build a .zip archive of the domain-css-injector-v2/ folder contents.
In Kiwi, open the extension manager and load the .zip.
The popup will appear as a browser action in the toolbar.

Full installation details are in the repository README.

Privacy & Security

Pageside was designed privacy-first from the ground up:

No remote endpoints — the extension makes zero outbound network requests of its own.
No analytics or crash reporting — nothing phones home.
chrome.storage.local only — your CSS snippets are stored locally, not synced to chrome.storage.sync (which would send them to Google’s servers).
No account required — there is no sign-in, no cloud backend, nothing to breach.
Minimal permissions — the manifest requests only the permissions strictly needed: storage, contextMenus, activeTab, and scripting.
Open source (MIT) — you can audit every line of code before installing.

The only data that leaves the browser is what you explicitly send when you use the video downloader to copy a URL and then fetch it in a download manager.

Pitfalls & Known Limits

HTTPS only on Android — on Kiwi and similar Android browsers, content scripts only inject reliably on HTTPS pages.
YouTube downloads — the media extractor can surface stream URLs but YouTube’s signed-URL scheme means those links expire quickly. Use a dedicated tool (e.g. yt-dlp) for reliable YT downloads.
Service worker lifetime (MV3) — the background service worker can be terminated by the browser when idle. Context menus persist across worker restarts, but any in-memory state does not (by design, there is none).
CSP-protected pages — sites with a strict Content-Security-Policy may block the injected <style> element. The extension cannot override a server-set CSP header.
Firefox temporary install — loading as a temporary add-on in Firefox means it disappears on browser restart. For persistence, sign and submit via AMO.

Key Takeaways

Pageside is a practical, no-nonsense Manifest V3 browser extension focused on daily web customization and media access.
It offers per-domain CSS styling, one-click element inspection, built-in TTS via the Web Speech API, and video URL extraction — all locally.
The extension is lightweight, privacy-first, and works across Chrome 116+, Edge 116+, Opera 102+, Firefox 121+, and Android via Kiwi Browser.
Zero build tooling required — just clone and load unpacked.
Licensed MIT; the entire codebase is auditable before installation.

Conclusion

Pageside proves that useful browser extensions don’t need to be complicated or privacy-invasive. With its combination of custom styling, inspection tools, accessibility features (TTS), and media downloading, it offers genuine everyday value while staying completely local and lightweight.

If you frequently customize websites, debug layouts, want quick TTS on articles, or need an easy way to surface video URLs, Pageside is worth adding to your toolkit.

View the repository on GitHub — MIT licensed, no build step needed.

More Project Showcases

Other projects in this series that might interest you:

tools.ranzlappen.com — Browser-based developer utilities (JSON, video editing, Flipper GUI, and more)
repo-standards — Versioned toolkit for high-quality GitHub repositories
MoodRadar — Twitch chat sentiment analysis

Sources

Ranzlappen/web_extension — GitHub repository: README, source files, and manifest (accessed June 2026).
Chrome Developers — What is Manifest V3? — Overview of MV3 architecture changes including service workers, chrome.scripting, and the removal of persistent background pages.
MDN — Web Speech API — The browser-native speech synthesis interface used by Pageside's TTS feature.
Chrome Developers — chrome.storage API — Reference for chrome.storage.local used to persist CSS snippets and settings.
Chrome Developers — chrome.contextMenus API — Context menu API used by the background service worker to register the right-click video download action.