3
\$\begingroup\$

When looking at people you may know on LinkedIn (requires you to be logged in) there are sometimes some annoying boxes that are for people who are email contacts but not on LinkedIn. I don't want to see these. If I wanted to connect with them and invite them to LinkedIn, I would have. So I wrote a userscript! I wrote a few versions, because I wasn't sure about all of these things. I've never written a userscript before, so let me know if any of this is weird, or not idiomatic, or something

This version uses jQuery! That seems like overkill though...

// ==UserScript== 
// @name Hide invites
// @namespace http://dannnno.github.io/
// @description Hides those "Invite to network boxes" on LinkedIn
// @include https://www.linkedin.com/people/pymk/hub/* 
// @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
// @grant GM_log
// ==/UserScript==

$(document).on('scroll', function (event) {
    $('li.card.guest').hide();
});

This version uses jQuery in a Chrome compatible way:

// ==UserScript== 
// @name Hide invites - Chrome compatible
// @namespace http://dannnno.github.io/
// @description Hides those "Invite to network boxes" on LinkedIn in a Chrome compatible way
// @include https://www.linkedin.com/people/pymk/hub/* 
// @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
// @grant GM_log
// ==/UserScript==

var version = "2.1.4";

// Code adapted from http://stackoverflow.com/a/12751531/3076272
if (typeof jQuery !== "function") {
    add_jQuery(version);
}

function add_jQuery (jqVersion) {
    var jqVersion = jqVersion || version;
    var targ = document.getElementsByTagName('head')[0] || document.body || document.documentElement;
    var scriptNode = document.createElement('script');
    scriptNode.src = 'http://ajax.googleapis.com/ajax/libs/jquery/' + jqVersion + '/jquery.min.js';
    scriptNode.addEventListener("load", function () {
        var scriptNode = document.createElement("script");
        scriptNode.textContent = 'jQuery.noConflict(true);';
        targ.appendChild(scriptNode);
    }, false);
    targ.appendChild(scriptNode);
}

jQuery(document).on('scroll', function (event) {
    jQuery('li.card.guest').hide();
});

And this version does it without jQuery:

// ==UserScript== 
// @name Hide invites - no jQuery!
// @namespace http://dannnno.github.io/
// @description Hides those "Invite to network boxes" on LinkedIn without jQuery
// @include https://www.linkedin.com/people/pymk/hub/* 
// ==/UserScript==

// Throttling adapted from https://developer.mozilla.org/en-US/docs/Web/Events/scroll
(function() {
    var throttle = function(type, name, obj) {
        var obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };

    throttle("scroll", "optimizedScroll");
})();

// handle event
window.addEventListener("optimizedScroll", function() {
    var results = document.querySelectorAll('li.card.guest:not([style*="display:none"]):not([style*="display: none"])';
    for (var i = 0; i < results.length; ++i) {
        results[i].style.display = "none";
    }
});

Some bits of these were adapted from other sources (there are code comments to that effect). Feel free to review those as much or as little as you'd like.

\$\endgroup\$
2
\$\begingroup\$

After I did a little playing around in a LinkedIn page's source code and I found out that LinkedIn already uses jQuery: that means you don't need to worry about checking if jQuery exists in the page because the page already has it.

Therefore, you can strip away all the jQuery injection nonsense, leaving your code looking like this;

var version = "2.1.4";

jQuery(document).on('scroll', function (event) {
    jQuery('li.card.guest').hide();
});

If you would like a review on how you did the on the vanilla JavaScript, leave a comment.

\$\endgroup\$
  • \$\begingroup\$ Please review any and all code \$\endgroup\$ – Dannnno Aug 24 '15 at 4:33
  • \$\begingroup\$ Re-reading your code, there is not really much to review. The majority of your vanilla JS code is just a function that you borrowed from MDN. Other than that, all you are doing is looping through an array of elements that you found with document.querySelectorAll. \$\endgroup\$ – SirPython Aug 24 '15 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.