Toggle React Scann script injection

Latest Version

Version
1.0
Update
December 6, 2024
Size
34.16KiB
Developer
halpindev.com
Category
Users
15
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
Scripting
Tabs
See more

React Scann Toggle Extension

The React Scan Chrome extension brings the power of React Scan directly to your browser, allowing you to analyze the performance of any React application with a simple toggle. Identify unnecessary re-renders and optimize your components without modifying any code.

Features:

One-click activation: Easily toggle React Scan on and off for any website.

Visual cues: Instantly see which components are re-rendering and how often.

No code changes required: Analyze any React app without touching its codebase.

Powered by React Scan: Leverages the trusted React Scan library used by teams at Airbnb and more.

Use Cases:

Debugging performance issues: Quickly identify components causing slowdowns.

Optimizing existing applications: Find and eliminate unnecessary re-renders.

Learning about React performance: Visualize how different factors affect rendering behavior.

How it works:

This extension injects the React Scan library into the active tab when enabled. React Scan then analyzes the React component tree and visually highlights components that re-render, providing insights into potential performance bottlenecks.

About React Scan:

React Scan is a powerful tool that simplifies React performance analysis. It helps you pinpoint unnecessary re-renders caused by unstable props, like callbacks or object values. By visualizing these issues, React Scan empowers you to optimize your React applications for optimal performance.

Official Repo: https://github.com/aidenybai/react-scan
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "React Scann Toggle", "version": "1.0", "description": "Toggle React Scann script injection", "permissions": ["activeTab", "scripting", "tabs"], "host_permissions": [""], "action": { "default_icon": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" } }, "background": { "service_worker": "background.js" }, "web_accessible_resources": [ { "resources": ["inject.js"], "matches": [""] } ]}
Read more