How to access web console from Greasemonkey userscripts

Userscripts are helper Javascript programs that you can add to your browser to automate and optimize the web pages you visit. Greasemonkey is a Firefox extension to run userscripts. The web console is a tool built into Firefox and other browsers that can be helpful during userscript development.

How can you access the web console from Greasemonkey userscripts? First of all, you should not do this in production. However, logging to the web console can be a useful tool during development.

Here’s how you do it:

// Put this at the top of your userscript
var console = unsafeWindow.console;

Bonus: How to access your userscript’s jQuery from the web console

// Expose userscript's jquery to the web console
unsafeWindow.$ = $;

Again, do not do this in production.

Userscript for faster deletion of MediaWiki spam

A couple weeks ago I posted a userscript that makes banning MediaWiki spammers easier by setting good defaults for the user ban form. Since then, I’ve had to ban a lot of spammers, so I thought I should remove another point of friction.

For some reason, MediaWiki chooses to not provide direct deletion links on the User Contributions page, so after banning a spammer you have to click through to each piece of spam before deleting it. This may have been an acceptable user experience in Web 1.0 days, but it’s a ridiculous set of hoops to jump through today.

My goal is to eventually make banning a spammer and deleting all the spam they’ve posted a one-click process. If there’s an existing solution for this, I’d love to hear about it.

Since I needed to do some DOM manipulation, I chose to use jQuery in the userscript. This was also a lot easier than I might have expected. Userscripts really are a very solid technology.

// ==UserScript==
// @name           Mediawiki - Fast delete on user contributions view
// @namespace      https://userscripts.org/users/457667
// @description    Adds a delete link for every page on the user contributions view
// @include        http://example.com/index.php/Special:Contributions/*
// @require        https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==

// Add page delete links to the user contributions page
function enhanceHistory() {
  "use strict";

  // Find the history link for each revision
  $('#bodyContent ul li')
    .find('a[href*="action=history"]')
    .each(function(i) {
      // Append a page delete link after each history link
      var url = this.toString().replace('action=history', 'action=delete');
      $('<span> | </span><a href="' + url + '">del</a>').insertAfter($(this));
  });
}

enhanceHistory();

I passed the above through JSHint to make sure there’s nothing silly in it, but I haven’t consulted the jQuery style guide so it may not conform to the usual formatting.

The page delete links still lead to a standard confirmation form, so this doesn’t violate the RESTful practice of only using links for reading content rather than changing it.

Here’s a screenshot of what it adds to the user interface:

Userscript to make banning MediaWiki spammers easier

Somehow, I’ve come to be responsible for administering two MediaWiki-powered wikis. The main burden is having to ban spammers, which sometimes sign up in batches of 20 at a time.

To help with process, I’ve put together the following browser userscript. On Firefox, you can easily set it up using the Greasemonkey extension. Opera and Chrome have their own facilities.

The script basically makes the default values on the user ban form sane, so I can just click through without fiddling with dropdown and checkboxes. Obviously, the ban has to be permanent. Obviously, I don’t want spammers emailing anyone.

// ==UserScript==
// @name           Blocker
// @namespace      https://userscripts.org/users/457667
// @include        http://example.com/index.php/Special:Block/*
// ==/UserScript==

// Set default expiry to 'infinite' or 'indefinite', depending on MediaWiki version
function makeExpiryInfinite () { "use strict";
  // Get the element
  var elExpiry = document.getElementById('wpBlockExpiry');
  if (!elExpiry) { elExpiry = document.getElementById('mw-input-wpExpiry'); }

  // Abort if element not found
  if (!elExpiry || !elExpiry.children) { return; }

  // Find the infinite option
  var expiryNodes = elExpiry.children;
  var index = 0;
  for (var i in expiryNodes) {
    if (expiryNodes[i].label && expiryNodes[i].label in {infinite:1, indefinite:1}) {
      index = i;
    }
  }

  // Set dropdown to the infinite option
  elExpiry.selectedIndex = index;
}

// Automatically prevent user from sending e-mail
function preventEmail() { "use strict";
  // Find check box
  var elEmailBan = document.getElementById('wpEmailBan');
  if (!elEmailBan) { elEmailBan = document.getElementById('mw-input-wpDisableEmail'); }

  // Abort if it's not there
  if (!elEmailBan) { return; }

  // Check the box
  elEmailBan.checked = true;
}

// Automatically prevent user from sending e-mail
function reallyBanThatIP() { "use strict";
  // Find check box
  var elHardBlock = document.getElementById('mw-input-wpHardBlock');
  if (!elHardBlock) { elHardBlock = document.getElementById('mw-input-wpHardBlock'); }

  // Abort if it's not there
  if (!elHardBlock) { return; }

  // Check the box
  elHardBlock.checked = true;
}

makeExpiryInfinite();
preventEmail();
reallyBanThatIP();

I’ve been hearing wonderful things about userscripts for years, but this is the first one I’ve put together for myself. It’s actually very easy to write these, assuming you know Javascript and have tools like Firefox’s Web Console and the Web Developer extension handy.

I’m planning to enhance it a little so that it handles the slightly different form for banning anonymous users, but I’m not sure if it makes sense to submit to any official repository. It helps with running small wikis that have open memberships, so there isn’t any one site I can identify it with. Obviously, it’s not suited for Wikipedia, as they have a very different set of problems.

Edit: Updated the script with better handling for banning anonymous users by IP address.

setTimeout() require qualification

The two javascript functions above are very useful. The first one executes something after a set delay, and the second executes something at regular intervals. The syntax is very similar.

var time = 2000; // 2 seconds
window.setTimeout(function() { alert('Yay!'); }, time);
window.setInterval(function() { alert('Woo!'); }, time);

Unfortunately, they weren’t working for me earlier. It turns out I wasn’t fully-qualifying them. Specifically, I was calling setTimeout() rather than window.setTimeout(). The latter works.

Most examples use the abbreviated form, which consistently doesn’t work for me.

ECMAScript 4

John Resig has posted a whitepaper outlining the new features in ECMAScript4 (aka the Javascript standard), how it differs from ECMAScript3, and the rationale for any incompatibilities.

Many of the features have already made their way into Opera and Firefox, which is at Javascript 1.7 level. ES3 is equivalent to JS1.3, and ES4 is the basis for forthcoming JS2.

I look forward to optional strict typing, multiline strings, comprehensions, and generators making their way into browsers. A lot of the new features make Javascript more like Python without losing all the nice things tabout Javascript.

Creating Start Menu shortcuts with Javascript

While preparing the installer for the Web 2.0 Starter Toolkit for IBM DB2, I had to set up Start Menu shortcuts. The way to do that is to work through the Windows Scripting Host (WSH).

The WSH supports two built-in languages – VBScript and Jscript – and a theoretical number of third-party alternatives. VBScript is the better documented of the two in terms of examples, but I find its syntax ugly and constrained. Fortunately, Jscript can do anything VBScript can.

So here’s how we can create Start Menu shortcuts with Javascript.

Locate the Start Menu Programs folder

Most interesting Windows folders can be found by working with special folders

var shell = new ActiveXObject("WScript.Shell");
var startmenu = shell.SpecialFolders("Programs");

The shell object will be reused in code below, but you can redeclare it every time if you like.

Create a Folder

Scripting Guy has more details

var folder = "My App";
var group = startmenu + "\\" + name;

var fso = new ActiveXObject("Scripting.FileSystemObject");
if (!fso.FolderExists(folder)) fso.CreateFolder(folder);

startmenu is defined above.

Create an LNK Shortcut

The very hidden file extension of standard Windows shortcuts is LNK. This distinguishes them from website shortcuts, which have the equally hidden extension of URL.

If you are interested in something closer to the symbolic links of Unix, the NTFS equivalent is called junctions. You may find Junction Link Magic of interest.

var name = "My Shortcut";
var file = "myfile.txt";
var path = "C:\\Program Files";

var shortcut = shell.CreateShortcut(group + "\\" + name + ".lnk");
shortcut.TargetPath = path + "\\" + file;
shortcut.WorkingDirectory = path;
shortcut.Save();

See the full list of properties. I recommend always setting the working directory for application links. If you don’t, your program won’t be able to load resources from it’s installation folder.

shell and group are defined above.

Create a URL Shortcut

This is very similar. The main difference is that you set the extension to URL.

var name2 = "My Other Shortcut";
var address = "http://example.org/";

var shortcut = shell.CreateShortcut(group + "\\" + name2 +".url");
shortcut.TargetPath = address;
shortcut.Save();

See the full list of properties.

shell and group are defined above.

Locate Program Files

When creating shortcuts, it is often useful to know where a user’s Program Files directory is located. It is called different things in different versions of Windows, and some advanced users like to move it or rename it.

var REG_PF = "HKLM\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\ProgramFilesDir";

var progFiles = null;
var process = shell.Environment("PROCESS");
if (process)
	progFiles = process("ProgramFiles");
if (!progFiles)
	progFiles = shell.RegRead(REG_PF);

shell is defined in the first code excerpt.

Reflection in Javascript

It’s very easy to do reflection in Javascript. Reflection is when your code looks onto itself to discover its variables and functions. It allows two different Javascript codebases to learn about each other, and it’s useful for exploring third-party APIs.

Preamble

In Javascript, all objects are hashes/associative arrays/dictionaries. A hash is like an array, except that values are associated with unique key string rather than a numeric index.

Adding a new variable to an object is as simple as assigning a new value to a key in the object.

You can declare everything in place:

var o = {
	count: 0,
	name: 'Jane Doe',
	greeting: function() { return "Hi"; }
};
o.greeting();

Or you can start with a blank object and assign things later:

var o = {};

o.count = 0;
o.name = 'Jane Doe';
o.greeting = function() { return "Hi"; };

o.greeting();

Or you can do the same, but in a different notation:

var o = {};

o['count'] = 0;
o['name'] = 'Jane Doe';
o['greeting'] = function() { return "Hi"; }

o.greeting();

The last is especially handy because it allows you to go from the string name of the variable to the variable without the performance penalties of eval().

{} is synonymous with new Object().

Reflection

The loop below pops up a dialog box with the name and value of every variable in object:

for (var member in object) {
	alert('Name: ' + member);
	alert('Value: ' + object[member]);
}

Everything in Javascript is an object. Functions are objects! document and window are objects. The most reliable reference for Javascript in a given browser is reflection into its innards.

Finally, some slightly more useful code:

/**
	Returns the names of all the obj's
	 variables and functions in a sorted
	 array
*/
function getMembers(obj) {
	var members = new Array();
	var i = 0;

	for (var member in obj) {
		members[i] = member;
		i++;
	}

	return members.sort();
}

/**
	Print the names of all the obj's variables
	 and functions in an HTML element with id
*/
function printMembers(obj, id) {
	var members = getMembers(obj);
	var display = document.getElementById(id);

	for (var i = 0; i < members.length; i++) {
		var member = members[i];
		var value = obj[member];
		display.innerHTML += member + ' = ';
		display.innerHTML += value + '<br>';
	}
}

More sophisticated uses are left as an exercise for the reader. :-)