Guillaume Guillaume - 11 months ago 140
AngularJS Question

Overlay Chrome Extension Angular

I am working on a chrome extension that would display an overlay over any tabs the user is working on. I need it to operate within the full viewport.

I'm using vanilla javascript and content script to inject a full viewport-size div (to the body since I want it to be used on any website) and then append my template to the div I created and injecting them with Angular. It works very well.

The Problem

However, this overlay is somewhat blocking since the div I create has to have a z-index of at least 0 to be seen. Let's imagine you perform a google search, you will be able to search since the google search bar has z-index > 0 but you won't be able able to click on the results ... The problem appears in pretty much any website.

Now I tried to play with z-index: I apply z-index = -1 so I won't see the main overlay div but the problem with that is that the content I append to it seems to inherit the z-index -1 no matter what so I never see my template!

I've followed quite some topics here but I didn't find an answer to my problem!

The Question at last ...!

How do I create a non-blocking chrome overlay ? :)

Remember: I need to be able to interact with the overlay at any given moment, not simply when I click on the icon related with the BrowserAction!

Answer Source

The trick is simply to add the css property

  pointer-events: none;

to the main div and

  pointer-events: auto;

to the template