PageSurgeon • 2025
Surgical page editing, right in the browser.
- Role
- Creator and maintainer
- Timeline
- 2025
- Stack
- JavaScriptManifest V3Chrome APIs
- Status
- Open sourceChrome Web Store (in review)
Overview
The page you can see is not the page you can edit.
Getting a clean screenshot or hiding a name usually means a detour through dev tools: inspect the element, guess the selector, delete a node, hope the layout holds.
PageSurgeon turns that detour into a click. You pick a mode in the popup, hover the page, and the element under your cursor is highlighted. One click acts on it. Everything runs in your browser, on the tab you are already in, and nothing is sent anywhere.
Delete
Removes the clicked element and keeps an undo stack, so Ctrl+Z brings it back.
Edit Text
Makes the clicked element editable in place. Enter saves, Escape cancels, and clicking away saves.
Screenshot
Captures a clean PNG of the element, even when it is taller than the viewport.
Blur
Blurs sensitive elements. Select several, preview, then save them together, and the rules survive reloads.
Architecture
One hover layer, four pluggable modes.
Each mode is a small class in scripts/modes/. A controller in the content script owns the lifecycle: it injects the mode, attaches a shared hover-and-select layer, and tears everything down on Escape.
The service worker handles the few things a content script is not allowed to do, such as capturing the screen and writing files. Because all four modes reuse the same targeting layer and the same teardown path, adding a fifth mode is one class and one registration line, not a rewrite.
The real constraint is that a content script is a guest. It can touch the DOM, but it cannot capture the screen or write files. Those calls have to round-trip through the service worker.
Throughput
Screenshots taller than the viewport.
Capturing an element that fits on screen is easy: one captureVisibleTab, then crop. Capturing one that does not is where most screenshot tools fall over.
PageSurgeon scrolls the page in viewport-sized tiles and stitches them back together. Two details make the result usable. Tiles are captured with sub-pixel precision, because rounding each one to whole pixels leaves a visible seam. And fixed or sticky overlays are handled per tile, so a header or a chat widget does not repeat down the stitched image.
Sub-pixel stitching
keeps tall images free of one-pixel seams.
Overlay suppression
hides fixed and sticky elements during capture, then restores them.
Sticky reset
converts sticky ancestors to static so they appear once, at their natural position.
Scroll-and-stitch depends on the page scrolling normally. Custom scroll containers and heavy animation can still produce imperfect stitches, and the README says so rather than hiding it.
Engineering
Zero dependencies and least-privilege permissions.
PageSurgeon is Manifest V3 and native browser APIs only. There is no build step, no package manager, and no dependencies.
activeTab + scripting
run the mode scripts only on the tab you are working in.
storage
persist blur rules locally, in chrome.storage.local.
downloads
save captured PNG files to disk.
Blur is the one feature with state, and it has to survive more than a reload. Rules are re-applied by a MutationObserver as the page changes, so a blurred element stays blurred after an infinite scroll or a client-side route change.
The extension asks for the smallest set of permissions its modes need. It has no account, no server, and no API key.
Source
Code and roadmap.
The extension is open source under the MIT license. The Chrome Web Store release is in review, and the roadmap lives in the repository.
Planned work includes a manage-blurs UI, a blur intensity slider, per-rule toggles, and import and export of rules as JSON.