[Feature]: Custom DOM Selector/XPath Extraction — copy any page element or open URLs with {{content}}

[miguelcorderocollar]

Feature Category

• New Integration (website/platform support)
• User Interface (popup, options page, button)
• Settings / Configuration

Problem or Use Case

I want to extract specific pieces of content from any webpage using CSS selectors or XPath expressions, without needing a full HTTP API endpoint. The existing Custom API feature works great for sending content to a remote server, but there's no equivalent for lightweight on-page extraction that doesn't involve a server.

Example use cases:

1. YouTube: Copy just the video title from a YouTube page (a common need before searching lyrics on Genius, or searching Google for more info about the video).
2. Any site: Grab specific metadata, prices, headlines, etc. from structured pages and copy them to clipboard.
3. Search shortcuts: Select a page title/headline, then open https://google.com/search?q={{content}} or https://genius.com/search?q={{content}} in a new tab.

Proposed Solution

Add a "Custom Selector Extraction" feature, following a similar pattern to the existing Custom API integration but focused on DOM selection instead of HTTP requests. Specifically:

1. Settings Page (Options)

• A new section/tab alongside "Custom API Integrations" (e.g. "Custom Selectors")
• Profile-based approach, same as API profiles:
  • Name — human-readable label
  • Enabled toggle
  • Selector type: dropdown — css or xpath
  • Selector / Expression — input for the CSS selector or XPath expression. CSS supports .class, #id, tag, [attribute], div > p.class, etc. XPath supports paths like //h1, //div[@class="title"], //a[contains(text(),'more')], etc.
  • Selector mode: first (only first match) or all (concatenate all matches)
  • Target attribute (optional): extract an attribute value (e.g. href, src, data-*) instead of textContent. Default is textContent / innerText.
  • Action: dropdown with options:
    • copy — copy extracted content to clipboard
    • open-url — open a URL with {{content}} as placeholder
  • URL template (only when action is open-url): e.g. https://google.com/search?q={{content}}
  • New tab vs same tab toggle (only for open-url)
  • Title (optional): a short label that will appear on the floating button's secondary action menu

2. Floating Button Distinction

• The Custom API secondary actions already show a dedicated icon (api.svg) — Custom Selector actions should have a visually distinct icon (e.g. a "target"/crosshair or "selector" icon) so users can immediately tell them apart.
• The secondary actions menu should have a clear separator or grouping label (e.g. "API Actions" vs "Selector Actions").

3. Content Script Integration

• When a Custom Selector profile is enabled:
  • The floating button gains a secondary action bubble (distinct icon).
  • On click, it runs document.querySelector / document.querySelectorAll (for CSS) or document.evaluate (for XPath) using the configured expression.
  • If action is copy, it writes to navigator.clipboard and shows success/error feedback on the button (like existing API actions do).
  • If action is open-url, it replaces {{content}} with the extracted text (URL-encoded) and opens in new/current tab.

4. Supported Variable

• {{content}} — the extracted text/attribute value from the selected DOM element(s). If selectorMode is all, this would be joined with newlines or a configurable separator.

Alternatives Considered

1. Manual copy-paste: Works but is slow and multi-step. Doesn't enable the "search with content" workflow.
2. Universal Extractor: Extracts the whole page as Markdown — overkill when you just want one element.
3. User scripts / custom bookmarklets: Fragile, not integrated with the extension's UI, no visual feedback.
4. Existing Custom API with a local server: Could technically work (run a local HTTP server and POST content to it), but it's heavyweight, requires setup, and doesn't enable the copy-to-clipboard use case.

Impact

Medium — useful for many users who want to grab specific content from pages without setting up an API endpoint.

Additional Context

This feature is conceptually similar to the existing Custom API (feat/generic-api-config-62-63) feature, so it could reuse much of the same infrastructure:

• Same profile-based storage model
• Same secondary-action bubble pattern in FloatingButton
• Same enable/disable toggle pattern
• Same template variable substitution ({{content}})

The key difference: instead of building an HTTP request, it runs document.querySelector() and either copies to clipboard or opens a URL.

This would transform ExtractMD from a "page-to-markdown" tool into also a "pick-any-element" utility, greatly expanding its usefulness for power users.

Why XPath matters

XPath complements CSS selectors where CSS falls short — selecting by text content (//button[contains(text(),'Submit')]), navigating to parent/sibling elements (//h1/following-sibling::p), matching by partial attribute values more flexibly, and indexing (e.g. (//div[@class="item"])[2]). Offering both gives users the right tool for any DOM structure.