Chrome Extension - DIV Glance

I am so happy to see my first Chrome extension published on the Chrome Web Store. The whole intension of this releasing the extension was to understand Chrome extension development workflow and extension publishing process. The whole process to upload my extension was simple and straight forward even for beginners like me.

Now about the DIV Glance Chrome extension itself. This 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 the Red background color. The intensity of Red background color signifies the depth of highlighted DIV related with regards 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

As I mentioned above, 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