Swiss Blade is an open-source Chrome extension built with TypeScript, and Manifest V3. It combines ad blocking, video detection & downloading, screenshot tools (visible/crop/full page), and site storage inspection — all in one extension.
This project is a practical privacy and utility extension. Everything runs locally in your browser — no data is ever sent to any external server.
- Blocks known ad-serving and tracking network requests using MV3 static rules.
- Hides common ad containers, sponsored blocks, Google ad frames, and iframes via content script.
- Shows a category breakdown (Banner, Google, Iframe, Sponsored, Native) below the blocked count so you can see exactly what's being hidden.
- Automatic detection — Detects video files loaded on any page via:
- Network request monitoring (
webRequestAPI) - Page-level fetch/XHR/MediaSource interception (injected via
chrome.scripting.executeScriptwithworld: "MAIN"to bypass CSP) - Watching
<video>elements for playback events
- Network request monitoring (
- Floating download button — Appears automatically on the page when a playing video is detected. Click to download instantly.
- Now Playing card — Always visible in the popup, showing the current video's filename, format, and size.
- HLS stream support — Detects
.m3u8playlists and downloads the full video by parsing the manifest, downloading all segments in parallel, and concatenating them into a single.tsfile. - "Show all" option — Reveals all detected videos on the page with individual download buttons.
- Torrent/P2P filtering — Skips byte-range (206 Partial Content) responses to avoid flooding the list with torrent chunk entries.
A single Screenshot button with a dropdown menu offering three options:
| Option | Description |
|---|---|
| Visible | Captures the visible viewport of the active tab. |
| Crop Area | Shows a drag-to-select overlay on the page; saves only the selected region. |
| Full Page | Scrolls through the entire page, captures each section, and stitches them together into one full-height PNG using OffscreenCanvas. |
- Inspects all site storage types: Cookies, LocalStorage, SessionStorage, IndexedDB, and Cache Storage.
- Expand each count row to view individual keys/values.
- Clear individual storage types or use Clear All.
- Storage panel toggles open/closed with the Inspect button.
npm install
npm run buildThen load the extension in Chrome:
- Open
chrome://extensions. - Enable Developer mode in the top right.
- Click Load unpacked.
- Select the
outfolder from this project root.
public/
rules/ declarativeNetRequest rule configurations (ads.json)
icons/ Branded extension icons (16px, 32px, 48px, 128px)
popup.html Native Chrome extension popup shell
popup.css Native Chrome extension popup styling
extension/
background.ts Service worker — ad rules, video detection (webRequest), screenshot capture & stitching, HLS download, storage APIs
content.ts Content script — cosmetic ad hiding, DOM storage queries, page script injection, video element tracking, floating download button
popup.ts Popup controller — UI rendering, storage inspector, video list, screenshot dropdown, event handling
- Popup Load: Clicking the extension icon opens
popup.html.popup.tsreads protection state, ad-block stats, and starts the video detection auto-refresh cycle. - Ad Blocking (Layer 1): Chrome's
declarativeNetRequestintercepts network requests matchingpublic/rules/ads.jsonwhen protection is enabled. - Ad Blocking (Layer 2): The content script injects CSS to hide ad containers and runs a
MutationObserverto catch dynamically added elements. Category counts are tracked (Banner, Google, Iframe, etc.) and displayed in the popup. - Video Detection: The background service worker monitors all network responses for video content-type headers. The content script injects a page-level script (via
chrome.scripting.executeScript) that patchesfetch,XMLHttpRequest, andMediaSource.addSourceBufferto detect video streams. A floating "Download" button appears on the page when a playing video is found. - Screenshots: Clicking the Screenshot dropdown reveals three options — Visible (capture viewport), Crop (drag-to-select area), or Full Page (scroll + stitch with OffscreenCanvas).
- Storage Inspection: Tapping Inspect reads cookies from the background and DOM storage from the content script. The panel toggles open/closed on each click.
| Storage Type | Inspection Method | Clearing Method |
|---|---|---|
| Cookies | chrome.cookies.getAll (BG) |
chrome.cookies.remove (BG) |
| Local | localStorage.length (CS) |
localStorage.clear() (CS) |
| Session | sessionStorage.length (CS) |
sessionStorage.clear() (CS) |
| IndexedDB | indexedDB.databases() (CS) |
indexedDB.deleteDatabase(CS) |
| Cache | caches.keys() (CS) |
caches.delete(name) (CS) |
(BG = Background Service Worker, CS = Content Script)
When ads are hidden, the popup shows a color-coded breakdown:
| Category | Examples |
|---|---|
| Banner | Generic [id^="ad-"], [class*="ad-container"], [data-ad] |
ins.adsbygoogle, [id*="google_ads"], [data-google-query-id] |
|
| Iframe | iframe[src*="doubleclick.net"], ad network iframes |
| Sponsored | [class*="sponsor"], [class*="promoted"], [aria-label*="sponsored"] |
| Native | [class*="native-ad"] |
The Screenshot button opens a dropdown with three options:
- Visible — Captures the current viewport. Saves as PNG via Chrome's downloads API.
- Crop Area — A transparent overlay appears on the page. Drag to select a region; release to save just that area. Press Esc to cancel.
- Full Page — The extension scrolls through the entire page, captures each section, and stitches them into one tall PNG using OffscreenCanvas. Falls back to a single visible capture if scrolling is blocked.
- All processing happens locally — no data is sent to any server.
- Screenshots are saved to your local machine via Chrome's downloads API. They are never uploaded.
- Video detection runs entirely in your browser; detected URLs are not transmitted anywhere.
- Settings are stored only in Chrome's local storage.
npm run dev # Start development server
npm run build # Compile extension and build static pages
npm run typecheck # Check TypeScript errors
npm run lint # Run ESLint validation checks
npm run build:extension-scripts # Package popup/content/background scripts with esbuild
npm run package:chrome # Package the built output into a ZIP for release