Toggle React Scan functionality to analyze React component renders

Latest Version

Version
1.0
Update
December 1, 2024
Size
48.71KiB
Developer
Category
Users
533
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
ActiveTab
Scripting
See more

React Scan Toggle Extension

React Scan Toggle - Visualize React Component Renders

This is a wrapper for the million's React Scan library

[NOT AN OFFICIAL REACT SCAN EXTENSION]

IMPORTANT: This extension requires React Developer Tools to be installed and enabled.

A lightweight extension that helps you visualize and analyze React component renders in real-time. Toggle React Scan functionality with a single click to debug performance issues and understand your React application's behavior.

Key Features:
• One-click activation/deactivation
• Visual feedback through colored overlays
• Track component render counts and timing
• Inspect component props and state changes
• State persists while navigating within tabs
• Zero configuration required
• Works with any React application
• Secure local script execution (no external connections)

This community-built tool makes React Scan more accessible by providing an easy-to-use toggle interface. Perfect for developers who want to quickly analyze React component performance without modifying their codebase.

Note: This is not an official React Scan extension. It's a community-built tool that incorporates React Scan (MIT licensed, Copyright 2024 Aiden Bai, Million Software, Inc.) to make its functionality more accessible.

Privacy & Security:
• No data collection
• No external connections
• All processing happens locally
• No permissions beyond the active tab
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "React Scan Toggle", "version": "1.0", "description": "Toggle React Scan functionality to analyze React component renders", "author": "davidgg.es", "permissions": ["activeTab", "scripting"], "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'none'" }, "action": { "default_icon": { "16": "icons/icon16-gray.png", "48": "icons/icon48-gray.png", "128": "icons/icon128-gray.png" } }, "background": { "service_worker": "background.js" }, "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "web_accessible_resources": [ { "resources": ["react-scan.js"], "matches": [""] } ]}
Read more