Introduction: DIY Safe Chrome Screen Darkener That's Easy to Install and You Will Love

By
  • This Instructable explains how to make your Chrome Browser have a button so you can darken a web page that has white background so it is more pleasing to view.
  • It is especially useful late in the day when you need your computer screen to be dark so you can get ready to go to sleep, or anytime your eyes are tired of bright light.
  • This is written for dummies and anyone can do it in a few minutes.
  • It is totally safe because:
    • you can see the code in the files and you control the files, unlike Chrome Extensions you get from Google
    • you can disable it very easily as explained
  • It is better than using a bookmarklet because it will work even if you have javascript disabled. That way you can protect your computer from web pages with dangerous javascript by having javascript disabled, yet you can still run the javascript to darken the screen because it is being run by the Chrome Extension you will be creating by loading the attached simple files.
  • The reason I created this is because I want to always keep my Chrome browser so web pages can't run javascript by default. I only enable javascript for sites I trust by exception. That is the safest way to operate. But that meant the bookmarklet I got for darkening Chrome pages wouldn't work. So I realized the if I made my own Chrome Extension based on the bookmarklet, it could run the same javascript even though I set Chrome to "Do not allow any site to run JavaScript".
  • I also created this because I didn't want to get Chrome Extensions from the Google webstore because they don't do the darkening job right, they are too complicated, and they can't be trusted because you don't have visibility to their contents.
  • This solution is truly safe compared to Chrome Extensions you get from the Chrome Store because you have total visibility to the contents and total control. The files you load will be your Chrome Extension you create in Developer mode.
  • The only permissions you are giving your Chrome Extension are so it can darken any page you open on any tab if you click the button provided, as you can see here in the manifest file permission setting line:
    "permissions": [ "tabs", "http://*/*", "https://*/*" ]

Step 1: Create a Folder on Your Computer and Load All Attached Files There.

Create a folder on your computer and load the attached files there.

The files are all safe simple files you can see for yourself:

a) background. js (is a file that tells Chrome about the javascript file below)

b) bookmarklet.js (is a javascript function file that simply darkens the screen. I got it from a bookmarklet.)

c) 3 icon files: icon-16.txt, icon-48.txt, icon-128.txt (are button icons to be renamed as .png files)

d) manifest.json (is a manifest file that tells Chrome the list of files above make up the Chrome Extension)

If you are concerned about the safety of the files, you can view the files by opening each with Notebook text editor. You can see they are all safe. The web site listed in the manifext.json file is just to give acknowledgement to the web site that enabled me to convert the Chrome Screen Darken bookmarklet into the Chrome Extension.

The code is totally safe and does nothing more than explained. It doesn't change your browser or security in any other way. It's your Chrome Extension that you control completely. If you don't like anything, you can delete it.

The only permissions you are giving your Chrome Extension are so it can darken any page you open on any tab if you click the button provided, as you can see here in the manifest file permission setting line:
"permissions": [ "tabs", "http://*/*", "https://*/*" ]

For an explanation about permissions, see this: https://www.howtogeek.com/291095/why-do-chrome-ext...

Attachments

Step 2: Change the Name of the Image Files So They End in .png Instead of .txt

The 3 icon files you downloaded:

  1. icon-16.txt
  2. icon-48.txt
  3. icon-128.txt

all need to have their names changed so they end in.png

because they are icon button picture files.

They couldn't be loaded into Instructables as .png files because Instructables would treat them as instruction pictures. So I loaded them as .txt files. Please rename them all so they end in .png instead of .txt

They are really button icon pictures that the Chrome will used to make a button for you to press to darken your Chrome browser web page.

Step 3: Go to Your Computers Local Chrome://extensions/ Page

Open Chrome and enter this into address bar: chrome://extensions/

Then hit Enter.

That will take you to your Chrome browser's internal Extensions settings page.

It's a place on your PC where you can see all of your existing Chrome Extensions and also load new ones you create yourself (as developer).

It's also a place where you can enable or disable your Chrome Extensions.

Step 4: Load the Attached Files.

Click the check box at the top right for Developer Mode and load the files by

clicking the button at the top left that says "Load Unpacked Extension".

Select the folder you created where you put the files from above.

Click OK and it will load all the files in that directory.

Congratulations, your Chrome Extension is now loaded.

All the files from this web page that you put in the folder you created were loaded as a Chrome Extension.

You will now see a Black Circle Button in the upper right hand corner of your Chrome browser.

Step 5: Turn Off the Developer Mode (uncheck the Check Box)

You should turn off Developer Mode because you are done loading your Chrome Extension.

Uncheck the Developer Mode check box.

Note: If you restart Chrome, by default it will warn you that you are running a Chrome Developer Mode created Extension when you start Chrome. You can ignore it because it is your Chrome Extension. You intentionally loaded it. It's just a standard Chrome message (which developers find annoying) and Chrome says it in case you didn't load the Extension and a rouge webpage loaded one.

You are safe because you loaded the Extension.

For more explanation, look here: https://malwaretips.com/blogs/remove-disable-devel...

Step 6: Go to a Web Page and Try Your New Chrome Screen Darkener Button

Go to a web page and try the new Black button in the upper right corner of your Chrome browser.

The button will darken the screen from white to black and also:

  • turn black text to white
  • turn links text to bold green so you can see them easily
  • keep picture colors as they were originally

Caveat: it won't work with certain sites like Yahoo.

If you decide you don't like the effect of the button, simply click the Chrome reload webpage button and the webpage will reload as it was originally.

If you decide you don't want the Chrome Extension, you can go to back to chrome://extensions/

and then unclick the Extension to disable it. You can click the trash icon to delete it.

Acknowledgements: