-1

I'm currently working on a chrome extension and want to dim the display/add a black transparent background over the existing website such as facebook, youtube, etc. How would this be done in CSS and implemented in JavaScript?

Dan
  • 27
  • 6
Rich01
  • 19
  • 1
  • Question: Is this extension for your own personal use, or do you really want to create an extension for the public? If it is more for personal use, then you should look at TamperMonkey - see [this answer](https://stackoverflow.com/questions/56812723/how-to-edit-a-websites-background-colors/56812958#56812958) for info. – cssyphus Mar 06 '21 at 19:08

2 Answers2

1

You would do this in CSS, more so than in javascript.

The big picture is that you would create a div that you would style like this:

<div id="overlay"></div>
<style>
    #overlay{z-index:9999999;pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);}
</style>

That would create an div that sits on top of your page content and makes the entire page more dim. (Note that the z-index value of your overlay must be set higher than the z-index values of every other element on the page. Every page is different. By default, the z-index of every element is zero - but most websites place some items above others, so the highest-used z-index could be almost anything.)

Note that the "a" at the end of rgba() is the opacity value - a value of 0.3 will allow most of what lies beneath to be visible, but colored by the first three values 0,0,0, which is black.

How would you do that just with javascript? Here is a short video that explains how create html and add it onto a page with javascript:

https://www.youtube.com/watch?v=VsXCK_2DJzA

There is just one problem: (SOLVED BELOW)

Because your overlay div is sitting on top of the page content, the user cannot interact with the page content anymore (cannot click in fields, cannot press buttons, etc). Due to the z-index (which is necessary to place your overlay on top of the other page content), the overlay now sits between the mouse cursor and the page content. Anywhere the user clicks, they are clicking on the overlay.

The solution, pointed out to me by David Bailey in the comments, is to use the css attribute pointer-events: none; on the overlay div. This tells CSS to ignore any clicks on that element (the overlay) and pass them through to the underlying components.

/*  Note: this is NOT jQuery - look carefully.  */
const $ = document.querySelector.bind(document);
$('#mybutt').addEventListener("click", function() {
   alert("You clicked me");
});
$('#mybutt2').addEventListener("click", function() {
   $('#mybutt2').innerText = 'Try clicking buttons NOW';
   $('#olay').classList.add("noPtrEvts");
});
#olay{
  pointer-events: none;
  z-index:9999999;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.3);
}
.noPtrEvts{
  pointer-events: auto !important;
}
<div id="olay"></div>
<h1>An Example Webpage</h1>
<div><img src="http://placekitten.com/300/150" /></div>
<button id="mybutt">Click me First</button>
<button id="mybutt2">Remove pointer-events CSS</button>
cssyphus
  • 37,875
  • 18
  • 96
  • 111
0

There is no way to do this in JavaScript alone, unless you bring in a CSS script as this is still, I have edited your post's tags to bring in the correct experts to help.

You would do something like this:


body{
background-color: #302E2E;
}

In CSS, but you may need to look at the element classes and Id's to make it work universally on all platforms

Dan
  • 27
  • 6