Add React Grab inject button to browser toolbar (#2373)
* Add React Grab inject button to browser toolbar Adds a toolbar button (cursor click icon) that injects the react-grab script (unpkg.com/react-grab/dist/index.global.js) into the current page. Hover over React elements and Cmd+C to copy component context (file, component name, line number) for AI agents. Button highlights when active, resets on navigation. * Auto-activate selection mode on React Grab inject First click: injects the script and auto-activates selection mode via the react-grab:init event. Subsequent clicks toggle selection mode on/off via window.__REACT_GRAB__.toggle(). * Bridge React Grab state back to Swift via WKScriptMessageHandler Register a cmux-bridge plugin after injecting react-grab that posts state changes back to Swift via webkit.messageHandlers. The button now highlights accent color only when selection mode is actually active (not just when the script is loaded), and deactivates when the user exits selection mode via Escape or the react-grab toolbar. * Fetch react-grab script via URLSession to bypass CSP Sites like vercel.com block loading external scripts via CSP headers. Fetch the script with URLSession (not subject to page CSP), cache it, and inject inline via evaluateJavaScript. Also guard against duplicate injection on repeated clicks. * Prefetch react-grab script on first browser panel init Kick off a low-priority background fetch of the react-grab script when the first BrowserPanel is created. The script is cached statically so clicking the button is instant. * Eliminate react-grab button and callback lag Three changes: 1. Fire-and-forget: use evaluateJavaScript with completionHandler instead of await, so button taps return immediately. 2. Single JS payload: combine bootstrap listener + script source into one evaluateJavaScript call (one IPC round-trip, not two). 3. Dedupe state callbacks: only post webkit message when isActive actually changes, not on every hover/drag state update. * Fix duplicate state callback on react-grab toggle toggleReactGrab was sending an explicit postMessage AND the plugin's onStateChange hook was firing too, causing two @Published updates per toggle. Remove the explicit postMessage since the plugin hook handles it. Also add dlog instrumentation for debugging. * Add Cmd+Shift+G shortcut for React Grab (configurable) - Add toggleReactGrab to KeyboardShortcutSettings with Cmd+Shift+G default - Add View menu item with customizable shortcut - Add command palette entry (searchable as "react grab" or "inspect element") - Simplify button to use toggleOrInjectReactGrab, remove local state tracking * Fix Codex review findings: pin version, verify hash, fix retry and state 1. Pin react-grab to exact version (0.1.29) with SHA-256 integrity check. Script is verified before evaluation to prevent supply-chain attacks via compromised CDN responses. 2. Clear prefetchTask on failure so subsequent attempts retry the download instead of reusing a permanently failed task. 3. Remove premature isReactGrabActive=true. State is now only set by the onStateChange message handler callback after confirmed initialization, or explicitly reset on evaluation error. * Extract React Grab into own file, make version configurable Move all react-grab logic (settings, script loader, message handler, BrowserPanel extension) into Sources/Panels/ReactGrab.swift. Add a "React Grab Version" text field in Settings > Browser that lets the user pin which npm version is fetched. Only versions with a known SHA-256 integrity hash in ReactGrabSettings.knownHashes are accepted. The cache invalidates when the configured version changes. --------- Co-authored-by: Lawrence Chen <lawrencecchen@users.noreply.github.com>
This commit is contained in:
parent
978dd2c023
commit
dd54927cb9
9 changed files with 440 additions and 0 deletions
|
|
@ -5164,6 +5164,8 @@ struct ContentView: View {
|
|||
return .toggleBrowserDeveloperTools
|
||||
case "palette.browserConsole":
|
||||
return .showBrowserJavaScriptConsole
|
||||
case "palette.browserReactGrab":
|
||||
return .toggleReactGrab
|
||||
case "palette.browserSplitRight", "palette.terminalSplitBrowserRight":
|
||||
return .splitBrowserRight
|
||||
case "palette.browserSplitDown", "palette.terminalSplitBrowserDown":
|
||||
|
|
@ -5790,6 +5792,15 @@ struct ContentView: View {
|
|||
when: { $0.bool(CommandPaletteContextKeys.panelIsBrowser) }
|
||||
)
|
||||
)
|
||||
contributions.append(
|
||||
CommandPaletteCommandContribution(
|
||||
commandId: "palette.browserReactGrab",
|
||||
title: constant(String(localized: "command.browserReactGrab.title", defaultValue: "Toggle React Grab")),
|
||||
subtitle: browserPanelSubtitle,
|
||||
keywords: ["browser", "react", "grab", "inspect", "element"],
|
||||
when: { $0.bool(CommandPaletteContextKeys.panelIsBrowser) }
|
||||
)
|
||||
)
|
||||
contributions.append(
|
||||
CommandPaletteCommandContribution(
|
||||
commandId: "palette.browserZoomIn",
|
||||
|
|
@ -6274,6 +6285,9 @@ struct ContentView: View {
|
|||
NSSound.beep()
|
||||
}
|
||||
}
|
||||
registry.register(commandId: "palette.browserReactGrab") {
|
||||
tabManager.toggleReactGrabFocusedBrowser()
|
||||
}
|
||||
registry.register(commandId: "palette.browserZoomIn") {
|
||||
if !tabManager.zoomInFocusedBrowser() {
|
||||
NSSound.beep()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue