Originally I was going to implement a slider where you could adjust the amount of grayscale, but wasn't sure if anyone would use it. I really like the idea of having it gradually go gray, I might look into that when I get a chance to work on this again.
I know what you mean. If I'm good about using the grayscale, when I see a site with color it's almost overwhelming. You get desensitized to all that color.
I hadn't done any scientific studies, just had read about it and decided to give it a try on my phone. It made a difference for me, so I wanted to make something for chrome since as a dev I spend most of my day on there.
I'd say it's worth a try at least to see if you see a difference. It's strange browsing without color, and when you use grayscale and go back to color it almost feels overwhelming.
Here are some articles though that go into it more:
Do you mean three separate js files? Two of them are plugin specific files I separated out to make managing the different features easier.
The only library I'm loading is tinycolor.js, which I added for the togglable feature where it checks the site background colors and adds an appropriate gray for it. You'll find that making the background always be white doesn't actually work some of the time, especially for sites with darker backgrounds.
The extension is (god forbid) more than one line of code because I wanted to add features and controls I didn't see in other plugins, like:
* setting it for specific tabs
* setting it for all sites
* being able to save sites to always be gray
* being able to exclude sites from being gray when the "tab" or "all sites" settings are on
I too wish extensions had the built in functionality to add/remove saved sites, tabs, etc, but as that's not the case today, I had to do it myself with the chrome extension APIs.
I feel you. I tried to make it easy to toggle on and off in case you needed to check something in color, but it's a bit of a double edged sword in that it can be too easy to turn it off and leave it off.
That's a big part of why I added the saved/excluded sites functionality, so you could add it for sites that are usually time wasters like reddit or facebook, or exclude sites from being gray that you need for work.
Newer Android phones allow you to set an accessibility menu shortcut. If you only have one menu item selected, the shortcut just toggles that menu item. I press vol-up & power to toggle greyscale.
Yep, you got it. For the most part I'm just adding filter: grayscale(100%) to the html element.
There some other stuff going on though. I noticed that for the html and body elements, if they had a background image/color, the grayscale trick wouldn't work for them.
So, on the options page I added a toggle to "Remove All Background Colors and Images No Matter What". This goes through the page and checks if there is a background image or color, then uses this library (https://github.com/bgrins/TinyColor) to check the perceived lightness of the color and changes the background to use a shade of gray instead.
Performance wise, I don't have any specific numbers, but I did a lot of dogfooding on my own before releasing and didn't notice any perceivable slowdown.
