A universal Chrome extension for visualizing data flow in web applications.

Latest Version

Version

0.1.1

Update

May 25, 2024

Size

146KiB

Developer

StateViz Extension

Analyze application state across multiple frontend libraries.

Supported libraries:
- React,
- Svelte,
...and more to come!

Features:
- Multi-Library Support: Inspect web applications built with different libraries, including those using multiple libraries simultaneously.
- App Structure Visualization: Visualize the structure of your application, including components, DOM elements, and library-specific elements like Svelte blocks.
- Real-Time Data Inspection: Inspect component data in real-time, including props, state, and library-specific details like contexts and hooks for React.
- Element Filters: Use filters to display only the elements you are interested in.
- DOM Element Highlighting: Efficiently highlight DOM elements corresponding to selected tree nodes.
- Light and Dark Mode: Choose between light and dark themes for a comfortable user experience in any lighting condition.

This extension requires permissions to access the app tree, but it does not transmit any data remotely. It is fully open source, and you can find its source code at https://github.com/steciuk/StateViz.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "StateViz", "version": "0.1.1", "description": "A universal Chrome extension for visualizing data flow in web applications.", "author": "Adam Steciuk", "permissions": [ "storage" ], "background": { "service_worker": "src/pages/background/index.js", "type": "module" }, "action": { "default_popup": "src/pages/popup/index.html", "default_icon": { "16": "icons/disabled-16.png", "24": "icons/disabled-24.png", "32": "icons/disabled-32.png" } }, "icons": { "32": "icons/enabled-32.png", "48": "icons/enabled-48.png", "128": "icons/enabled-128.png" }, "content_scripts": [ { "matches": [ "http://*/*", "https://*/*", "" ], "js": [ "src/pages/content-main/index.js" ], "run_at": "document_start", "world": "MAIN" }, { "matches": [ "http://*/*", "https://*/*", "" ], "js": [ "src/pages/content-isolated/index.js" ], "run_at": "document_start", "world": "ISOLATED" } ], "devtools_page": "src/pages/devtools/index.html", "web_accessible_resources": [ { "resources": [ "assets/js/*.js", "assets/css/*.css", "icons/*.png" ], "matches": [ "*://*/*", "" ] } ]}

Download CRX(146KiB)