feat: Chrome Extension Enhancements & Documentation #29
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Author
|
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. 🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
Testing