Chrome Extension ยท Manifest V3

GA4 Event Tracker

A Chrome Extension that injects Google Analytics 4 tracking into every visited webpage and shows a dark-mode terminal-style HUD with live event counts.

Download

Download Extension (.zip)

Unzip, open chrome://extensions, enable Developer mode, and load the unpacked extension.

Source Files

manifest.jsonExtension manifest (MV3)background.jsService worker - content script injection & event relaycontentScript.jsInjects GA4 snippet, monitors gtag() callspopup.htmlTerminal HUD popup markuppopup.cssDark terminal themepopup.jsPopup logic - queries event counts, resetREADME.mdBuild and packaging instructions

Injected GA4 Snippet

<script async src="https://www.googletagmanager.com/gtag/js?id=G-RN41M36MWL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-RN41M36MWL');
</script>

Popup Preview

GA4 Event Tracker
events recorded12
last eventpage_view
statusactive
resetctrl+r to reset

How It Works

  1. 1The content script creates two script elements in document.head - one async external load, one inline init block with the exact GA4 snippet above.
  2. 2A proxied dataLayer.push intercepts every gtag('event', ...) call and forwards the count to the background service worker.
  3. 3The background SW persists counts per tab in chrome.storage.local and relays them to the popup on request.
  4. 4The popup renders a dark terminal HUD with a pulsing LED, live counter, last event label, status indicator, and a reset button.