Skip to content

Refactor popup, add error boundary, linting, and UX improvements#1

Open
ndcorder wants to merge 6 commits intoMaskyS:mainfrom
ndcorder:main
Open

Refactor popup, add error boundary, linting, and UX improvements#1
ndcorder wants to merge 6 commits intoMaskyS:mainfrom
ndcorder:main

Conversation

@ndcorder
Copy link

Summary

This PR improves code quality, developer experience, and end-user UX across six changes:

Code quality

  • Component extraction — Split the 1887-line monolithic popup/index.tsx into 9 focused modules: separate components (ScrapeView, CrawlView, ScrapeOptions, ResultCard, ApiKeyEditor, Toast), a shared hook (usePopupLogic), utilities, and styles
  • React Error Boundary — Wraps the popup in an error boundary with a styled fallback UI and "Try again" button, preventing silent crashes
  • ESLint + Prettier — Added ESLint v9 flat config with typescript-eslint and react-hooks plugin, plus Prettier. New scripts: lint, lint:fix, format, format:check, typecheck. Fixed all existing lint errors (unused imports, regex escape)

Features

  • API key validation — Validates the key against the Firecrawl credits endpoint before saving. Shows inline loading/error feedback; only persists if validation passes
  • Keyboard shortcutsCmd/Ctrl+Enter triggers scrape or crawl (depending on active tab), Escape closes the options panel or API key editor. Shortcut hints shown below action buttons
  • Crawl progress — Displays live page count during crawls ("X pages crawled / Y total") in the status area, using data already accumulated in state

Test plan

  • npm run build produces a working Chrome extension
  • npx plasmo package --target=firefox-mv3 produces a working Firefox extension
  • npm run lint passes with 0 errors
  • Scrape flow works: enter API key (validation fires), scrape a page, copy/download result
  • Crawl flow works: start crawl, verify page count updates live, auto-download on completion
  • Keyboard shortcuts: Cmd+Enter triggers action, Escape closes panels
  • Bad API key shows inline error, good key saves and hides editor
  • Trigger a render error (e.g. temporarily break a component) to verify error boundary fallback

- Extract styles, hook, and utilities from 1887-line index.tsx into separate files
- Create ScrapeView, CrawlView, ScrapeOptions, ResultCard, ApiKeyEditor, Toast components
- Reduce index.tsx to ~570 lines of orchestration and effects
- Catch render errors with a styled fallback UI and "Try again" button
- Wrap QueryClientProvider with ErrorBoundary in the root component
- Log errors to console for debugging
- Configure ESLint v9 flat config with typescript-eslint and react-hooks plugin
- Add Prettier config and format all source files
- Fix unused imports (R in download.ts, status in firecrawl.ts) and regex escape
- Add typecheck, lint, lint:fix, format, and format:check scripts
- Validate key against Firecrawl credits endpoint before persisting
- Show loading state ("Validating...") and error feedback inline
- Only save to storage if validation succeeds
- Cmd/Ctrl+Enter triggers scrape or crawl depending on active tab
- Escape closes API key editor or options panel
- Show shortcut hint below action buttons
- Display pages crawled count in crawl status area
- Show total pages from API response when available
- Add total/completed fields to FirecrawlCrawlStatus type
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.

1 participant