React Grab (Chrome Extension - Unofficial)

Overview

React Grab is a minimal Chrome MV3 extension that lets you enable the excellent React Grab tool on any website with a single toggle. When enabled for a tab, the extension injects the React Grab script into that page so you can Cmd/Ctrl+C‑click elements to “grab” them for your coding assistant (Cursor, Claude Code, etc.).

Features

• Per‑tab Enable/Disable toggle in the popup (no global install steps).
• Robust injection that bypasses page CSP by executing in the page’s main world.
• Auto‑reinjects after navigation/refresh while the tab remains enabled.
• Toolbar icon reflects enabled/disabled state per tab.

How It Works

• manifest.json (MV3)
  • Background service worker injects the React Grab script using chrome.scripting.executeScript in the page’s MAIN world.
  • Popup provides a single, per‑tab toggle (no URL configuration).
  • Permissions: scripting, storage, tabs; host_permissions: <all_urls>.
• src/background.js
  • Executes a packaged, pinned build of React Grab (vendor/react-grab.js) in the page’s MAIN world. Store builds avoid remote code by design.
  • Calls ReactGrab.init() and stores a disposer for clean removal when disabled.
  • Persists the per‑tab enabled state in chrome.storage.session and reinjects on reload for enabled tabs.
  • Updates the toolbar icon per tab.
• src/popup/*
  • A small UI with an iOS‑style toggle and brand styling.

Installation (Load Unpacked)

1. Open chrome://extensions.
2. Enable “Developer mode”.
3. Click “Load unpacked” and select the project folder.
4. Pin the extension. Use the popup to toggle “Enabled on this tab”.

Usage

• Enable on a tab, then hold Cmd/Ctrl+C and click any element to grab it.
• The icon shows pink when enabled and grey when disabled.
• Refreshes and navigations keep React Grab active on tabs you’ve enabled.

Notes & Limitations

• Special pages (e.g., chrome://*, the Chrome Web Store) do not allow script execution; the toggle will show disabled there.
• The extensions overflow menu icon is global and may not reflect per‑tab state; the pinned toolbar icon is authoritative.
• The Store build uses a pinned, packaged script (no remote code). During local development you may switch to a CDN flow if needed, but publish with the packaged file.

Privacy

• No analytics, no external telemetry, and no data leaves your machine.
• The extension only injects the publicly available React Grab script into pages you explicitly enable via the popup.

Development

• Background: src/background.js
• Popup UI: src/popup/
• Icons: icons/ (enabled/disabled sets)
• Vendor: vendor/react-grab.js (pinned React Grab global build)

Troubleshooting

• If React Grab doesn’t appear to work:
  • Toggle off/on in the popup.
  • Check DevTools Console for network or script errors.
  • Verify the site isn’t a restricted Chrome page.

Attribution

• React Grab is created by Aiden Bai and contributors.
  • Project: https://github.com/aidenybai/react-grab
  • Website: https://react-grab.com/
  • License: MIT (see the React Grab repository for details)
• This extension is a community‑built injector and is not affiliated with or endorsed by Aiden Bai or the React Grab project.
• React Grab name and logo are trademarks of their respective owners and used here for identification only.

License

Unless stated otherwise, this extension code is provided under the MIT License. The React Grab library it injects is licensed separately under its own MIT License.