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>

Hadlock Falls, Acadia

Sony ILCE-7RM3 • FE 16-35mm F2.8 GM
ƒ/16 • 16mm • 0.4s • ISO 100

As I am taking more and more long-exposure photos of waterfalls, I am trying to convince myself that I don’t need a very long exposure to smooth out water stream. Even half second exposure is good enough to get a silky smooth stream. It definitely increases the probability of not having other elements like leaves, branches, or bushes blurred out because of wind. And I also don’t have to hold my breath and stand still for 10 seconds while waiting for my camera to click. #acadia #photography #landscape #longexposure