feat: Chrome Extension Enhancements & Documentation#29
feat: Chrome Extension Enhancements & Documentation#29creativerezz wants to merge 6 commits intoaidenybai:mainfrom
Conversation
Introduce a new @react-grab/chrome-extension package that implements a Chrome extension to capture DOM elements and send them to the React Grab adapter. Highlights: - Add manifest.json (MV3) with content script, service worker, permissions, action popup and web_accessible_resources. - Add package.json with build/dev scripts and dependencies. - Add scripts/generate-icons.sh to generate extension icons from favicon.ico (requires ImageMagick). - Implement chrome adapter (src/adapters/chrome.ts) to send captured elements to the extension background. - Implement background service worker (src/background.ts) to persist captured elements, show notifications and update action badge; handle runtime messages (capture, list, clear, delete). - Add content script (src/content.ts) that initializes react-grab using stored settings, listens for storage changes and registers the chrome adapter. - Add popup UI: popup.html and popup.ts to view/copy/delete captured elements and manage extension settings (enabled, hotkey, hold duration); live updates via chrome.storage changes. - Add TypeScript tooling: tsconfig.json and tsup.config.ts to bundle content, background and popup into dist; copy manifest/popup on build. - Bundle output targets and build helpers configured; icons directory created in dist but icon files are expected to be generated/copied during build. This commit scaffolds the full Chrome extension integration for React Grab, including message flows, storage, UI and build pipeline.
…& fullscreen) - add html2canvas dependency and update pnpm-lock - implement captureElementScreenshot & generateElementSelector utils - add chrome-enhanced adapter with trackHoveredElement to capture screenshots & selectors - update content/background to use enhanced adapter and clean up tracker - add thumbnails, placeholder, and fullscreen modal to popup (UI + handlers) - persist screenshot and elementSelector in captured elements - add VISUAL_PREVIEWS.md documenting feature and implementation
…ates, toasts, validation & UX improvements; add docs - Add robust try/catch handling for settings/elements loading and init recovery - Return result types for loadSettings/loadCapturedElements and add DEFAULT_SETTINGS - Implement loading state, inline error UI with retry, and fatal init recovery (reload) - Add toast notifications (success/error/info) and button state feedback (disabled text) - Add input validation for hotkey and duration, with user feedback and persistence - Escape HTML content and lazy-load thumbnails to mitigate XSS and improve perf - Improve element actions: copy feedback, delete confirmation/feedback, "Clear All" confirmation - Minor DOM/query null-safety and UX tweaks (titles, placeholders, timestamps) - Add POPUP_IMPROVEMENTS.md documenting changes and testing notes
…n, and update chrome extension manifest.
|
@creativerezz is attempting to deploy a commit to the Million Team on Vercel. A member of the Team first needs to authorize it. |
|
Hey @aidenybai! 👋 I've added a complete Chrome extension implementation for React Grab with some exciting features: Key Features
Check out the demo GIF in the README to see it in action! Would love to hear your thoughts on this contribution. 🚀 |
There was a problem hiding this comment.
Hey! You shouldn't commit your settings.local.json file.
I recommend creating a global ~/.gitignore file to catch the CLAUDE.local.md and settings.local.json files.
Typically the versions without *.local* are the ones committed in a repository if that is the standard for that particular repo.
There was a problem hiding this comment.
Same in relation to my comment above. I would remove this too if you're hoping for anything to get merged. I'm not a maintainer. Just a passerby.
|
I am curious if there is a reason for an extension. In some instances I assume it could be hard to install a tool like react-grab in a project depending on seniority/approval from others. But it might be good to also create a "Why a Chrome Extension" and list of pros/cons versus the npm package approach. |
2 participants
Changes
Testing