Can't remove grayscale filter on some webpage

Question

My code to remove grayscale filter(s):

// ==UserScript==
// @name         Remove Grayscale
// @namespace    Remove Grayscale
// @description  Remove Grayscale
// @version      1
// @author       You
// @match        http*://*/*
// ==/UserScript==

//var script = document.createTextNode("<style type='text/css'>html, body, img {filter:none !important; -webkit-filter:none !important;}</style>");
var script = document.createElement("script");
script.type="text/css";
script.innerHTML="html, body, img {filter:grayscale(0) !important; -webkit-filter:grayscale(0) !important;}";
document.getElementsByTagName('head')[0].appendChild(script);
//document.head.appendChild(script);

//document.head.setAttribute("style","filter:none !important; -webkit-filter:none !important;");
document.body.setAttribute("style","filter:grayscale(0) !important; -webkit-filter:grayscale(0) !important;");
document.html.setAttribute("style","filter:grayscale(0) !important; -webkit-filter:grayscale(0) !important;");

It didn't work on pptvhd36.com.
What is wrong?

It's document.documentElement, not document.html. – wOxxOm Oct 02 '17 at 03:06 — wOxxOm, Oct 02 '17 at 03:06

Brock Adams · Accepted Answer · 2017-10-02T06:05:02.583

Note:

Always look in the browser/error console. If you had, you would have seen errors like:

document.html is undefined

You can't set <html> styles that way.
When merely overriding CSS, the Stylish extension is available for most browsers and is the faster easier choice.
For userscripts, go ahead and use GM_addStyle.

Anywho, this script works and gets rid of most of the gray (note that some pics are uploaded in black and white):

// ==UserScript==
// @name        pptvhd36.com, Remove Grayscale
// @match       https://www.pptvhd36.com/*
// @grant       GM_addStyle
// ==/UserScript==

GM_addStyle ( `
    html {
        filter:grayscale(0) !important;
        -webkit-filter:grayscale(0) !important;
    }
` );

Can't remove grayscale filter on some webpage

1 Answers1