Search code examples
cssgreasemonkeyuserscriptstampermonkey

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?

Solution

  • 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;
    }
` );