Boontawee Home Boontawee Home - 3 years ago 199
CSS Question

Can't remove grayscale filter on some webpage

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?

Answer Source

Note:

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

  2. When merely overriding CSS, the Stylish extension is available for most browsers and is the faster easier choice.

  3. 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;
    }
` );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download