React Click To Component Extension Chrome

React Click To Component, a Chrome extension to open a React component in the editor by clicking on it.

Latest Version

Version

0.5

Update

September 8, 2024

Size

39.26KiB

Developer

www.imadhusanka.me

React Click To Component Extension

React Click To Component, is a Chrome extension to open a React component in the editor by clicking on it.

`Option + Click` (on MacOS) or `Alt + Click` (on Linux/Windows) takes you to the code editor

The extension also supports TurboPack builds where the project root is not exposed. You'll just need to setup the project root file when prompted. The updated value can be manipulated on the localStorage as required.

To see how this works, checkout the repo at and raise any issues on the extension at the GitHub repository. And if you like the extension, star the repo too!

Features
- Option + Click or Alt + Click on a component to open the file in an editor
- Highlight the component name when hovering over it with Option/Alt key pressed
- Supports Turbopack builds with manually defined project roots (that can be changed simply by updating the localStorage key clickToReact-projectPath-{HOST})
- Now the extension copies the path to clipboard instead of opening the file, for editors that doesn't support opening file:// URLs. You can set the editor with clickToReact-editor-{HOST} localStorage key.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "React Click To Component", "version": "0.5", "manifest_version": 3, "description": "React Click To Component, a Chrome extension to open a React component in the editor by clicking on it.", "background": { "service_worker": "sw.js" }, "permissions": ["scripting", "webNavigation"], "host_permissions": ["http://*/*"], "action": {}, "icons": { "16": "assets/icon-16.png", "32": "assets/icon-32.png", "48": "assets/icon-48.png", "128": "assets/icon-128.png" }}