🔍 Deep Search Chrome Extension

A powerful Chrome extension for inspecting JavaScript data layers, browser storage, and DOM elements on any web page. Built for web developers, digital marketers, and QA engineers who need to debug tracking implementations.

Search the entire window object for keys, values, or both.

• Deep traversal — BFS with configurable depth (2, 5, 10 ✦default, 20 levels)
• Relevance sorting — results ranked by match quality (exact key > partial key > value match) and path depth, so the most useful results appear first
• Search history — last 5 searches per tab shown as chips; click any to re-run
• Filter within results — filter bar appears after search to narrow down large result sets
• Object exploration — click object ▷ or 🔍 to drill into any nested object
• Copy actions — 📋 path · 📄 value · 💻 ready-to-use JS snippet
• Export — JSON or CSV download of full result set
• Stop — cancel a long-running search mid-flight

Search cookies, localStorage, and sessionStorage in one place.

• Decode values — 🔓 icon decodes JSON or Base64-encoded values inline
• Cookie metadata — 🍪 icon shows expiry, domain, path, HttpOnly, Secure, and SameSite flags
• Copy actions — 🔑 key · 📄 value · 💻 access snippet (document.cookie, localStorage.getItem, etc.)
• Search history — same chip system as Data Layer

Find elements by tag name, text content, or both — including inside Shadow DOM and iframes.

• Match modes — Partial, Full, or Word-boundary match
• Highlight — 🔦 scrolls to the element and flashes a red outline on the page; minimises the panel automatically
• Text highlight — matching text inside the element is briefly highlighted in red
• Unique selectors — generates a CSS selector for each matched element
• Filter within results — same inline filter bar as Data Layer
• Export — JSON or CSV
• Search history — chip system

Capture dataLayer.push() events in real time.

• Snapshot on start — existing events already in dataLayer are shown immediately (dimmed) so you see what happened before you opened the extension
• Live capture — new pushes appear as they happen, with timestamp and event type highlighted
• Watches for late creation — if dataLayer is defined after Start is clicked, monitoring begins automatically
• Badge counter — red badge on the Monitor tab shows new event count while you're on another tab
• Clear — wipe the log without stopping monitoring

• Shadow DOM isolation — no style conflicts with the host page
• Draggable window — drag by the header; bounds-checked to stay on screen
• Minimise / Maximise / Restore — ▾ collapses to a strip · ⊞ goes fullscreen · restore buttons are distinct characters (▴ and ⊟)
• Persistent search history — history is saved across page navigations and browser restarts via chrome.storage.local

1. Visit the Chrome Web Store page (coming soon)
2. Click Add to Chrome

1. Clone or download this repository
2. Open Chrome → chrome://extensions/
3. Enable Developer Mode
4. Click Load unpacked and select this folder

After any change to popup.js or manifest.json, click the reload icon on the extension card.

1. Enter a search term (e.g. userId, ecommerce, event)
2. Choose Mode (Keys / Values / Both), Match (Partial / Full), and Depth
3. Click Search — results stream in ranked by relevance
4. Use the Filter bar to narrow down; click object ▷ to explore nested objects

1. Enter a search term
2. Results show cookies, localStorage, and sessionStorage together
3. Click 🔓 to decode a value · click 🍪 on a cookie row to see its full metadata

1. Enter a search term
2. Choose tag / text / both and match mode
3. Click 🔦 on any result to scroll to and flash the element on the page

1. Switch to the Monitor tab
2. Click ▶ Start Monitoring — existing dataLayer events appear immediately as a snapshot
3. Interact with the page; new events appear in real time
4. Click ■ Stop when done · Clear to wipe the log

DeepSearch/
├── manifest.json        # Extension config (Manifest V3, v1.1.0)
├── popup.html           # Minimal launcher popup
├── popup.js             # All UI logic (injected into MAIN world via executeScript)
├── background.js        # Service worker — persists search history to chrome.storage.local
├── history-bridge.js    # Isolated-world content script — bridges MAIN world → service worker
├── icons/               # Extension and UI icons
└── README.md

The extension has an unusual dual-role design to work within Manifest V3 constraints:

• popup.html + popup.js — popup.html is a minimal launcher. When the toolbar icon is clicked, popup.js runs in the popup context, reads history and cookie metadata, then calls chrome.scripting.executeScript to inject launchSearchTool into the active tab.
• popup.js as injected script — launchSearchTool runs in the page's MAIN world, giving it direct access to window (including dataLayer). It builds the full search UI inside a Shadow DOM host appended to document.body.
• Cross-world messaging — MAIN world scripts cannot use Chrome APIs. The Monitor and history features dispatch CustomEvents on document; history-bridge.js (an isolated-world content script) receives them and forwards to the service worker via chrome.runtime.sendMessage.

• activeTab — access the current tab
• scripting — inject the search UI
• storage — persist search history
• cookies — read cookie metadata (expiry, flags, domain)

Web Developers — debug GA4 / GTM data layer events, inspect dataLayer state, validate tracking code

Digital Marketers — verify conversion tracking, audit e-commerce events, check campaign parameters

QA Engineers — test tracking implementations, validate storage, debug cross-domain issues

MIT — see LICENSE for details.

GitHub Issues

© Andrzej Marczewski 2025 · marczewski.me.uk/deepsearch