jatin sharma.
Say hello
← all projects

04 · Developer tools · Chrome extension + npm CLI

Development tools

Two tools for problems I hit in real codebases: NetworkLogger, a Chrome extension that keeps network logs when tabs and popups close, and RTL-Migrate, a published codemod that moves CSS to logical properties for right-to-left layouts.

NetworkLogger RTL-Migrate npm

the problem.

DevTools loses the network panel when a tab or popup closes, which is exactly when OAuth popups and redirects go wrong. And supporting right-to-left languages in a large codebase means touching thousands of marginLeft and paddingRight declarations, where a blind find-and-replace breaks layouts.

what i built.

  • NetworkLogger: a page-world script that patches fetch, XMLHttpRequest, sendBeacon and form submission to capture requests and, where the browser allows, responses.
  • NetworkLogger: a relay content script and a background service worker that keep per-domain logs in chrome.storage and export them as JSON.
  • RTL-Migrate: a CLI, rtlmigrate, published to npm as rtl-migrate-cli.
  • RTL-Migrate: AST-based rewriting of JS/TS style objects with Babel and recast, and PostCSS rewriting for CSS and SCSS, dry run by default.

how it flows.

  1. Sourcepage traffic / CSS files
  2. Hook or parseMAIN world / Babel, PostCSS
  3. Rulescapture filters / RTL heuristics
  4. OutputJSON export / reviewable diff

decisions that mattered.

NetworkLogger runs in the page's own JS world

Capture code is injected into the MAIN world so it patches the page's real network APIs; a separate isolated-world relay carries messages to the extension.

Working around MV3 limits

Service workers cannot create object URLs, so an offscreen document builds the Blob that is then handed to the downloads API.

RTL-Migrate uses heuristics, not blind replacement

left and right are only converted when they look directional. Centering such as left: 50%, full-overlay positioning and off-screen hiding are left alone, and direction ternaries collapse to the logical value.

Safe to run on a real repo

Diff-first output and preserved formatting make the codemod's changes reviewable like any other pull request.

built with.

  • JavaScript
  • Chrome Extensions
  • Manifest V3
  • Node.js
  • Babel
  • recast
  • PostCSS
  • npm

the result.

One debugging tool that is upfront about what a browser lets an extension see, and one published codemod that turns a repetitive, error-prone migration into a reviewable diff.