Skip to content

pjullrich/link-extractor

pjullrich /

Link Extractor Chrome Extension

A Chrome extension that highlights anchor tags based on CSS selectors and extracts their URLs to a CSV file.

Features

  • CSS Selector Input: Enter any CSS selector to target specific anchor tags
  • Visual Highlighting: Matching links are highlighted with a pulsing yellow background and orange border
  • URL Extraction: Extracts href attributes from matching anchor tags
  • Relative to Absolute URL Conversion: Automatically converts relative URLs (like /foo) to absolute URLs (like https://example.com/foo)
  • CSV Export: Saves extracted links to a CSV file with metadata
  • Append Mode: Each save operation appends to the CSV file rather than overwriting

Installation

  1. Open Chrome and navigate to chrome://extensions/
  2. Enable "Developer mode" in the top right corner
  3. Click "Load unpacked" button
  4. Select the data_scraper/lib/cars/extension folder
  5. The extension should now appear in your extensions list and toolbar

Usage

  1. Navigate to any webpage you want to extract links from

  2. Click the extension icon in the Chrome toolbar to open the popup

  3. Enter a CSS selector for the anchor tags you want to target. Examples:

    • a - All anchor tags
    • a.product-link - Anchor tags with class "product-link"
    • a[href*="product"] - Anchor tags with "product" in their href
    • .category a - Anchor tags inside elements with class "category"
    • #main-content a - Anchor tags inside element with id "main-content"

  4. Click "Highlight" to visually highlight matching links on the page

  5. Click "Save CSV" to extract the URLs and save them to a CSV file

  6. Click "Clear Highlights" to remove highlighting from the page

CSV Output Format

The generated CSV includes the following columns:

  • URL: The absolute URL (converted from relative if needed)
  • Original Href: The original href attribute value
  • Link Text: The visible text content of the link
  • Link Title: The title attribute of the link (if present)
  • Domain: The domain of the webpage where links were extracted
  • CSS Selector: The CSS selector that was used
  • Extracted At: Timestamp of when the extraction was performed

File Location

CSV files are saved to your default download location with the filename format:

extracted-links-YYYY-MM-DD-HH-MM.csv

Technical Details

  • Manifest Version: 3
  • Permissions: activeTab, storage, downloads
  • Host Permissions: <all_urls> (required for content script injection)

Troubleshooting

  • No links highlighted: Check that your CSS selector is correct and matches anchor tags on the page
  • CSV not downloading: Ensure Chrome has permission to download files
  • Extension not working: Try refreshing the page after installing the extension
  • Relative URLs not converting: The extension uses the current page's domain as the base for conversion

Example Selectors

  • a[class*="product"] - Links with "product" in their class name
  • a[href^="/category/"] - Links starting with "/category/"
  • .menu a, .sidebar a - Links in menu or sidebar sections
  • a:not([href^="mailto:"]) - All links except email links
  • table tr td a - Links inside table cells