@parenta/dom-picker

Hover-to-pick DOM element data-id / CSS selector copier.

Importing the package installs a global keyboard-driven picker on the page. There is no configuration: import it and it runs.

Install

npm install @parenta/dom-picker

Use (npm-built apps — Angular, React, etc.)

import '@parenta/dom-picker';

That's it. The package auto-installs on import and is idempotent — re-importing is safe.

If you want to gate activation by environment (e.g. only load on *.parenta-agents.co.uk), do the gating at the consumer:

const host = window.location.hostname;
if (host === 'localhost' || host.endsWith('.parenta-agents.co.uk')) {
  await import('@parenta/dom-picker');
}

Use (vanilla <script> — legacy sites)

The package ships a self-installing IIFE bundle at dist/index.iife.js. Drop it into your static assets and load it like any other script:

<script src="/scripts/@parenta/dom-picker.js?v=1.1.0"></script>

The IIFE bundle auto-installs the same way the npm entrypoint does.

Keys

| Key | Effect | |---|---| | F9 | Toggle the picker panel (top-right). | | Shift (hold) | Highlight nearest ancestor with a data-id. | | Shift + click | Copy the data-id selector and prevent the click. | | Ctrl (hold) | Highlight + show an extended CSS path ([data-id='X'] > div > span). | | Ctrl + click | Copy the extended selector and prevent the click. |

The extended selector anchors on the nearest ancestor with a data-id or an id (data-id preferred) and builds the path down from there — e.g. #ctl00_Grid > tbody > tr > td > input:nth-child(4) or [data-id='invoice-row-42'] > td > span:nth-child(2). Only when no ancestor has a data-id or id does it fall back to a full body > … > leaf path built from tag + class + :nth-child segments.

Panel options

| Option | Effect | |---|---| | Include page URL in copied text | When ticked, every copy is a labelled two-line block:Page URL: <url>Element selector: <selector>The setting is remembered across reloads via localStorage (parenta-dom-picker-include-url). |

Build

npm install
npm run build

Produces:

| File | Format | |---|---| | dist/index.cjs.js | CommonJS (Node require) | | dist/index.esm.js | ESM (browser / modern bundlers) | | dist/index.iife.js | Self-executing IIFE (<script> tag) — minified | | dist/index.d.ts | TypeScript types |

Versioning

This package follows semver. Bump the version in package.json, tag the release as dom-picker-v<version> from the MegaProj root, and the publish workflow runs.

License

MIT.