ExtHunter
← Back to extensions
Outline HTML Elements icon

Outline HTML Elements

πŸ§‘β€πŸ’» Developer Tools
Developer: maxontech
5.01,000

Outline HTML elements with a colorful border without affecting the layout to inspect website structure.

Outline HTML elements with a colorful border without affecting the layout to inspect website structure.

User reviews

4 Β· from the Chrome Web Store
  • J

    John Crumpton

    Oct 28, 2025
  • R

    Robert P.

    Apr 26, 2025
  • J

    Joaquin Esteban

    Dec 18, 2024

    Great execution. Best one I've found so far. UI is a bit lacking but can be improved

  • B

    Birkir Reynisson

    Sep 12, 2024

    AF_initDataCallback({key: 'ds:0', hash: '2', data:[["ihlgleabnhekkankfpfoafkobncbfcfo","https://lh3.googleusercontent.com/kq8d-ILFtuBBwH9hTFfXe2YrzBfPgkfOjoJQ4wQRHAaaMOx_K-0GtSxNuCRst8jlYex2z4d5gIUr7Lwu9_Uv07aC","Outline HTML Elements",5,8,"https://lh3.googleusercontent.com/PDfZIGi0p9ChF0KuRSF8HRld2bgBnLslL3CmVJBvcxEG-zV-NoRPbRs6-PmXvfN5MfEpPlYHCku-fDYALlbP8qNI3w","Outline HTML elements with a colorful border without affecting the layout to inspect website structure.",null,null,null,null,["productivity/developer",null,7],1,null,1000,null,"https://lh3.googleusercontent.com/tN29PhpnoGOEOCmpPIBRgyHJKjuBVgnhmpo4p0A40Doj2SpLT5sN1f7vxowCLEKe9fXuNd1Vz4XbNVWNJyUlfvd8",[1713785787,571776000],"{\n\"update_url\": \"https://clients2.google.com/service/update2/crx\",\n\r\n \"name\": \"Outline HTML Elements\",\r\n \"description\": \"Outline HTML elements with a colorful border without affecting the layout to inspect website structure.\",\r\n \"manifest_version\": 3,\r\n \"version\": \"1.0.4\",\r\n \"permissions\": [\r\n \"scripting\",\r\n \"tabs\",\r\n \"storage\"\r\n ],\r\n \"action\": {\r\n \"default_popup\": \"popup.html\"\r\n },\r\n \"host_permissions\": [\"\u003call_urls\u003e\"],\r\n \"icons\": {\r\n \"16\": \"assets/icon-16.png\",\r\n \"48\": \"assets/icon-48.png\",\r\n \"128\": \"assets/icon-128.png\"\r\n },\r\n \"background\": {\r\n \"service_worker\": \"background.js\"\r\n },\r\n \"content_scripts\": [\r\n {\r\n \"js\": [\r\n \"jquery.js\",\r\n \"content.js\"\r\n ],\r\n \"css\": [\r\n \"style.css\"\r\n ],\r\n \"matches\": [\"\u003call_urls\u003e\"], \r\n \"run_at\": \"document_end\"\r\n }\r\n ],\r\n \r\n \"web_accessible_resources\": [\r\n {\r\n \"resources\": [\r\n \"assets/*\"\r\n ],\r\n \"matches\": [\"\u003call_urls\u003e\"]\r\n }\r\n ]\r\n}","Outline HTML Elements"],null,null,null,null,[[1,"https://lh3.googleusercontent.com/92Sstg9QKD_vNvlnvimBxPm8v2zF_u7RnFcAAXMRgIY8O0nKeNA17RZriqgDnkim-lP-nmRY0E4s2GVbRoZktB5sXmU"],[1,"https://lh3.googleusercontent.com/CFuCs3UnCXFmtEYE6mq9hVDj8It-3SFLZs7UO9iHlPicqtW0GojcJS4pUcqoGrLA6SnrFw_X6R34mxaKvkZrXazaJw"]],"Outline HTML elements without affecting the layout to inspect the structure of websites and debug CSS.\n\nFeatures:\nπŸ“ Press and hold the key-bind to show the outline of HTML elements.\nβš™οΈ Customizable key-bind in the extensions menu.\n🎨 Choose outline colors for each HTML element individually.\nπŸ”„ No layout changes to the website.\nπŸ‘ Lightweight and does not affect the performance of the browser.\nπŸ“– The extension is open-source and free to use.\n🚫 The extension does not track any user data.\nπŸ“Ί The extension is free of ads.\n\nThis extension is free and open source: \nhttps://github.com/maxontech/outline-html-elements\n\nThis extension is developed and maintained by Max: https://www.maxrohowsky.com/",null,1,1,["maxdevthings@gmail.com",null,null,null,null,"maxontech",null,null,null,null,"u425c299cb0b25df045654f6a1e573475"],null,null,"1.0.4",[1743477248,60029000],"49.84KiB",["English"],null,null,null,null,1,[["haijifigpgpndcnbbjooffflaceedhdp","https://lh3.googleusercontent.com/FiVIVe6jFqCgHB2hMe2-cQEFyz2GsFyMhmSbc50hxbgUckPjr-LOGxaKImZwzBEphzW3lTIfR2_yMo9gpxPYM7ulfmg","HTML to Framer",4.5625,48,"https://lh3.googleusercontent.com/Ef0z2KiMe75aWdJ5tg9dFy_pRgVKhhlC3gjBHbydB61626-H9315_8AgvVwrbm7fFjiUb-yUaA3mRYdmmFAyYL4H_A","Bring your own website into Framer with a few clicks. Simply copy and paste web elements and edit them directly in Framer.","framer.com",1,1,null,["productivity/tools",null,5],1,1,100000,1,"https://lh3.googleusercontent.com/_6ALNPGUCvi30f-FhIACBSfzpELiOjaNEy9mnxggwsbgZHyQZi0KNoVtqZafZ8EhM0Sfgc3kQPj33mRd4vPuWaQ3",[1692174879,782000000],"{\n\"update_url\": \"https://clients2.google.com/service/update2/crx\",\n\n \"manifest_version\": 3,\n \"name\": \"HTML to Framer\",\n \"version\": \"0.6\",\n \"description\": \"Bring your own website into Framer with a few clicks. Simply copy and paste web elements and edit them directly in Framer.\",\n \"permissions\": [\"activeTab\", \"scripting\", \"webNavigation\"],\n \"host_permissions\": [\"https://*/*\"],\n \"background\": {\n \"service_worker\": \"./build/background.js\"\n },\n \"action\": {\n \"default_title\": \"Start the extension\"\n },\n \"icons\": {\n \"16\": \"icons/default/icon16.png\",\n \"32\": \"icons/default/icon32.png\",\n \"48\": \"icons/default/icon48.png\",\n \"128\": \"icons/default/icon128.png\"\n }\n}\n","HTML to Framer"],["cakdbpplnjeoipiocdofhhlfndllnjeh","https://lh3.googleusercontent.com/rs8gjBEplLgsneMwNs9L_ZbaZ2O05Lbn9Pnm136xU2T4OctUfbs8iRBEHOa3AS3M5fyWRG-V4D-9Puxh9Pw6wyJh4w","CSS Debugger",5,5,null,"Instantly debug CSS layouts by adding colorful outlines to HTML elements. Easily identify and inspect elements with a simple click.","aydogan.dev",1,1,null,["productivity/developer",null,7],1,1,617,1,null,[1739774124,3842000],"{\n\"update_url\": \"https://clients2.google.com/service/update2/crx\",\n\n \"manifest_version\": 3,\n \"name\": \"CSS Debugger\",\n \"version\": \"1.0\",\n \"description\": \"Instantly debug CSS layouts by adding colorful outlines to HTML elements. Easily identify and inspect elements with a simple click.\",\n \"permissions\": [\"activeTab\", \"scripting\", \"storage\"],\n \"action\": {\n \"default_icon\": {\n \"16\": \"icons/icon16.png\",\n \"48\": \"icons/icon48.png\",\n \"128\": \"icons/icon128.png\"\n }\n },\n \"background\": {\n \"service_worker\": \"css-debug.js\"\n },\n \"icons\": {\n \"16\": \"icons/icon16.png\",\n \"48\": \"icons/icon48.png\",\n \"128\": \"icons/icon128.png\"\n }\n}","CSS Debugger"],["hicjdabjhdmaaabgackleegipabmeack","https://lh3.googleusercontent.com/vWn1N4OIPvP_pMN2DywY6Pazk2CzefM4x7JRUmKTG2Cz9dTpCs_9lVwe3gXZLWXl9dK_4yEhac4yuaBg0kHVqN393A","HTML Visual Validation",4.375,8,"https://lh3.googleusercontent.com/z5dQgDbF_A3uzd6t6L5fuzyRESq5a4Q3mrcxWXFF12j0A7vABZ6qYjXKsvoQ-3ThR40FqSeL5Hf5PosSrnkshJU7","HTML Visual Validation gives you information about the html elements, live, on page.",null,null,1,null,["productivity/developer",null,7],1,1,5000,null,null,[1504506988,353000000],"{\n\"update_url\": \"https://clients2.google.com/service/update2/crx\",\n\r\n \"manifest_version\": 3,\r\n \"name\": \"HTML Visual Validation\",\r\n \"description\": \"HTML Visual Validation gives you information about the html elements, live, on page.\",\r\n \"version\": \"0.3.0\",\r\n \"icons\": {\r\n \"16\": \"icon16.png\",\r\n \"48\": \"icon48.png\",\r\n \"128\": \"icon128.png\"\r\n },\r\n \"content_scripts\": [\r\n {\r\n \"matches\": [ \"\u003call_urls\u003e\" ],\r\n \"js\": [ \"jquery.min.js\", \"displayTags.js\" ],\r\n \"run_at\": \"document_end\"\r\n }\r\n ],\r\n \"action\": {\r\n \"default_icon\": \"icon.png\",\r\n \"default_popup\": \"popup.html\",\r\n \"default_title\": \"HTML Visual Validation\"\r\n }\r\n\r\n}","HTML Visual Validation"],["ncmnkcgopkmfgdjhgcpgpipkoojgcdna","https://lh3.googleusercontent.com/nIbDFx8r76z3-iWqIcBMmXdOxv52GUxnwq447f_UbtTcm7M7RLtVGixccD7hXZjo4zacWcob-bcZo2sTKSqdS_6Pvw","HTML Viewer",4.826086956521739,23,"https://lh3.googleusercontent.com/EeED0-aRR5rRXZJWeH2vufbnTFOe0a-72wTfWz8AcMnQ1M53lW1oRIdX5GKKELYR8oYyw3WmO7Poo4x-g_I2UEDQOwo","Use HTML Viewer to view HTML with an online page-code preview and CSS inspector for website markup analysis",null,null,null,null,["productivity/tools",null,5],1,1,1000,null,null,[1763523048,987715000],"{\n\"update_url\": \"https://clients2.google.com/service/update2/crx\",\n\n \"manifest_version\": 3,\n \"name\": \"__MSG_app_name__\",\n \"description\": \"__MSG_greeting__\",\n \"default_locale\": \"en\",\n \"version\": \"1.2.2\",\n \"permissions\": [\n \"activeTab\",\n \"storage\"\n ],\n \"background\": {\n \"service_worker\": \"background.js\"\n },\n \"content_scripts\": [\n {\n \"matches\": [\"\u003call_urls\u003e\"],\n \"js\": [\"content.js\"],\n \"css\": [\"content.css\"],\n \"run_at\": \"document_end\"\n }\n ],\n \"action\": {\n \"default_popup\": \"popup.html\",\n \"default_icon\": {\n \"16\": \"icon16.png\",\n \"48\": \"icon48.png\",\n \"128\": \"icon128.png\"\n }\n },\n \"icons\": {\n \"16\": \"icon16.png\",\n \"48\": \"icon48.png\",\n \"128\": \"icon128.png\"\n }\n}\n","HTML Viewer"],["glefoejbpalgpdgfbbmemfgegepiamnd","https://lh3.googleusercontent.com/7oBH4I4-J17WN7vKAxYi2OPtQslsR5ELSaqSp7V7uaP1v_2AVUOz1Btz4KqIDOrX670bRhcSHdkr2EZpQUXnFdzs","HTML to React",4.555555555555555,9,"https://lh3.googleusercontent.com/ndSnYqY3blYbnsidzizOmaNMpFdG3Z1CfHAeANI45b72_ulDng5qZf4_o8luS-ZEoE5-bQfLWC2HCJ3ZGosiib6FJQ","The fastest and smartest way to analyze HTML elements and generate full React component representations.","htmltoreact.app",1,1,null,["productivity/developer",null,7],1,1,3000,1,null,[1628575892,102000000],"{\n\"update_url\": \"https://clients2.google.com/service/update2/crx\",\n\n \"manifest_version\": 3,\n \"name\": \"HTML to React\",\n \"description\": \"The fastest and smartest way to analyze HTML elements and generate full React component representations.\",\n \"homepage_url\": \"https://htmltoreact.app/\",\n \"icons\": {\n \"16\": \"./icons/active-16.png\",\n \"32\": \"./icons/active-32.png\",\n \"48\": \"./icons/active-48.png\",\n \"128\": \"./icons/active-128.png\"\n },\n \"action\": {\n \"default_title\": \"Start\",\n \"default_icon\": {\n \"16\": \"./icons/inactive-16.png\",\n \"32\": \"./icons/inactive-32.png\",\n \"48\": \"./icons/inactive-48.png\",\n \"128\": \"./icons/inactive-128.png\"\n }\n },\n \"web_accessible_resources\": [\n {\n \"resources\": [\n \"content/*\"\n ],\n \"matches\": [\n \"\u003call_urls\u003e\"\n ]\n }\n ],\n \"permissions\": [\n \"scripting\",\n \"activeTab\",\n \"clipboardWrite\"\n ],\n \"host_permissions\": [\n \"\u003call_urls\u003e\"\n ],\n \"version\": \"0.0.3\",\n \"background\": {\n \"service_worker\": \"background.js\"\n }\n}\n","HTML to React"]],null,null,null,null,"88",null,2,null,null,null,null,null,null,1,3,["en"]], sideChannel: {}});