🔌 Browser Extension

Capture bugs directly from any webpage with the Chrome/Edge browser extension — annotated screenshots, screen recordings, console/network logs, and one-click bug creation.

🌟 Overview#

The Sniffer Browser Extension lets team members capture bugs on the spot while browsing any website. Click the extension icon to open the capture panel, which records a screenshot (with annotation tools), console logs, network requests, and device information — then creates a bug in your Sniffer project with a single click.

Captured bugs automatically sync to 🔗 Jira and appear on the 📋 Task Board.

📦 Installation#

The extension is available as an unpacked Chrome extension. Setup instructions are in your project at Settings → Extension Unpacked.

Steps:#

Download the extension package from your Sniffer project settings
Open Chrome and navigate to chrome://extensions
Enable Developer Mode (toggle in the top-right)
Click Load Unpacked and select the downloaded extension folder
The Sniffer icon appears in your browser toolbar
Click the icon and sign in with your Sniffer credentials

Supported Browsers: Google Chrome, Microsoft Edge (Chromium-based)

📸 Capture Capabilities#

🖼️ Screenshots#

Feature	Description
Full-Page Capture	Captures the entire scrollable page
Viewport Capture	Captures only the visible area
🎨 Annotation Tools	Draw, add text, shapes (rectangle, circle, line), choose colors
↩️ Undo / Redo	Step back or forward through annotations
💾 Save	Save the annotated screenshot with the bug report

🎥 Screen Recording#

Feature	Description
Video Capture	Record user actions on the page
Configurable Duration	Set maximum recording length
Countdown	Brief countdown before recording starts
Format	WebM / MP4 output

📟 Console Logs#

Feature	Description
Auto-Capture	Console output captured automatically when extension activates
Level Filtering	Error ❌, Warning ⚠️, Info ℹ️, Debug 🔧
Searchable	Find specific log entries

🌐 Network Logs#

Feature	Description
HTTP Pairs	Request and response captured together
Status Codes	Color-coded: 🟢 2xx, 🟡 3xx, 🔴 4xx/5xx
Timing	Request duration in milliseconds
Bodies	Request and response body content

📱 Device Context#

Automatically captured:

Operating System and version
Browser name and version
Screen resolution
User agent string
Current page URL

🖥️ DOM Snapshot#

Captures the HTML state of the page at the time of the bug report.

🐛 Creating a Bug from the Extension#

After capturing data, a bug creation form appears:

Field	Type	Description
Summary	Text input	Brief title of the bug
Description	Text area	Detailed description
Severity	Selector	Highest, High, Medium, Low
Tags	Multi-select	Choose from project tags
Assignee	Selector	Assign to a team member

Click Create — the bug is created in your Sniffer project with all captured data attached. If Jira sync is active, a Jira ticket is created automatically.

🔄 Auto-Capture Mode#

The extension can run in the background and automatically capture errors:

JavaScript exceptions trigger automatic capture
Network failures are logged passively
Captured data is queued for review before creating bugs

Topic	Description
📋 Task Board →	Extension-captured bugs appear on the board
🐛 Bug Details →	View captured data in the Logs and Attachments tabs
🔗 Integrations →	Captured bugs sync to Jira automatically
🧩 Sniffer for Jira →	View extension captures inside Jira
💬 Feedback →	An alternative capture method for end users