Chrome Extension - DIV Glance

This Chrome extension will give you a visual glance of the DIV tags in the page. Just hover your mouse pointer over the page and extension will highlight DIV under the pointer with a Red background color. The intensity of Red background color signifies the depth of highlighted DIV related to its parent DIV layers. You no more have to dig through Chrome DevTools to inspect DIV layout in the page.

DIV Glance

DIV Glance Extension Page: DIV Glance

I created this extension just for the sake of learning Chrome extension development. As I saw the practical usage of this extension later, I tried to polish it a bit to make it more presentable. At the core of this extension, it simply injects following CSS style to the page — nothing fancy.

1
2
3
4
5
6
7
<style type="text/css">
  div:hover
  {
    outline:1px solid red;
    background-color:#ff000010;
  }
</style>

0 Comments