Element Forge

Element Forge is a dependency-free Manifest V3 browser extension for visually selecting page elements and saving persistent, per-domain rules.

What it can do

• Hide elements with an injected display: none !important rule.
• Remove matching nodes from the DOM, including matching content added later.
• Restyle elements with custom CSS declarations.
• Modify text, inner HTML, or an element attribute.
• Generate a focused CSS selector from the element you click, with an editable selector and live match count.
• Outline every matching element while choosing between a single target and similar elements.
• Save rules in chrome.storage.local and apply enabled rules automatically at document_start.
• View, edit, enable or disable, and delete rules for the current domain from the extension popup.
• Preview the original page elements behind any saved rule before its effect is automatically restored.

The extension makes no network requests and does not send page or rule data anywhere. The public manifest.key keeps the unpacked development build's extension ID stable; it is not a secret or signing credential.

The interface uses a modern pastel-red palette led by #e85d6a, the bundled pen-square.svg mark, and locally hosted Space Grotesk font files. No branding asset is loaded from the network. Space Grotesk is distributed under the SIL Open Font License 1.1 included at src/assets/fonts/OFL.txt.

Load it in Chrome or Edge

1. Open chrome://extensions in Chrome or edge://extensions in Edge.
2. Enable Developer mode.
3. Choose Load unpacked and select this project folder.
4. Open Element Forge on any normal website. Existing tabs are connected automatically when you pick an element, so a page refresh is not required.

Browser-owned pages such as chrome://settings, extension stores, and built-in PDF viewers cannot be changed by extensions.

Use it

1. Open the Element Forge popup on a normal http or https page.
2. Select Pick element.
3. Move over the page and click the element you want to target.
4. Review or edit the generated selector, choose an action, and save.
5. Open the popup again to manage the rules saved for that domain. Select a rule summary to temporarily show and highlight its original target.

Press Esc at any time to cancel the picker. Dynamic remove and modify rules keep watching for newly inserted matching elements, which makes them work on many single-page applications.

Project structure

manifest.json
src/
  assets/
    pen-square.svg      Editable vector logo source
    icons/              Generated browser toolbar/install icons
    fonts/              Local Space Grotesk font files
  shared/
    constants.js       Shared action and message names
    storage.js         Rule schema, validation, and persistence
    selector.js        CSS selector generation and match counting
    custom-select.js   Accessible, fully styled dropdown component
  content/
    rule-engine.js     Reversible rule application and DOM observation
    rule-preview.js    Temporary original-state preview and target outlines
    picker.js          Shadow-DOM-isolated picker and in-page editor
    content.js         Page bootstrap and popup messaging
  popup/
    popup.html
    popup.css
    popup.js           Per-domain rule management
scripts/check.mjs      Manifest-reference and JavaScript syntax checks
scripts/render-icons.mjs  Rebuild PNG icons from the vector logo
scripts/smoke.mjs      Isolated browser integration smoke test
test/storage.test.cjs  Rule-store behavior tests

See ICON-INVENTORY.md for every icon or symbol currently used and suggested keywords for sourcing replacement vectors.

Rule shape

Rules are stored as an array under elementForge.rules.v1 in local extension storage:

{
  "id": "generated-uuid",
  "domain": "example.com",
  "selector": ".promo-banner",
  "action": "hide",
  "payload": {},
  "enabled": true,
  "createdAt": "2026-08-27T00:00:00.000Z",
  "updatedAt": "2026-08-27T00:00:00.000Z"
}

Domains are matched exactly. A rule saved on www.example.com does not automatically run on app.example.com.

Development checks

The project uses no build step or runtime dependencies. With Node.js installed:

npm run check
npm run icons
npm test
npm run smoke

npm run check parses the manifest, verifies every referenced file exists, and syntax-checks all extension JavaScript. npm run icons regenerates all required PNG icon sizes from the SVG source. npm run smoke launches a separate temporary Edge/Chromium profile, verifies all four actions, original-state previews, multi-match outlines, auto-dismiss notices, live rule disabling, visual selection, and picker cancel on a local fixture page, then removes the temporary profile. Set CHROME_PATH to a compatible Edge, Chromium, or Chrome for Testing executable if one is installed in a nonstandard location. Official Google Chrome builds no longer allow command-line loading of unpacked extensions.

Practical limits

• Page structure can change, so selectors based on generated class names may occasionally need editing.
• The top-level picker cannot reach inside cross-origin iframes or shadow roots.
• Using Inner HTML intentionally inserts the value as markup. Only enter markup you trust.
• Some sites use very aggressive style rules; a restyle rule may need !important on individual declarations.