This extension is a tool that helps visualize the layout of HTML elements on a webpage
HTML Hierarchy Visualizer Extension
HTML Hierarchy Visualizer is a visualization tool for front end web developers that assists in understanding the breakdown of a webpage. It creates colored borders and backgrounds to distinguish the ancestry and layout of HTML elements.
How To Use:
- Press chrome extension icon, a drop-down menu will appear
- Select either apply border or apply background to highlight the different elements on the page
- Select remove border or remove background to bring webpage back to original state
Read more
How To Use:
- Press chrome extension icon, a drop-down menu will appear
- Select either apply border or apply background to highlight the different elements on the page
- Select remove border or remove background to bring webpage back to original state
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "HTML Hierarchy Visualizer", "description": "This extension is a tool that helps visualize the layout of HTML elements on a webpage", "version": "0.0.0.5", "icons": { "16" : "/images/icon19.png", "48" : "/images/icon48.png", "64" : "/images/icon64.png"}, "browser_action": { "default_icon": "./images/icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ], "web_accessible_resources": ["colors.css"]}
Read more