Tampermonkey Tutorial

In an effort to stay abreast of developments on the World Wide Web, I subscribe to the CodeProject’s excellent newsletter: The Daily Insider. Now, when I open this newsletter in my browser, I’m presented with a whole bunch of links (usually 12) that I want to open. It was getting a bit bothersome to open all of these manually, so I decided to write a userscript to do it for me.


Update 22.08.2013: I published a second Tampermonkey tutorial.

Be sure to check that out, too.


For those of you who don’t know, userscripts are small snippets of JavaScript code that change the behaviour of a website. Google Chrome (my browser of choice) supports userscripts out of the box, however, to make the whole process of writing and testing one a little more comfortable, the first thing I did, was to install Tampermonkey, a userscript manager for Google Chrome.

To install Tampermonkey, head on over to the Chrome web store, search for Tampermonkey, then click Add to Chrome. Once the extension is installed, you’ll see a little icon in the top right hand corner of your browser window that looks like this:

Tampermonkey browser icon

To create a new script click on this icon, then select Add a new script… A new tab will open which looks like this:

Tampermonkey screenshot - create new script

So, let’s fill those details out. They’re all fairly self explanatory, except perhaps line 6 (which begins @match). Here, using a regular expression, you can specify a full or partial URL. When this regular expression matches your current URL, Tampermonkey will fire the script.

// ==UserScript==
// @name Open CodeProject Links
// @namespace http://hibbard.eu/
// @version 0.1
// @description  Opens links from the CodeProject newsletter
// @match http://www.codeproject.com/script/Mailouts/*
// @copyright 2012+, hibbard.eu
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==

As you can see, I have specified that this script should run when I visit any site beginning with http://www.codeproject.com/script/Mailouts/. All CodeProject newsletters start with this address, you can see a sample one here:

http://www.codeproject.com/script/Mailouts/View.aspx?mlid=9776&_z=6134961

Also worthy of note is the fact that I have required the latest version of jQuery in the final line.

So, with this in place we’re ready to begin. The first thing to do is to get a list of all of the links that we want to open. Luckily, each link we’re interested in is enclosed within a div which has a class of headline.

var hrefs = new Array();
var elements = $('.headline > a');
elements.each(function() {
  hrefs.push($(this).attr('href'));
});

Now let’s add a button to the page and position it in the top left corner:

$('body').append('<input type="button" value="Open" id="CP">')
$("#CP").css("position", "fixed").css("top", 0).css("left", 0);

Now all we need to do is attach an event listener, so that when the button is clicked, all of the links are opened in new tabs.

$('#CP').click(function(){
  $.each(hrefs, function(index, value) {
    setTimeout(function(){
      window.open(value, '_blank');
    },1000);
  });
});

You might wonder why I’ve used JavaScript’s setTimeout function. Well, the reason is that otherwise Chrome opens the first two links as tabs, then the remaining ten links as popups. I don’t know why this is, but in this case, setting a small delay seemed to solve the problem.

And there you have it, a small script that saves me twelve additional clicks per day. It might not seem much, but that’s 60 unnecessary clicks per week, or 3,120 unnecessary clicks per year. I guess I might be able to avoid RSI for a while longer.

Here’s a listing of the complete code:

// ==UserScript==
// @name       Open CodeProject Links
// @namespace  http://hibbard.eu/
// @version    0.1
// @description  Opens links from the CodeProject newsletter
// @match      http://www.codeproject.com/script/Mailouts/*
// @copyright  2012+, hibbard.eu
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==

$(document).ready(function() {
  var hrefs = new Array();
  var elements = $('.headline > a');
  elements.each(function() {
    hrefs.push($(this).attr('href'))
  });

  $('body').append('<input type="button" value="Open Links" id="CP">')
  $("#CP").css("position", "fixed").css("top", 0).css("left", 0);
  $('#CP').click(function(){
    $.each(hrefs, function(index, value) {
      setTimeout(function(){
       window.open(value, '_blank');
      },1000);
    });
  });
});

And here’s proof that it actually works:

The finished product


This post currently has 8 responses

  1. Zabbix says:

    Pretty cool buddy! Thank you!

  2. nhduc says:

    But i dont know how to run the script after create it …

    • hibbard.eu says:

      If you have specified the url correctly in the @match directive, then it should run automatically.

  3. aj says:

    OS windows 7
    Browser Chrome
    script manager tamper monkey
    target website symbianize.com
    hi,

    i just want to ask some help regarding tamper monkey. i just learned that it can change some elements of a website.

    so what i want to happen is a quick help to change the color of hyperlinks on a website from orange to blue or any color. if you could teach me that simple step i could do the rest..

    i have basic knowledge with html and css, and i want to apply this to userscript to change the behavior of the website.

    i would really appreciate your help.

    thanks,
    aj

    • hibbard.eu says:

      Hi,

      Thanks for your comments.

      You can do what you ask like this:

      // ==UserScript==
      // @name       Change link colour
      // @match      http://whatever
      // @require http://code.jquery.com/jquery-latest.js
      // ==/UserScript==
      
      $(document).ready(function() {
        $("a").css("color", "blue");
      });
      
  4. aj says:

    links in the post / thread it self if possible.. i am still looking for the css for the specific a:link to target..

  5. v_v says:

    thanks for help !

  6. fly ash says:

    Just want to warn you that using the ‘latest’ jQuery instead of specifying a specific version is highly discouraged. You can read more about it here:
    http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/

Comments are closed!