Week 2: Rando by Ben Grosser (Code Critique)

To round out this week on Critical and Creative Coding, we offer code from a Facebook app called Rando by artist Ben Grosser (@grosser). Like his Demetricator, the piece is part of Grosser's larger project to disrupt Facebook's control of its users.

In Ben's words:

Facebook’s “reactions” let you quickly express how you feel about a link, photo, or status. While such data might be helpful for your friends, these recorded feelings also enable increased surveillance, government profiling, more targeted advertising, and emotional manipulation. Go Rando is a web browser extension that obfuscates how you feel. Every time you click “Like”, Go Rando randomly chooses one of the six Facebook “reactions” for you. Over time you'll appear to Facebook’s algorithms as someone whose feelings are perfectly balanced—as someone who feels Angry as much as Haha or Sad as much as Love. You can still choose a specific reaction if you want to, but even that choice will be obscured by an emotion profile increasingly filled with noise. In other words, Facebook won’t know if your reaction was genuine or not. Want to see what Facebook feels like when your emotions are obscured? Then Go Rando!

Consider Rando in the context of the Week 2 theme.

Language: Javascript
Author: Ben Grosser

// ==UserScript==
// @name Go Rando
// @version 1.0.0
// @author Benjamin Grosser
// @namespace com.bengrosser.gorando
// @description Obfuscates your feelings on Facebook.

// @updateURL http://bengrosser.com/share/gr/go-rando.meta.js
// @downloadURL https://bengrosser.com/share/gr/go-rando.user.js
//
// @match *://*.facebook.com/*
// @include *://*.facebook.com/*
// @exclude *://*.facebook.com/ai.php*
// @exclude *://*.facebook.com/ajax/*
// @exclude *://*.facebook.com/dialog/*
// @exclude *://*.facebook.com/connect/*
// @exclude *://*.facebook.com/plugins/*
// @exclude *://*.facebook.com/xti.php*
//
// @icon http://bengrosser.com/share/gr/go-rando-logo-256.png
//
// ==/UserScript==// -----------------------------------------


// ******************************************
//
// Ben Grosser
//
// Go Rando
// 2017
// web browser extension
//
// (Started March, 2016 -- Released February, 2017)
//
// Premiere Exhibition:
// Blinding Pleasures
// Arebyte Gallery
// London, UK
// 10 Feb - 18 Mar, 2017
//
// Obfuscates your feelings on Facebook
// http://bengrosser.com/projects/go-rando/
//
// Thanks to my Beta Test Team!!
// --Janelle Gunther
// --Owen Mundy
// --Raphaël Duracell
//
// Thanks to Sebastian Frith for his Illustrator prowess!
//
// Big thanks to Kate McDowell, who suggested "Rando" as part 
// of the title!
//
// And special thanks to Filippo Lorenzin, curator of the 
// Blinding Pleasures exhibition, for all his help and support 
// for this work!
//
//
//
// ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢀⠠⠨⢀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠀⠐⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⢈⠀⠀⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠠⠠⢙⣿⣿⣿⣿⣿⣿⢉⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠠⢐⣿⠀⠀⣿⣿⣿⣿⣿⢐⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠁⡟⣿⣿⠠⠠⠠⠠⠀⠀⠀⠀
// ⠀⠀⠀⠈⠠⢘⣿⣿⣿⣿⣿⣿⣿⣿⢲⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠁⣿⣿⣿⠀⠀⠀⣿⢐⠠⠠⠠⠠⠀⠀⠀
// ⠀⠀⢀⠠⠠⠠⠠⢰⣿⠀⠀⠀⠀⠀⠀⡓⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⣿⣿⠀⠀⠀⣿⣿⣿⢢⠠⠠⠠⠠⠠⠠⠠⠀⠀
// ⠀⠀⠠⠠⠠⠠⠠⣏⣿⠀⠀⠀⠀⠀⠀⣿⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠫⣿⣿⣿⠀⠀⠀⣿⣿⣿⢈⢀⢀⠠⠠⠠⠀⠀
// ⠀⠠⠠⠠⠠⠠⢘⡍⣿⠀⠀⠀⠀⠀⣿⢉⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⢐⡍⣿⣿⣿⠀⣿⢰⠈⠈⠐⠠⠠⠠⠀
//  ⠠⠠⠠⠠⠠⢈⠠⣆⣿⠀⠀⣿⣿⢘⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⢈⠠⠠⠠⠠⠁⣿⣿⣿⣿⠁⢈⠁⠠⠈⠈⠠⠠⠠⠠⢀
//  ⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⠨⢐⠰⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⢘⠠⠠⠠⠠⠹⣿⠀⠀⠀⠀⣿⢍⠠⢰⣿⣿⠰⢘⠠⠠⠰
// ⠀⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⢈⢈⠠⠨⢈⠠⠠⠠⠠⠠⠠⠠⠠⢐⠠⠠⠠⠠⢈⡃⠀⠀⠀⠀⠀⠀⣿⣿⠀⠀⣿⢬⠰⠠⠠⠀
// ⠀⠠⠠⠠⠠⠠⠠⠠⠠⠠⠠⢈⢈⢈⠂⠠⠠⠠⠠⠠⠠⠠⠠⢈⠨⢼⣿⣿⠀⣿⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠺⠰⢈⠠⠠⠠⠀
// ⠀⠀⠠⠠⠠⠠⠠⠠⠑⢩⢙⢩⣈⣈⢙⢙⢙⢙⢙⢙⢙⢙⢙⢈⠠⢨⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⣿⠨⢈⢐⠘⢈⠠⠠⠠⠀⠀
// ⠀⠀⠈⠠⠠⠠⠠⡤⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⠠⠠⠠⠠⢘⢈⠠⠙⣿⣿⣿⣿⢘⠠⠠⠠⠠⠠⠠⠠⢀⠀⠀
// ⠀⠀⠀⠀⠠⠠⠠⢠⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠿⢈⠠⠠⢈⠨⠠⠠⠹⣿⠓⠠⠠⠠⠠⢀⠀⠀⠀
// ⠀⠀⠀⠀⠠⠠⠠⠠⢘⣿⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⣿⣍⠠⠠⠠⠠⠽⣿⣿⣿⢑⠠⠠⠠⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠠⠠⠠⠠⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢌⢘⠠⠠⡡⣿⣿⢘⠠⠠⠠⡇⣿⣿⣿⣿⣿⢴⠀⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠀⠀⠠⠠⠠⠠⠩⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡈⠠⠠⠠⠠⠠⠠⠠⠠⠠⣠⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⠠⠠⠠⠋⣿⣿⣿⣿⣿⣿⣿⣿⡈⠠⠠⠠⠠⠠⠠⠠⠠⠙⣿⣿⣿⣿⣿⣿⣿⣿⢰⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⠠⢀⠠⠉⢔⠾⡓⡖⠨⠠⠠⠠⠠⠠⠠⠠⠠⠠⣿⣿⣿⣿⣿⣿⣿⣿⢈⠀⠀⠀⠀⠀
// ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠨⣞⣏⢷⠀⠀⠀⠀⠀⠀⠀⠀⠀
//
//
// ************************************************************


var j;
var IS_SAFARI_OR_FIREFOX_ADDON = true;
var LIKE_BLOCK_PARENT = '._khz';
var VERSION_NUMBER = '1.0.0';
var attaching = false;
var LANG = "en";

var reactionLabelsEN = ["Like","Love","Haha","Wow","Sad","Angry"];
var reactionLabelsFR = ["J’aime","J’adore","Haha","Wouah","Triste","Grrr"];
var reactionLabelsDE = ["Gefällt mir","Love","Haha","Wow","Traurig","Wütend"];
var reactionLabelsES = ["Me gusta","Me encanta","Me divierte","Me asombra","Me entristece","Me enoja"];
var reactionLabelsPT = ["Curtir","Amei","Haha","Uau","Triste","Grr"];
var reactionLabelsIT = ["Mi piace","Love","Ahah","Wow","Sigh","Grrr"];

var pickingTextEN = "Picking...";
var pickingTextFR = "Sélection...";
var pickingTextDE = "Auswählen...";
var pickingTextES = "Selección...";
var pickingTextPT = "Seleção...";
var pickingTextIT = "Selezione...";


function main() {
    var startURL = window.location.href;

    // Firefox/Safari Extensions/Userscripts don't allow 
    // excludes in the URL match, so we do it here.
    if(IS_SAFARI_OR_FIREFOX_ADDON) {
        if(startURL.contains("ai.php") || 
           startURL.contains("/ajax/") ||
           startURL.contains("/dialog/") ||
           startURL.contains("/connect/") ||
           startURL.contains("/plugins/") ||
           startURL.contains("/xti.php")
           ) return; 
    }

    // console reporting
    console.log("Go Rando "+VERSION_NUMBER);
    console.log("    --> "+startURL);

    // setup jQuery on j to avoid any possible conflicts
    j = jQuery.noConflict();

    // determine language. 
    LANG = j('html').attr('lang');

    if(!(LANG == "en" || LANG == "fr" || LANG == "de" ||
         LANG == "es" || LANG == "pt" || LANG == "it")) {
        console.log("Go Rando --> unsupported language detected ("+LANG+")"); 
        console.log("Go Rando --> defaulting to English");
        LANG = "en";
    }

    // monitor the DOM for insertions
    var watchNode = document.querySelector('body, ._5pcb');

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if(mutation.type == "childList" && !attaching) {
                attaching = true;

                for(var i = 0; i < 2000; i+=250) {
                    delayedSetup(i);
                }
            }
        });
    });

    observer.observe(watchNode, { childList: true } );

    // run a few times for each insertion to catch 
    // slower-loading nodes
    function delayedSetup(t) {
        setTimeout(function() {
            setupReactionsBlock(j(LIKE_BLOCK_PARENT));
            if(t == 1750) attaching = false;
        }, t);
    }
}

// find the correct Like buttons and attach an obfuscator
function setupReactionsBlock(n) {
    n.
        not('.reactionObfuscated').
        addClass('reactionObfuscated').
        find('.UFILikeLink').
        each(function() {
            attachReactionObfuscator(j(this));
        }
    );
}

// binds a function to every Like button so that a click
// triggers an obufscation rather than regular "Like"
function attachReactionObfuscator(n) {
    var reactionLabels;
    var likeText;
    var pickingText;

    if(LANG == "en") {
        reactionLabels = reactionLabelsEN;
        pickingText = pickingTextEN;
    } else if(LANG == "fr") {
        reactionLabels = reactionLabelsFR;
        pickingText = pickingTextFR;
    } else if(LANG == "de") {
        reactionLabels = reactionLabelsDE;
        pickingText = pickingTextDE;
    } else if(LANG == "es") {
        reactionLabels = reactionLabelsES;
        pickingText = pickingTextES;
    } else if(LANG == "pt") {
        reactionLabels = reactionLabelsPT;
        pickingText = pickingTextPT;
    } else if(LANG == "it") {
        reactionLabels = reactionLabelsIT;
        pickingText = pickingTextIT;
    }

    likeText = reactionLabels[0];

    n.click(function(e) { 

        var likeON = false;
        if(n.hasClass('UFILinkBright')) likeON = true; 

        if(!likeON) {

            var pick = Math.floor(Math.random() * reactionLabels.length);
            var r = reactionLabels[pick];
            var lp = n.parent();

            function setThinking(jn) {
                j(jn).hide();
                return j(jn)
                        .parent()
                        .prepend("<a class='gr_picking'>"+pickingText+"</a>")
                        .promise();
            }

            setThinking(j(this)).done(function() {
                setTimeout(function() {
                    var t = lp.find('._iuw[aria-label="'+r+'"]');

                    if(t.length) {
                        if(r != likeText) t.click();
                        lp.find('.UFILikeLink').show();
                        lp.find('.gr_picking').remove();
                    } 
                    else {
                        lp.find('.UFILikeLink').show();
                        lp.find('.gr_picking').remove();
                    }
                }, 500);
            });
        }
    });
}


//
// ALL UTILITY BELOW HERE
//

// cleaner syntax than match()
String.prototype.contains = function(it) { return this.indexOf(it) != -1; };


// pasted jQuery 3.1.1 slim minified from 
// https://code.jquery.com/jquery-3.1.1.slim.min.js

See full code here.

Some starter questions:

-How does the code express Grosser's critical intervention?
-How does this code affect the way we see Facebook?
-In what ways does this code disrupt Facebook's functioning, serve or enhance it?
- Where do you sense Grosser's play and irony in the code?