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.
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.