Search code examples
javascriptgoogle-chromedebuggingconsolereddit

Google Chrome call a JS Script Console?


I'm trying basically, what is done here: Calling a Javascript Function from Console

Just in another way that I can't find out.

At reddit.com I'm trying to remove that Try the Redesign button. If you F12 using Google Chrome while in reddit.com you should be able to see Application, you click that and then go to scripts and search for OptIn using CTRL+F. Then you find the code, I'll just put some part of it in here.

    function f() {
        a("redesignbanner", "click", "r2banner_dismiss")
    }

this

e.actions.on("onboarding:redesignbetabarClose", f),
e.actions.on("onboarding:redesignbetabarClickOptIn", c),

and this

        initBanner: function() {
            var n = $(".redesignbetabar");
            if (!n.length)
                return;
            $("#redesign-beta-optin").on("click", function() {
                e.actions.trigger("onboarding:redesignbetabarClickOptIn"),
                t(function() {
                    e.onboardingBar.setDismissed(n.data(), !0),
                    window.location.reload(!0)
                }, function(t, n, i) {
                    e.warn("Error opting in to redesign", n, ";", i)
                })
            })
        }

Do you see that e.onboardingBar.setDismissed(n.data(), !0)? Basically, I tried to run this too, but I couldn't figure out how.

My point is to remove that button on the top right, which looks like this.

Try the Redesign

If you don't know how to get that button, I'll tried to figure out how and found out how to get it.

You go to the reddit account settings on the top right > scroll down and check, Use the redesign as my default experience > then you click on save

and then you go again to settings or if you are still there, just uncheck it and the button should appear, which is annoying and I can't get rid of it, seems that I didn't had this problem before also others have it but not all and thats weird.


Solution

  • Since Reddit wraps almost all of their JavaScript code in anonymous functions, you are unable to access the variables and functions defined within them. For example, see the following code:

    (function() {
      var x = 2;
    })();
    

    The variable x can not be accessed from anywhere except inside that anonymous function, and since that function has no name, there is no way to refer to it or access anything inside of it.

    Reddit does the same thing with their code, meaning you can't call any of those methods. However, there is another way to hide the button using CSS. The button has the class "redesign-beta-optin", so the following CSS will hide the button:

    .redesign-beta-optin { display: none }
    

    This can be done with JavaScript like so:

    document.getElementsByClassName("redesign-beta-optin")[0].style.display = "none"
    

    EDIT

    To get rid of the button permanently, you can use a Chrome extension such as Tampermonkey or Stylish that allows you to run JavaScript and CSS on certain web pages.

    To do this with Tampermonkey, create a UserScript with the following contents:

    // ==UserScript==
    // @name Reddit Redesign Button Remover
    // @description  Remove reddit redesign button
    // @author       kmh
    // @match        https://*.reddit.com/*
    // ==/UserScript==
    
    document.getElementsByClassName("redesign-beta-optin")[0].style.display = "none";
    

    With Stylish, you can create a new style for the domain reddit.com with the contents:

    .redesign-beta-optin { display: none }
    

    You will notice a small period of time as the site is loading with the button there if you use Tampermonkey, since it takes some time to initialize. This does not happen with Stylish.