ScrapeTarget Pro

Precisely target and extract unique CSS selectors, XPath, and scraper code for any element on any website.

ScrapeTarget Pro is a developer-grade visual inspector and automation toolkit that eliminates the friction of finding resilient CSS selectors, XPath queries, and data extraction code. Stop wrestling with browser DevTools, fragile autogenerated IDs, and broken web scrapers. Simply hover and click any element on any webpage or online store to inspect computed styles, analyze CSS box model dimensions, generate resilient selectors, test selector durability in real time, and export production-ready code for your favorite scraping and testing frameworks. Whether you are building data pipelines with Python Playwright, extracting product catalogs with BeautifulSoup or Scrapy, or writing end-to-end tests with Puppeteer or Selenium, ScrapeTarget Pro streamlines your entire workflow from browser to codebase. ============================================================ KEY FEATURES ============================================================ 1. SMART & RESILIENT SELECTOR ENGINE * Automatic Dynamic ID Filtering: Intelligently detects and filters out ephemeral and volatile IDs (such as React 18 :r1:, Ember, Amazon autoids, and dynamic GUID hashes) that break when a page reloads. * CSS.escape() Sanitization: Automatically sanitizes special characters and symbols in class names and element IDs to prevent runtime query crashes. * Semantic Attribute Prioritization: Prioritizes stable, test-friendly attributes (data-testid, data-qa, data-cy, itemprop, name, aria-label) over volatile utility classes. * Robustness & Fragility Scoring (0-100): Mathematical heuristic scoring that rates each selector as Robust, Moderate, or Fragile, complete with risk breakdowns to help you avoid flaky selectors. * Strategy Selector: Easily switch between Auto-Resilient, Prefer data-testid, Prefer itemprop/name, Prefer Classes, or Strict ID Anchoring. * Live Match Counter: Evaluates selectors against the live DOM in real time, alerting you immediately if a selector matches 1 unique element, multiple elements, or 0 elements. * Repeating Grid / Catalog Detector: Instantly detects repeating sibling cards across e-commerce product grids, news feeds, and search listings with a single-click "Copy Grid Selector" banner. 2. MULTI-FRAMEWORK AUTOMATION CODE GENERATION Generate clean, production-ready syntax in one click: * Raw CSS: Clean, minimal unique CSS selectors. * Playwright: page.locator('...') snippets ready for Python, JavaScript, and TypeScript test suites. * Python BeautifulSoup: soup.select_one('...') and soup.select('...') statements. * Puppeteer: await page.$('...') and await page.$$('...') syntax. * Selenium (Python): driver.find_element(By.CSS_SELECTOR, '...') code. * Scrapy: response.css('...') and response.xpath('...') selectors. * XPath: Relative and absolute XPath expressions evaluated live with document.evaluate. 3. VISUAL ELEMENT DETAILS & COMPUTED STYLES * Visual CSS Box Model Diagram: Color-coded nested interactive diagram displaying computed Margins, Borders, Padding, and Content dimensions. * Hero Metric Summary: Instant glance at bounding box dimensions (width x height), display mode, positioning, attribute counts, and text metrics. * Bento Grid Geometry: Detailed bounding rects, client size, offset size, aspect ratio, z-index, and cursor styles. * Live Visuals & Typography: Font families, font sizes, font weights, line heights, text alignment, and live color preview swatches for text, backgrounds, and box shadows. * Full HTML Attributes Table: Inspect every attribute on the element with one-click "Copy Value" and "Copy [attr=value]" buttons. 4. TEXT VIEWER & TARGETED SCRAPING FUNCTIONS * Interactive Text Viewer: Built-in text workspace showing exact character, word, and line counts. * 1-Click Clean Text: Normalize whitespace and collapse line breaks into clean single-line strings for structured data pipelines. * 1-Click Select All: Highlight and copy full multi-line text without missing hidden elements. * Element-Specific Action Snippets: - Input & Textarea: .input_value(), .fill(), and .send_keys() code snippets. - Links & Images: Direct extraction snippets for href and src attributes. - Buttons & Links: Ready-to-run .click() trigger snippets. 5. RECIPE BUILDER (MULTI-FIELD SCRAPER WORKFLOW) Turn browsing sessions into complete, executable scraping scripts: * Inspect multiple elements across a page and add them to a structured recipe schema (e.g., title, price, rating, image_url, description). * Live preview of extracted data samples for every field in real time. * Export to JSON: Reusable scraper recipe schema (scraper_recipe.json). * Export to CSV: Spreadsheet containing field names, selectors, and captured data samples. * Export to Playwright Script: Fully runnable standalone Python script (scrape_playwright.py) with browser setup, page navigation, and extraction loop. * Export to BeautifulSoup Script: Lightweight Python script (scrape_soup.py) using requests and bs4. * Export to Page Object Model (POM): Clean Python test automation class (target_page_pom.py). 6. BATCH SELECTOR HEALING SUITE * Audit existing scrapers without digging through logs. * Paste your current list of CSS selectors or scraping scripts into the batch healer. * Instantly checks every selector against the live page DOM and flags them as: - Alive (Unique 1-to-1 match) - Multiple Matches (Requires disambiguation) - Broken (0 matches found) * Provides auto-repair suggestions to fix obsolete selectors on site redesigns. ============================================================ BUILT FOR DEVELOPERS (FIT & FINISH) ============================================================ * 100% Shadow DOM Encapsulation: The entire extension UI lives inside an isolated open Shadow Root. Host page CSS (Shopify themes, Tailwind resets, Bootstrap) will never distort the extension, and extension styles will never alter the target page. * Unified Scroll Architecture: Clean single-scroll container design with no awkward nested scrollbars. * Universal Text Wrapping: Long selectors and nested code strings never overflow or truncate offscreen. * Quick Right-Click Context Menu: - "Copy CSS Selector" (copies selector directly without opening the modal) - "Copy XPath" (copies clean relative XPath) - "Inspect in ScrapeTarget Modal" (instantly opens deep inspection on the right-clicked node) * Global Keyboard Shortcuts: - Alt + Shift + S: Toggle the inspector on any active tab. - Escape: Instantly close the modal or exit inspection mode. - Arrow Up / Arrow Down: Walk up to parent container or drill down to child elements while hovering. * Navigation Protection: Safely click buttons, navigation links, and dropdowns while inspecting without triggering accidental page redirects. ============================================================ HOW TO USE ============================================================ 1. Activate: Click the ScrapeTarget Pro icon in your Chrome toolbar or press Alt + Shift + S. The toolbar badge will show purple "ON". 2. Inspect: Move your cursor over any element on the page. Use Arrow Up and Arrow Down to traverse parent and child elements. 3. Select: Click the element to open the inspector card. 4. Export: Copy your preferred selector, grab clean text, or add the element to your multi-field Recipe Builder. 5. Close: Hit Escape or click the close button to return to standard browsing. ============================================================ PRIVACY & PERMISSIONS ============================================================ ScrapeTarget Pro is 100% local, private, and offline-first: * No external tracking, analytics, or third-party servers. * Your browsing history, scraped data, and URLs never leave your browser. Permissions used: - activeTab & scripting: Allows ScrapeTarget Pro to highlight and inspect DOM elements only on the specific tab you choose to activate. - storage: Saves your UI preferences (preferred framework tab, attribute strategy, and active recipes) locally on your machine. - contextMenus: Provides right-click shortcuts to copy CSS/XPath directly from the page context menu. ================================================================================ Changelog ================================================================================ ================================================================================ Version 1.3.0 (2026-09-18) ================================================================================ [Added] * Default Landing Page: Modal defaults to opening the "Element Details & Styles" tab on every element inspection. * Enlarged Tactile Navigation Bar: - Raised button heights with generous padding, 14px bold typography, and 18px icons. - Frosted dark glass pill design with active vibrant indigo gradient and top rim illumination. - Responsive, wrap-safe layout preventing collisions on smaller laptop viewports. * Hero Element Summary Card: - Live metric chips: dimensions (width x height), display mode, CSS position, total attribute count, word and character counts. - Direct "+ Add to Recipe" action button directly in the hero header. * Visual CSS Box Model Diagram: - Color-coded nested visual diagram displaying computed Margins (amber dashed), Borders (indigo solid), Padding (emerald dashed), and Content (sky blue solid) dimensions. * Bento Grid Specifications: - Dimensions & Geometry: Bounding size, client size, offset size, aspect ratio, z-index, cursor style. - Colors & Visual Effects: Live color preview swatches for text & background, border-radius, box-shadows, opacity, visibility. - Typography: Font family, size, weight, line-height, text alignment. * All HTML Attributes Table: - Complete inventory of all element attributes with 1-click "Copy Value" and "Copy [attr=value]" buttons. * Dedicated Text & Scraping Functions Tab: - Interactive textarea text viewer with real-time word, character, and line count statistics. - 1-Click "Select All Text" with visual highlighting and instant clipboard copy. - "Copy Clean (Single Line)" for whitespace-normalized scraping targets. - "Copy Full Text" preserving multi-line structure. - Element-tailored ready-to-run scraping code snippets (Playwright, BeautifulSoup, Puppeteer, Scrapy, Selenium). - Input/textarea value extraction and typing actions (.input_value(), .fill(), .get('value'), .send_keys()). - Link/image attribute extraction (href, src). - Button/clickable element click actions (.click()). * Universal Text Wrapping: - Comprehensive text wrapping applied across all code rows, tables, pills, and text boxes to prevent horizontal overflow. [Changed] * Single Unified Scroll Container: - Completely eliminated nested scrolling ("3 scrolling sections" issue). - The modal card has one dedicated vertical scroll container with custom sleek dark scrollbars. * Non-Overlapping Header Architecture: - Header split into two distinct rows: brand & element pill on top, enlarged segmented navigation bar below. - Element tag pill constrained with maximum width and text ellipsis so it never collides with the close button or keyboard shortcut tips. [Fixed] * Unescaped Quotes & Premature HTML Tag Closures: - Fixed HTML corruption in the Text & Scraping Functions tab where selectors containing double quotes ([data-testid="..."]) or child combinators (>) broke data attributes and prematurely closed button tags. * Shadow DOM Text Selection: - Replaced static element with an interactive textarea so text selection (focus() + select()) works 100% reliably inside Chrome Shadow DOM. * Tag Safety in getTextAndStats: - Added safety guards for input values, placeholder text, select options, and non-standard DOM nodes (SVG, MathML). ================================================================================ Version 1.2.0 (2026-09-18) ================================================================================ [Added] * Right-Click Context Menu: - Added "Copy CSS Selector", "Copy XPath", and "Inspect in ScrapeTarget Modal" context menu entries. - Cached target element on contextmenu events in content script. * Shadow DOM Toast Notification System: - Floating toast notification confirming copy and recipe actions with micro-animations. * Robustness & Fragility Scoring (0-100): - Mathematical heuristic evaluating selector durability based on IDs, test IDs, path depth, positional :nth-of-type chains, and dynamic hashes. - Visual badges (Robust, Moderate, Fragile) with explanatory risk breakdown tooltips. * Attribute Priority Strategy: - Interactive dropdown strategy: Auto-Resilient, Prefer data-testid, Prefer itemprop/name, Prefer Classes, or Strict ID. * Repeating Container / Grid Auto-Detector: - Auto-detects repeating sibling cards (e.g., product grids, catalogs, tables) and displays a one-click "Copy Grid Selector" banner. * Recipe Builder (Multi-Field Scraper Mode): - Multi-field schema builder with live data sample extraction and persistent storage via chrome.storage.local. - One-click multi-format exports: JSON schema (scraper_recipe.json), CSV spreadsheet (scraper_recipe.csv), runnable Playwright Python script (scrape_playwright.py), runnable BeautifulSoup Python script (scrape_soup.py), and Page Object Model class (target_page_pom.py). * Batch Selector Healing Tool: - Live batch verification suite to test existing scripts or selector lists against the current page DOM in one pass. * Auto-Script Injection: - Dynamic injection via chrome.scripting.executeScript for tabs opened prior to extension reload. * Settings & Tab Persistence: - Automatically restores user's preferred code tab and attribute priority across sessions via chrome.storage.local. ================================================================================ Version 1.1.0 (2026-09-17) ================================================================================ [Added] * Visual Highlighter: - Floating DOM highlight overlay with high-contrast borders and badge labels. * Multi-Framework Code Generation: - Added code generation tabs for Raw CSS, Playwright, BeautifulSoup, Puppeteer, Selenium, Scrapy, and XPath. * DOM Ancestry Hierarchy Tree: - Interactive parent container list displaying path levels and match counts. [Fixed] * Restricted URL Detection: - Resolved false-positive "restricted browser page" warning on standard web pages. ================================================================================ Version 1.0.0 (2026-09-17) ================================================================================ [Initial Release] * Initial release of ScrapeTarget Pro Chrome Extension (Manifest V3). * Visual inspector overlay using isolated Shadow DOM encapsulation. * Unique CSS selector and relative/absolute XPath generation. * Real-time match count indicator and popup toggle interface. ================================================================================