Elements

Hide distractions, edit visible text, and restyle page elements.
Your rules stay in browser-managed storage and apply again on your next visit.

Interface · Features · Quick start · Documentation

Interface

Features

Pick precisely Hover to preview, click to lock, then choose an action. Use Q and W to move through parent and child layers without losing the active breadcrumb.

Change what you see Hide blocks, replace visible text, round corners, blur, dim, desaturate, or add sanitized custom CSS. Undo and redo cover every rule change.

Keep it local Save rules per site, pause them without deleting them, and export a JSON backup. Private-window changes remain temporary.

The picker opens from the toolbar or with Ctrl/Cmd+Shift+X. Its layout adapts from a desktop corner panel to a touch-sized bottom sheet, with light, dark, and system themes throughout the extension.

Quick start

Download

The latest release contains the unsigned Chrome and Chromium build.

Browser	Archive	Intended use
Chrome and Chromium	elements-1.0.0-chrome.zip	Unpack and load from the extensions page

Chrome Web Store distribution still requires its signing and review process.

Install

1. Download and unpack the Chrome archive.
2. Open chrome://extensions.
3. Enable Developer mode.
4. Select Load unpacked, then choose the extracted folder.

Permissions and privacy

Permission	Purpose
storage	Save rules and settings in browser-managed extension storage
scripting	Start Elements in a compatible tab that was already open
*://*/*	Reapply user-created rules on HTTP and HTTPS sites

Elements has no analytics, advertising, remote code, or developer-operated backend. It does not send saved rules or page contents to the developer. Browser sync may process saved data when available; Elements falls back to local storage when data is too large or sync is unavailable. See the Privacy Policy for the complete data-handling description.

Development

Requirements: Node.js 22 and npm.

npm ci
npm run validate
npm run build:chrome
npm run verify:build

For local development, run npm run dev. WXT generates manifests and build directories; the repository intentionally has no root manifest.json. Load .output/chrome-mv3 from chrome://extensions.

The Chromium end-to-end suite drives a built extension:

npx playwright install --no-shell chromium
npm run build:chrome
npm run test:e2e
npm run test:site
npm run site:serve

npm run test:site checks the public product page at desktop and narrow viewports, including its demo, product tour, accessibility, and reduced-motion fallback. npm run site:serve opens the static site at http://127.0.0.1:4173 for local review. npm run screenshots refreshes the product images used by the documentation and GitHub Pages after the Chrome build.

Architecture

Elements uses WXT, TypeScript, React, and the Manifest V3 extension model.

entrypoints/
  background.ts          persistent-write owner and browser integration
  content.ts             lightweight content-script entrypoint
  elements-ui.tsx        lazy picker application
  options/               settings and saved-rule management
  onboarding/            first-run guide
src/
  core/                  storage, data contracts, themes, protocol
  content/               selector engine, rule engine, controller, overlay
  components/            shared UI components
  theme/                 shared design tokens

The background service worker validates a versioned message protocol and owns persistent writes. The page controller compiles visual rules into an isolated stylesheet; reversible text wrappers retain original DOM nodes and listeners. React is loaded into the picker only after activation.

Releasing

npm run validate
npm run audit:all
npm run release:archives
npm run verify:build
npm run verify:release -- v1.0.0

A v* tag runs the full release workflow, including Chromium E2E tests, and publishes the Chrome archive with notes taken from CHANGELOG.md.

Current limitations

• The published build targets Chrome and compatible Chromium browsers only.
• Chrome Web Store distribution still requires its signing and review process.
• Installation from GitHub uses an unsigned archive and Chrome's developer mode.

Documentation

• Product and user Wiki
• Documentation index
• Building from source
• Architecture
• Dependencies
• Troubleshooting
• Contributing guide
• Changelog
• Privacy Policy
• Terms of Use
• Security Policy
• Third-party notices
• MIT License

Support

Elements is maintained by Nikita Melnychenko (QenTerra). If it saves you time, you can buy me a coffee.

Bug reports and focused pull requests are welcome. Read CONTRIBUTING.md before opening one and use SECURITY.md for private vulnerability reports.

License

Elements source code is available under the MIT License. Runtime, build, and website dependencies remain subject to their own licenses; see Third-party notices.