A high-performance Manifest V3 browser extension for pixel-perfect full page captures, 3D device mockups, DLP auto-censoring, screencasting with audio DSP filters, and GIF export. Zero third-party dependencies. 100% local and privacy-first.
🇬🇧 English Docs • 🇹🇷 Türkçe Dokümantasyon
Most screenshot and screen-recording extensions share the same recurring headaches:
- Full-page captures break on sticky navigation bars or infinite scroll pages.
- Markups and annotations look blurry on Retina and High-DPI displays.
- Service Workers shut down silently during long recordings due to aggressive MV3 timeouts.
- Developers and designers end up juggling 4 or 5 separate utilities for basic tasks: capturing screenshots, wrapping them in 3D device frames, redacting API keys, measuring CSS margins, and creating animated GIFs.
FullShot Pro solves this by unifying a full suite of high-precision capturing, 2D/3D canvas editing, and video recording tools into a single, clean, zero-dependency Chrome Extension. Everything is processed 100% locally in your browser—no tracking, no cloud uploads, and no external analytics.
- 📜 Intelligent Full-Page Stitching (Alt + Shift + F): Automatically scrolls and captures infinite/dynamic DOM pages. Features smart top-docked sticky header filtering (
rect.top <= 2) to prevent duplicate navigation bars. - 🖥️ Visible Viewport Capture (Alt + Shift + V): Instant one-click capture synchronized via double-
requestAnimationFrameand GPU reflow pipeline to prevent ghost HUD artifacts. - 🎯 Interactive DOM Element Snapper (Alt + Shift + E): Hover over any card, button, table, or modal dialog with live outline snapping; click to capture that exact element.
- ✂️ Area Crop with 8x Loupe & Color Picker (Alt + Shift + S): Pixel-precise crop box accompanied by an 8x zoom loupe. Press C while cropping to copy the exact HEX/RGB color code under your cursor.
- ⚡ In-Page Quick Bar HUD: A boundary-aware floating toolbar appears right after area captures, allowing you to instantly Copy, Download, Extract Text (OCR), or send to Image Studio.
- 📐 3D Isometric Tilt & Device Mockups:
- Continuous -25° to +25° horizontal and vertical 3D isometric rotation using affine matrix projections and bilinear interpolation.
- 4 Device Enclosures: iPhone 16 Pro titanium frame, Safari Window, macOS Terminal, and Clean Rounded Card.
- 6 Mesh Gradient Themes: Cyber Neon, Sunset Glow, Deep Void, Obsidian, Aurora, and Clean Studio.
- 🛡️ Smart DLP Auto-Censor (Shift + B):
- Automatically scans and redacts sensitive data using regular expressions and the Luhn Mod-10 algorithm (Credit Cards, E-mail addresses, API keys, IP addresses, and National IDs).
- 🔦 Spotlight Focus Frame (F): Highlights a focal region with a glowing neon frame while dimming the background stage by 65%.
- 🔍 3D Glass Magnifier Lens (Z): Realistic 1.5x - 4.0x optical zoom loupe with authentic specular glare reflection.
- 🏷️ QA Stamps & 3D Keycaps (K): Vector quality stamps (
[APPROVED],[REJECTED],[BUG],[WIP]) and isometric 3D keyboard keys ([Ctrl],[Cmd],[Shift]). - 🧽 Smart Object Eraser (E): Click or drag across any vector arrow, text, shape, or stamp to selectively erase items without losing history.
- 🎨 2D HSV Professional Color Studio: Interactive 2D HSV saturation/value box, hue slider, built-in EyeDropper API, and a 2-row color palette.
- ✏️ 4-Mode Vector Drawing Suite: Ballpoint pen, smooth calligraphy ribbon, neon glow brush, textured sketch pencil, translucent highlighter, Bézier curved arrows, and auto-incrementing step counters (#1, #2, #3...).
- 🖨️ Multi-Format Exporters: Lossless Retina 1:1 PNG, compressed JPEG, WebP, instant ClipboardItem copy, and zero-dependency UTF-8 PDF 1.4 generation.
- 🎬 Flexible Recording Modes: Record current tab or entire desktop/application window with hardware acceleration.
- 🎙️ Web Audio DSP Engine:
- Real-time mixer for microphone and tab audio.
- Active 85Hz High-Pass filter to eliminate low-end room rumble and 50Hz/60Hz Notch filters to cut electrical line hum.
- 🎛️ Live Presentation HUDs:
- Draggable Camera Bubble: Resizable webcam overlay (S/M/L) with mirror mode and an Audio Halo Meter that pulses neon green/cyan with your voice.
- Click Shockwaves & Spotlight (Alt + Shift + S): Visual blue/red click wave pulses and cursor presentation spotlight.
- Floating Recording Bar: Draggable in-page timer with live duration and instant stop button.
- 🎞️ Non-Destructive Trimming & GIF Exporter:
- Timeline In/Out trim markers in Video Studio.
- Pure JavaScript Median-Cut + LZW animated GIF encoder for high-quality, lightweight GIFs.
- EBML Duration Recovery: Injects missing duration headers into WebM recordings to ensure smooth timeline seeking.
- 📏 Figma-Style Pixel Ruler (Alt + Shift + R): Inspect live DOM dimensions, bounding boxes, and measure exact pixel distances between any two elements on the page.
- 📌 Pin to Screen (Document Picture-in-Picture): Keep your reference screenshots floating on top of any webpage or app with 10% - 100% opacity adjustment.
- 🔤 Client-Side OCR: Extract unselectable text from images, tables, and charts directly from the browser into your clipboard.
| Shortcut | Scope | Action |
|---|---|---|
| Alt + Shift + F | Browser | 📜 Capture Full Page Screenshot |
| Alt + Shift + V | Browser | 🖥️ Capture Visible Viewport |
| Alt + Shift + E | Browser | 🎯 Interactive DOM Element Snapper |
| Alt + Shift + S | Browser | ✂️ Precision Area Selection Crop |
| Alt + Shift + R | Browser | 📏 Toggle Figma Pixel Distance Ruler |
| C | Crop Mode | 🔍 Copy HEX color under cursor |
| Shift + B | Image Studio | 🛡️ Trigger DLP Auto-Censor |
| F | Image Studio | 🔦 Activate Spotlight Focus Tool |
| Z | Image Studio | 🔍 Activate Optical Glass Magnifier |
| E | Image Studio | 🧽 Activate Smart Object Eraser |
| K | Image Studio | 🏷️ Open QA Stamps & Keycaps Drawer |
| Ctrl + Z / Ctrl + Y | Image Studio | ↩️ Undo / Redo |
| Space + Drag | Image Studio | ✋ Pan across Canvas Stage |
chrome ss/
├── manifest.json # Manifest V3 configuration & permission definitions
├── package.json # Automation scripts & test runners
├── README.md # Project documentation (English & Turkish)
├── AGENTS.md # Single source of truth for engineering guidelines
├── ARCHITECTURE.md # Data flow charts & state machine specs
│
├── assets/ # High-DPI logos & extension icons
│ ├── branding/ # FullShot vector & raster headers
│ └── icons/ # 16, 32, 48, 128px PNG icons
│
├── scripts/ # Zero-dependency test & packaging tools
│ ├── validate.js # 130+ automated syntax, MV3 & link checks
│ ├── browser-test.js # DOM runtime & studio binding verification
│ └── package-zip.js # Production zip bundle compiler
│
└── src/ # Modulated application source code
├── background/
│ └── background.js # Service Worker: capture coordinator & keep-alive
│
├── content/ # Injected scripts & isolated Shadow DOM HUDs
│ ├── content.js # Main message router & keyboard dispatcher
│ ├── capture/ # DOM measuring, scroll stitching & sticky filter
│ └── hud/ # Area selector, camera bubble, pixel ruler, pin window...
│
├── offscreen/ # MV3 offscreen document for media processing
│ ├── offscreen.html
│ └── offscreen.js # MediaRecorder, Web Audio DSP mixer & OCR engine
│
├── pages/ # Extension User Interfaces
│ ├── popup/ # Extension toolbar popup interface
│ ├── image-studio/ # 2D/3D markup canvas, auto-censor, 3D mockups & PDF
│ └── video-studio/ # Video timeline editor, trimming & animated GIF exporter
│
└── shared/ # Cross-boundary constants & FullShotMediaDB v2 (IndexedDB)
- Clone or download this repository:
git clone https://github.com/cagannbl/fullshot-extension.git
- Open Google Chrome and navigate to
chrome://extensions. - Enable Developer mode using the toggle in the top-right corner.
- Click Load unpacked (Paketlenmemiş öğe yükle) and select the project directory.
- Pin FullShot Pro to your Chrome toolbar for quick access!
FullShot Pro includes a zero-dependency automated verification suite with over 130 checks covering MV3 security guardrails, Keep-Alive ports, IndexedDB stores, and HTML/CSS link integrity:
# Run complete architectural & syntax audit (130+ tests)
npm test
# Run deep DOM & browser runtime verification
npm run test:browser
# Build production-ready distribution package (dist/FullShot-Pro-Extension.zip)
npm run build:zipMevcut ekran görüntüsü ve video kayıt araçlarının büyük çoğunluğu benzer sorunlarla karşılaşır:
- Tam sayfa yakalamada üst menüler (
sticky navbar) tekrarlanır veya kaydırma bozulur. - Yüksek DPI / Retina ekranlarda alınan ekran görüntüleri ve çizimler bulanıklaşır.
- Manifest V3 Service Worker kısıtlamaları yüzünden uzun video kayıtları sessizce çöker.
- Ekran görüntüsü almak, bunu 3D cihaz çerçevesine yerleştirmek, hassas verileri gizlemek, piksel ölçmek ve GIF oluşturmak için 4-5 farklı yazılım kullanmak zorunda kalınır.
FullShot Pro, tüm bu ihtiyaçları sıfır harici bağımlılık (zero-dependency), modern Manifest V3, HTML5 Canvas, Web Audio API ve IndexedDB mimarisiyle tek bir eklentide birleştirir. Tüm işlemler %100 yerel olarak tarayıcınızda gerçekleşir; hiçbir veriniz sunuculara veya üçüncü taraf analiz servislerine gönderilmez.
- 📜 Tam Sayfa Dikişleme (Alt + Shift + F): Sabit üst menüleri (
rect.top <= 2) otomatik filtreleyerek piksel kayıpsız dikey dikişleme yapar. - 🖥️ Görünür Alanı Yakala (Alt + Shift + V): Ekranda görünen kısmı GPU çift rAF senkronizasyonuyla anında yakalar.
- 🎯 Etkileşimli DOM Öğesi Yakala (Alt + Shift + E): Fareyle üzerine geldiğiniz buton, tablo, kart veya diyaloğu otomatik çerçeveler; tek tıkla kaydeder.
- ✂️ 8x Büyüteç & Canlı Renk Seçici (Alt + Shift + S): Serbest kırpma esnasında 8x yakınlaştırma büyüteci açılır. C tuşuna basarak pikselin HEX/RGB renk kodunu panoya kopyalayabilirsiniz.
- ⚡ Sayfa İçi Hızlı Aksiyon Çubuğu (Quick Bar HUD): Çekim bittiği an beliren yüzen bar ile tek tıkla Kopyalama, İndirme, Metin Okuma (OCR) veya Stüdyoya gönderme.
- 📐 3D İzometrik Eğim & Mockup Görselleştirici:
- -25° ile +25° serbest 3D açılandırma (2D Affine Projeksiyon & Biliyer İnterpolasyon).
- 4 Cihaz Çerçevesi: iPhone 16 Pro titanyum kasa, Safari Penceresi, macOS Terminal ve Minimal Kart.
- 6 Mesh Degrade Teması: Cyber Neon, Sunset Glow, Deep Void, Obsidian, Aurora ve Clean Studio.
- 🛡️ Akıllı Otomatik Sansürleme (DLP / Shift + B):
- Regex ve Luhn Mod-10 algoritmasıyla Kredi Kartı numaralarını, E-postaları, API Key'leri, IP adreslerini ve TC Kimlik Numaralarını otomatik tespit edip sansürler.
- 🔦 Spotlight Odak Aracı (F): Seçilen bölgeyi neon çerçeveyle net bırakırken arka planı %65 oranında karartır.
- 🔍 3D Cam Büyüteç Merceği (Z): 1.5x - 4.0x optik yakınlaştırma sunan yansıma efektli cam büyüteç merceği.
- 🏷️ QA Damgaları & 3D Klavye Tuşları (K): Vektörel kalite mühürleri (
[APPROVED],[REJECTED],[BUG]) ve 3D klavye tuşları ([Ctrl],[Cmd],[Shift]). - 🧽 Akıllı Nesne Silgisi (E): Tuval üzerindeki ok, metin, şekil veya damgaları geçmişi bozmadan tek tıkla siler.
- 🎨 2D HSV Profesyonel Renk Stüdyosu: 2D doygunluk/parlaklık alanı, renk tonu kaydırıcısı, dahili tarayıcı pipeti (EyeDropper) ve 2 satırlı pro renk paleti.
- ✏️ 4 Modlu Vektörel Çizim Paketi: Tükenmez kalem, dolma kalem (kaligrafi şeridi), neon ışıltılı kalem, kurşun eskiz kalemi, fosforlu vurgulayıcı, Bézier kavisli oklar ve otomatik artan adım sayaçları (#1, #2, #3...).
- 🖨️ Çoklu Format İhracı: Retina 1:1 PNG, JPEG, WebP, doğrudan panoya kopyalama ve Türkçe UTF-8 destekli sıfır bağımlılıklı PDF 1.4 üretimi.
- 🎬 Esnek Kayıt: Mevcut sekme veya tüm ekran/uygulama penceresini donanım hızlandırmalı olarak kaydeder.
- 🎙️ Web Audio DSP Ses Motoru:
- Sekme sesi ile mikrofonu canlı miksler.
- 85Hz High-Pass filtre ile dip gürültüyü keser, 50Hz/60Hz Notch filtreler ile şebeke uğultusunu yok eder.
- 🎛️ Canlı Sunum Araçları:
- Kamera Baloncuğu: 3 boyutta ayarlanabilen, ayna modlu ve sese duyarlı neon Audio Halo efektli web kamerası.
- Fare Tıklama Dalgaları & Sunum Spotu (Alt + Shift + S): Mavi/kırmızı tık dalgaları ve fareyi takip eden spot ışığı.
- Yüzen Kayıt Çubuğu: Sürüklenebilir mini sayaç ve anında durdurma HUD'ı.
- 🎞️ Video Kırpma & Animasyonlu GIF İhracı:
- Zaman çizelgesi üzerinden In/Out kırpma noktaları belirleme.
- Saf JavaScript Median-Cut + LZW GIF kodlayıcı ile hafif ve akıcı animasyonlu GIF çıktısı.
- EBML Süre Başlığı Onarımı: WebM dosyalarındaki süre başlığını düzelterek oynatıcılarda sorunsuz ileri/geri sarmayı sağlar.
- 📏 Figma Tarzı Piksel Cetveli (Alt + Shift + R): Sayfadaki tüm DOM öğelerinin genişlik, yükseklik ve birbirlerine olan mesafelerini anlık olarak ölçer.
- 📌 Ekrana Sabitle (Document Picture-in-Picture): Alınan ekran alıntısını %10 - %100 saydamlık ayarıyla ekranda yüzen bir pencereye sabitler.
- 🔤 Sayfa İçi OCR: Web sayfalarındaki veya görsellerdeki seçilemeyen metinleri doğrudan panoya aktarır.
| Kısayol | Kapsam | İşlev |
|---|---|---|
| Alt + Shift + F | Tarayıcı | 📜 Tam Sayfa Ekran Görüntüsü Yakala |
| Alt + Shift + V | Tarayıcı | 🖥️ Görünür Alanı Yakala |
| Alt + Shift + E | Tarayıcı | 🎯 Seçilen DOM Öğesini Yakala |
| Alt + Shift + S | Tarayıcı | ✂️ Hassas Alan Kırpma Seçimi |
| Alt + Shift + R | Tarayıcı | 📏 Figma Piksel Cetvelini Aç / Kapat |
| C | Kırpma Modu | 🔍 İmleç altındaki pikselin HEX kodunu kopyala |
| Shift + B | Görsel Stüdyosu | 🛡️ Otomatik DLP Hassas Veri Sansürleme |
| F | Görsel Stüdyosu | 🔦 Spotlight Odak Vurgusu |
| Z | Görsel Stüdyosu | 🔍 Cam Büyüteç Merceği |
| E | Görsel Stüdyosu | 🧽 Akıllı Nesne Silgisi |
| K | Görsel Stüdyosu | 🏷️ QA Damgaları & Tuş Başlıkları Menüsü |
| Ctrl + Z / Ctrl + Y | Görsel Stüdyosu | ↩️ Geri Al / İleri Al |
| Space + Sürükle | Görsel Stüdyosu | ✋ Tuvalde Serbest Gezinme (Pan) |
- Projeyi bilgisayarınıza klonlayın veya indirin:
git clone https://github.com/cagannbl/fullshot-extension.git
- Google Chrome'da
chrome://extensionssayfasına gidin. - Sağ üstteki Geliştirici modu (Developer mode) anahtarını açın.
- Sol üstteki Paketlenmemiş öğe yükle (Load unpacked) butonuna tıklayıp proje klasörünü seçin.
- Hızlı erişim için FullShot Pro simgesini araç çubuğuna sabitleyin!
# Tüm mimari & sözdizimi testlerini çalıştır (130+ kontrol)
npm test
# Derin DOM ve tarayıcı çalışma zamanı testlerini çalıştır
npm run test:browser
# Chrome Web Store için üretim zip paketini derle
npm run build:zipBu proje MIT lisansı altında geliştirilmiştir.
Developed with ❤️ by the FullShot Pro team.