Как сделать наложение div на каждый элемент HTML?

Question

Я делаю расширение Google, которое создает div, который перекрывает каждый элемент HTML на сайте https://mail.google.com/. Однако мой код накладывается только на тело, а не на панель навигации вверху. Как мне решить эту проблему?

contentScript. js

chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
  if(request==='execoverlay'){
   // your code goes here 
      var div = document.createElement('div');
      let bar = document.getElementById('gb');
      bar.style.zIndex = -1;
      div.style.width = "100%";
      div.style.height = "100%";
      div.style.position = "fixed";
      div.style.left = 0;
      div.style.zIndex = 0;
      div.style.top = 0;
      div.style.backgroundColor = "red";
      var label = document.createElement('span');
      label.textContent = "Hello, world";
      div.appendChild(label);
      document.body.appendChild(div);
      sendMessage({msg:'recieved'})
  }
})

Как выглядит веб-страница:

Answer 1

Измените zIndex внутри contentScript. js на большее число, поскольку при увеличении индекса он будет отображаться вверху.

Код решения:

div.style.zIndex = 100;