Does anyone else find it a little ironic the electronic retailer SparkFun is advocating scripts to help Digikey have a Sort By Price function? Regardless, to reiterate now Firefox (and we hear Google Chrome too) users with the Greasemonkey plugin can sort Digikey items. Personally, some of us here are just Mouser fans at heart.

[Thanks Charper and Mohonri and Satiagraha, image credit Make]

Today we’re going to take a look at writing scripts for the Greasemonkey add-on for Firefox. This add-on allows us to use JavaScript to make changes to the way webpages are displayed on our browser. These changes can only be seen by a copy of Firefox that is running a particular script. As an example, we’re going to write a script that adds a border to the banner image of each article on Hack a Day by overlaying the image you see above. Find out how it’s done after the break.

Our Goal:

We want to make the top image for each article look like it has been printed with a white border and then taped on each corner to the page. This is an effect that we used to use on our posts and a Greasemonkey script is a good way to re-implement the effect if you miss that image style.

What You Need:

1. Install Firefox
2. Install the Greasemonkey add-on.
3. Download and install our script: hackaday_nostalgia.user.js

How It Works:

Greasemonkey runs JavaScript on top of the pages that have been loaded by Firefox. The first part of the file is a set of comments that tell Greasemonkey what it’s dealing with:

// ==UserScript== // @name           Hackaday Nostalgia // @namespace      http://hackaday.com // @description    Overlay photograph border and taped corners for article images at Hack a Day. // @include        http://hackaday.com/* // ==/UserScript==

The name, namespace, and include lines are all required for the script to work. Name is what you want to call your script. Namespace is a URL that identifies the script uniquely in case there are two scripts with the same name. Include tells Greasemonkey what pages this script should be applied to. In our case we only want to monkey with the images on hackaday.com so we’ve included all addresses from that domain.

Now that we’ve identified what pages we want to alter, we can parse the document and pull out the elements we want ot change. The first thing to do is examine the page source of our target:

<div class='snap_preview'><p><img class="alignnone size-full wp-image-17747" title="plotter-with-300w-laser" src="http://hackadaycom.files.wordpress.com/2009/10/plotter-with-300w-laser.jpg?w=470&h=313" alt="plotter-with-300w-laser" width="470" height="313" /></p>

With a little digging we can find the line you see above that includes the IMG element for the title of a post. We’re in luck, the page builds each post wrapped in a DIV of the Class ‘snap-preview’. We can use Greasemonkey to parse the page looking for these DIVs and then alter the first IMG element in each one:

//get all DIVs of the snap_preview class
var allDivs, thisDiv;
allDivs = document.evaluate(
 "//div[@class='snap_preview']",
 document,
 null,
 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
 null);

In the code above we are using the evaluate function to pick out DIVs that are in the ‘snap-preview’ class. We load them into an array called allDivs which we can then step through:

//step through each DIV
for (var i=0; i<allDivs.snapshotLength; i++) {
 thisDiv = allDivs.snapshotItem(i);

 //Alter the first img of each DIV
 var image = thisDiv.getElementsByTagName('img');

 //Make sure we've got an IMG in this DIV
 if (image[0]) {

 //Save original source URL
 var orig_src = image[0].src;
 //Concatenate for CSS use
 orig_src = 'url(' + orig_src + ')';
 //Set original as background
 image[0].style.background = orig_src;

 //Set Hack a Day overlay as image
 image[0].src = 'http://hackadaycom.wordpress.com/files/2009/10/had_frame.png';
 }
}

This block of code is where the magic happens. A loop is used to step through each DIV we grabbed in the previous code snippet. We grab the IMG element by using the getElementsByTagName function. All IMG elements are put into an array called ‘image’, but we only want to alter the first image in each post so we’ll always reference image[0].

For the image border and tape effect, we used the GIMP to create a PNG file that has transparency where we want the original picture to show through. We need the original picture to be behind the overlay so we’re making it a background image using the CSS property ‘background’. The PNG overlay is then set as the new SRC for the IMG element.

That’s all it takes, now images will be overlayed with the border image you see at the top of this post.

Benefits and Drawbacks:

There are some drawbacks to using this system; the overlay covers up the borders of the original image, older posts that already have this image effect will have it applied again, the overlay will be stretched to match each original image which can look weird depending on image height, and the overlay image we’ve provide is of rather low quality (you can probably do better yourself).

Our method uses a very small amount of code and doesn’t require the original image size to be recalculated.

The Next Step:

Now that we’ve showed you how to do this much, you may want to take it one step further. The original picture style also made the images black and white. Can you make the script do this as well? To get started in the right direction, you might want to look at the Pixastic JavaScript image manipulation library and its desaturate function.

Overwhelmed?

If you need some help deciphering what we did here just use your online resources:

• Dive into Greasemonkey: An online book to help you learn greasemonkey scripting
• HTML Dog: A best practices guide to HTML and CSS

Google’s Gmail is a highly viable option for email. With numerous features and options like widgets, a task list, labels, and chat, Gmail has a slight tendency to get overwhelming and might force us to loose focus on what it is really all about: email.

What can make Gmail better? For starters, how about no ads; they are cluttering and distracting. What about getting rid of the widgets and unnecessary features like labels and chat that we think are supposed to make us more productive but really only make us lose our focus to send, read and reply to email? Nobody knows Zen better than [Leo] at Zen Habits. We weren’t surprised that he and his friends (with Firefox and Greasemonkey) have found a way to trim all the unnecessary elements from Gmail and make it into an email powerhouse that focuses on a basic productive email client. The minimalist inbox for Gmail consists of Greasemonkey scripts for:

• Removing gadgets
• Hiding labels, chat and footer
• Removing ads
• Removing stars
• Getting rid of the Gmail logo and searchbar
• Removing menu navigation bar
• Cleaning up and removing unnecessary buttons

To get started focusing on email, and only email, head on over to ZenHabits for a list of associated scripts and what exactly they can do to help you on your road to the minimalist Gmail.

This was certainly the last thing we expected to see today. [ShaunF] has created a Greasemonkey script to bypass the captcha on filehosting site Megaupload. It uses a neural network in JavaScript to do all of the OCR work. It will auto submit and start downloading too. It’s quite a clever hack and is certainly helped by the simple 3 character captcha the site employs. Attempting to do the same thing with ReCAPTCHA has proven much more difficult.

UPDATE: [John Resig] explained of how it works.

[via Waxy]

The three extensions we always end up installing are Firebug, Greasemonkey, and Flashblock. What are yours?