English
See more
Visualize distribution of DOM nodes in the document tree
Latest Version
Version
1.0
Update
December 14, 2023
Size
142KiB
Developer
Category
Users
24 
Rating
0 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
Tabs
ActiveTab
Storage
SidePanel
ContextMenus
See more
ActiveTab
Storage
SidePanel
ContextMenus
PageTree Inspector Extension
Visualize the distribution of DOM element nodes within the document tree of any web page.
You have the ability to generate interactive tree views for any element, just like inspecting an element using the DevTools element inspector.
Key Features:
🌳 Visualize Document Trees: See the organization of DOM nodes in any web page through an interactive tree representations.
🕵️♀️ Inspector Tool: Select any element to generate a dedicated interactive tree view, providing visual insight into its placement.
🌚 Dark Mode: Reduce eye strain during late-night sessions with our Dark Mode option for a more comfortable experience.
👆Interactive Navigation: Easily traverse parent, child, and sibling nodes within the DOM tree to grasp relationships.
🔄 Observable Updates: Keep up with document tree changes by refreshing and instantly viewing updates.
🌐 Customize Orientation: Tailor your visualization to your preference with horizontal or vertical tree orientations.
✒️ Path Rendering Options: Choose from various path rendering styles – diagonal, straight, elbow, or step – for a customized look.
Read more
You have the ability to generate interactive tree views for any element, just like inspecting an element using the DevTools element inspector.
Key Features:
🌳 Visualize Document Trees: See the organization of DOM nodes in any web page through an interactive tree representations.
🕵️♀️ Inspector Tool: Select any element to generate a dedicated interactive tree view, providing visual insight into its placement.
🌚 Dark Mode: Reduce eye strain during late-night sessions with our Dark Mode option for a more comfortable experience.
👆Interactive Navigation: Easily traverse parent, child, and sibling nodes within the DOM tree to grasp relationships.
🔄 Observable Updates: Keep up with document tree changes by refreshing and instantly viewing updates.
🌐 Customize Orientation: Tailor your visualization to your preference with horizontal or vertical tree orientations.
✒️ Path Rendering Options: Choose from various path rendering styles – diagonal, straight, elbow, or step – for a customized look.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "PageTree Inspector", "description": "Visualize distribution of DOM nodes in the document tree", "version": "1.0", "minimum_chrome_version": "116", "options_ui": { "page": "options.html" }, "side_panel": { "default_path": "sidepanel.html" }, "content_scripts": [ { "matches": [ "" ], "js": [ "js/vendor.js", "js/content.js" ], "all_frames": true, "match_about_blank": true, "run_at": "document_idle" } ], "background": { "service_worker": "js/background.js" }, "action": { "default_title": "Visualize Document Tree", "default_side_panel": "sidepanel.html", "default_icon": { "16": "assets/icon16.png", "48": "assets/icon48.png", "128": "assets/icon128.png" } }, "icons": { "16": "assets/icon16.png", "48": "assets/icon48.png", "128": "assets/icon128.png" }, "web_accessible_resources": [ { "resources": [ "template.html" ], "matches": [ "" ] } ], "permissions": [ "tabs", "activeTab", "storage", "sidePanel", "contextMenus" ], "host_permissions": [ "" ]}
Read more
