DOM Runner

Attach JavaScript to DOM element conditions: run it when they're met, clean up when they're not.

DOM Runner lets you attach your own JavaScript and CSS to the elements on any web page. You pick the elements with a visual, DevTools-style picker, decide when your code should fire, and it runs automatically — then cleanly undoes itself when the conditions stop being true. Think of it as lightweight, element-aware automation: instead of writing a full userscript that waits for selectors and tears itself down by hand, you point at the elements you care about, write a few lines, and DOM Runner handles the lifecycle for you. — HOW IT WORKS — 1. Click "Add" and pick one or more elements on the page with the highlighter. 2. Give each picked element a condition: • exists — the element is present in the DOM, hidden or not. • visible — the element is actually on screen (in the viewport and not hidden). • none — don't gate on it; just expose it to your script as a variable. 3. Write JavaScript, CSS, or both. 4. When ALL of a runner's conditions are met, your code runs. When any of them is no longer met, your changes are reversed. The function you return from your JavaScript becomes the cleanup step. That means navigating away, hiding an element, or toggling the runner off neatly reverses whatever you did — a simple setup/teardown lifecycle with no leftover state. — WHY IT'S DIFFERENT — • No boilerplate. You don't write "wait for this selector, observe mutations, then clean up." DOM Runner watches the page for you and runs/undoes your code as conditions change, including on single-page apps that swap content without a full reload. • Your picked elements are handed to you. Each element you select can be given a name, and that name becomes a variable in your script pointing straight at the element — so you can get to work instead of re-querying the DOM. • You see what you're targeting. While you're editing a runner, the elements it targets are highlighted right on the page, labelled with their variable name, condition, and selector, with a green/red border showing whether the condition is currently met. — FEATURES — • Visual element picker with generated, editable CSS selectors — no digging through DevTools. • Picked elements become named variables automatically. • Three trigger conditions: exists, visible, or none. • JavaScript and CSS per runner — use either or both. CSS is applied while conditions hold and removed automatically when they don't. • Per-site scoping with URL patterns (e.g. https://example.com/*), with quick presets for "this page," "this site," and "all sites." Works correctly across in-app navigation. • Live highlighting of a runner's elements while editing, with names, conditions, and selectors. • Run status and error messages surfaced directly in the popup — if your script throws, you see the error instead of hunting through a console. • Import and export all your runners as JSON, so you can back them up or share them. • Enable or disable individual runners without deleting them. — PRIVACY — Everything stays on your device. Your runners are stored in your browser's local storage and are never transmitted anywhere. DOM Runner does not collect, track, sell, or share any data. It also never downloads or executes remote code — the only code that ever runs is the JavaScript and CSS you write yourself. — ONE-TIME SETUP — Because DOM Runner executes the code you write, Chrome requires you to grant permission first: open the extension's details page, turn on "Allow user scripts," and reload the extension. The popup walks you through this the first time you open it. This is a standard Chrome safeguard for any extension that runs user-authored scripts. — WHO IT'S FOR — DOM Runner is built for people comfortable writing a few lines of code — userscript authors, web developers, QA engineers, and tinkerers who want a fast, focused way to modify pages without a heavyweight userscript manager.