Skip to content

feat: add screenshot OCR URL detection using Tesseract.js#165

Open
shresthbhargava wants to merge 1 commit into
Mrinalray:mainfrom
shresthbhargava:feat/screenshot-url-detection
Open

feat: add screenshot OCR URL detection using Tesseract.js#165
shresthbhargava wants to merge 1 commit into
Mrinalray:mainfrom
shresthbhargava:feat/screenshot-url-detection

Conversation

@shresthbhargava

Copy link
Copy Markdown
Contributor

Closes #147

What's Changed

index.html

  • Added screenshot upload section between the example chips and result div
  • Drag & drop zone with visual feedback (border highlight on hover/drag)
  • Hidden file input triggered by click or keyboard (Enter/Space) for accessibility
  • Tesseract.js CDN loaded via jsDelivr (v5) — no npm install needed
  • aria-live="polite" on result area so screen readers announce extracted URLs

script.js

Added full screenshot OCR URL detection module:

  • handleDragOver / handleDragLeave / handleDrop — drag and drop handlers
  • handleScreenshotUpload — file input change handler
  • processScreenshot(file) — reads image via FileReader, draws to canvas, passes to Tesseract.js OCR with live progress %
  • extractUrlsFromText(text) — regex extracts URLs from raw OCR text, deduplicates, strips trailing punctuation, filters noise (version numbers, too-short strings), caps at 10 results
  • showScreenshotUrls(urls) — renders extracted URLs as a list with individual Scan buttons
  • scanExtractedUrl(url) — fills the URL input with the extracted URL and triggers checkSecurity() automatically

style.css

  • .screenshot-dropzone — dashed border drop zone with hover/dragover highlight
  • .screenshot-divider — "or" divider between URL input and screenshot upload
  • .screenshot-urls-found — card showing extracted URLs
  • .screenshot-url-item — individual URL row with scan button
  • .screenshot-scan-btn — styled scan button per URL
  • .screenshot-processing / .screenshot-error / .screenshot-no-urls — state styles

Behavior

  • User drags & drops or clicks to upload a screenshot (JPG, PNG, WEBP)
  • Tesseract.js runs OCR entirely in the browser — no server calls, no data sent externally
  • Progress percentage shown while OCR runs
  • Extracted URLs listed with individual Scan buttons
  • Clicking Scan fills the main input and triggers the existing security check flow
  • If no URLs found, a helpful message is shown
  • All interactions keyboard accessible

Note

Website Preview Sandbox (headless browser screenshot) is not included in this PR as it requires Puppeteer (~300MB server dependency). Can be implemented as a follow-up if the maintainer wants it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Screenshot-Based URL Detection & Safe Website Preview Sandbox

1 participant