This extension is a tool that helps visualize the layout of HTML elements on a webpage

Latest Version

Version
0.0.0.5
Update
September 13, 2016
Size
21.62KiB
Developer
Category
Users
2,000+
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
See more

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

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