Quickly find the code for rendered React components!

Latest Version

Version
0.5.3
Update
February 26, 2024
Size
19.32KiB
Developer
Category
Users
5
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
Scripting
See more

Figment Extension

Figment only works for sites running a development build of React on localhost.

1) Click the toolbar icon OR focus on the page then press the hotkey to turn on or off (alt-f OR ⌥-f)
2) Mouse over the page to see components and elements outlined in red
3) Click the red label for an outlined component
4) Click a code link, if available, in the resulting menu
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx","name": "Figment","description": "Quickly find the code for rendered React components!","version": "0.5.3","manifest_version": 3,"icons": {"16": "F.png","32": "F.png","48": "F.png","128": "F.png"},"action": {"default_title": "Click to toggle ON/OFF"},"background": {"service_worker": "serviceWorker.js","type": "module"},"content_scripts": [{"js": ["contentscript.js"],"matches": ["*://localhost/*"]}],"web_accessible_resources": [{"resources": ["Figment.js","Bifrost.js","elementFunctions.js","Menu.js","FigmentOutline.js","Trace.js","styles.css"],"matches": ["*://localhost/*"]}],"externally_connectable": {"matches": ["http://localhost/*"]},"permissions": ["scripting"],"host_permissions": ["*://localhost/*"],"commands": {"_execute_action": {"suggested_key": {"default": "Alt+F"}}}}
Read more

Similar Extensions

icon

React Developer Tools Extension · Developer Tools 5 1576 ★ 1.56MiB

icon

Web Component DevTools Extension · Developer Tools 5 9 ★ 1.74MiB

icon

GTM Variable Builder Extension · Developer Tools 5 30 ★ 82.71KiB

icon

React code finder Extension · Developer Tools 5 5 ★ 2.95MiB

icon

React Inspector Extension · Developer Tools 5 8 ★ 26.91KiB

icon

PageRip (HTML + CSS Extract) Extension · Developer Tools 5 54 ★ 434KiB

icon

Elementor Width Display Extension · Developer Tools 5 16 ★ 27.85KiB

icon

DivMagic - Copy Style from any website Extension · Developer Tools 5 55 ★ 1.3MiB

icon

LocatorJS Extension · Developer Tools 5 64 ★ 190KiB

icon

React Context DevTool Extension · Developer Tools 5 21 ★ 2.35MiB

icon

CSS Viewer for Google Chrome™ Extension · Productivity 5 334 ★ 346KiB

icon

HTML to React & Figma by Magic Patterns Extension · Developer Tools 5 10 ★ 392KiB

icon

Atomic CSS Devtools Extension · Developer Tools 5 15 ★ 196KiB

icon

React Scan Toggle Extension · Developer Tools 5 3 ★ 48.71KiB

icon

CSS Selector Extension · Productivity 5 2 ★ 73.43KiB

icon

Remove HTML Elements Extension · Productivity 5 16 ★ 36.19KiB

icon

Quick Inspect Element Extension · Developer Tools 5 9 ★ 360KiB

icon

React Query Rewind Extension · Developer Tools 5 4 ★ 538KiB

icon

React Hook Form Developer Tools Extension · Developer Tools 5 7 ★ 117KiB

icon

ProseMirror Developer Tools Extension · Developer Tools 5 5 ★ 164KiB

icon

RSC Devtools Extension · Developer Tools 5 9 ★ 175KiB

icon

Deeper Dive Extension · Developer Tools 5 4 ★ 32.31KiB

icon

3D View website Extension · Productivity 5 4 ★ 17.25KiB

icon

HTML to React Extension · Developer Tools 5 4 ★ 342KiB