// Internet Duct Tape

Why Google Chrome Isn’t My Default Browser

Web Browser Tips & Tricks

Google Chrome has been public for all of about 30 minutes now. I am very impressed with how fast it downloads and installs, with almost no need for user prompts (except to close your web browser so it can import bookmarks/passwords). It’s fast as fast can be.

I can’t get over how fast it is. If you type “about:memory” into the address/search bar you’ll see a memory comparison between Chrome and any other web browsers you’re currently running. It uses so much less memory than Firefox.

Lifehacker has a good round-up of what’s “new” in Chrome, as well as ways to tweak Firefox to get the same features. But I can’t switch to Chrome because of my dependency on multiple profiles and my Firefox extensions.

Profiles?

Multiple profiles let me log into Gmail with different user accounts at the same time, and keep my browsing history and bookmarks separate from my girlfriend who shares the computer with me.

Heck, I keep my blogging related bookmarks separated from my Joe Public bookmarks for my day-to-day email, Facebook, and job related stuff so I can be more productive.

Plugins?

  • I can’t log into my accounts without Password Hasher. Not only do I not use the same password for every account, I don’t even KNOW my password for most accounts.
  • I don’t want to surf the web without Ad-block.
  • I’ve written so many custom Greasemonkey scripts that are unavailable on Chrome.
  • I don’t want to even think about doing any kind of web stuff without Firebug at my beck and call.
  • I’m missing my Delicious tag button for bookmarking.

RSS?

There doesn’t seem to be any RSS auto-discovery in Chrome. I hate how painful it is to subscribe to feeds in Google Reader using Internet Explorer, it looks like it’ll be even worse in Chrome.

Chrome looks very cool, but I think anyone who has been reading Lifehacker for the past few years is going to find they’re missing too much of what is “essential” to them. It’s really too bad, because I’d love to run some Greasemonkey scripts inside of Chrome with it’s better memory debugging. I’m hoping that one of the big brained Googlers figures out a way to transparently run Greasemonkey userscripts so we don’t have the same Firefox vs Opera vs Internet Explorer vs Safari development sinkhole.

On the other hand, Chrome might be the best thing ever for people who use Internet Explorer and aren’t co-dependent on all of Firefox’s wonderful extensions.

The World’s Stupidest Productivity Tip: Open All in Tabs

Lifehacks and Productivity

Here’s a stupidly easy tip for web browsing that can be a real time saver. It works in Firefox or Internet Explorer (and maybe even Safari). The trick is to bookmark all of the websites you commonly visit as one group so that you can open them all at once when it comes time for your daily maintenance.

For me, the list is:

Step 1: Open your favorite sites in tabs

Keep using Ctrl-T or middle-click to open sites in a new tab until you have a list of all the sites you normally visit at the start of a day.

Step 2: Bookmark the open tabs as a group.

This is where the magic happens. Instead of individually saving the bookmarks, you save them as a group/folder so that you can open them all at once.

In Firefox, use Bookmarks >> Bookmark All Tabs (Ctrl-Shift-D)

Hot Tip: Save to group under Bookmarks Toolbar so that they’ll be accessible from your Firefox toolbar.

In Internet Explorer, use Favorites >> Add Tab Group to Favorites

Step 3: Organize your bookmarks

If you want to remove a link from your group (because Facebook is a timesink) then you can use the organize feature of your web browser to add or delete bookmarks, or to reorder them.

In Firefox, use Bookmarks >> Organize Boomarks (Ctrl-Shift-B)

In Internet Explorer, use Favorites >> Organize Favorites

Step 4: Opening the group all at once

In Firefox, you can navigate to your bookmarks using the toolbar or the Bookmarks drop-down menu (depending on where you saved them in step 2) and choose Open All in Tabs.

In Internet Explorer, it’s a bit more complicated.

  • Click on the Star (for favorites)
  • Click on the arrow beside the tab group you just created

After that’s all done, you’ve probably saved yourself a few minutes a day of having to switch between sites you check out very often. Because they all start loading at the same time, it’s pretty quick to jump between them and grab the information you need.

Simple and Secure Computer Access While Traveling

Posted in Firefox and Greasemonkey, Lifehacks, Technology by engtech on July 28, 2008

Lifehacks and Productivity

There are no great solutions for accessing the Internet while travelling. Bringing a laptop has the convience that it is much easier to find free wi-fi than it is to find a computer with Internet access, but then you have the pain of bringing a laptop with you.

One solution is to use a USB key (USB thumb drive) to store your commonly used applications. So long as you have access to a computer with Internet you’ll be able to access the net with the applications, passwords and settings you’re comfortable with even if it’s at a pay-by-the-minute café, the business center at your hotel, or dial-up at a relative’s house. You don’t have to worry about your login information getting stolen because you aren’t leaving anything behind — everything is stored on your USB key.

You may even want to do this for any personal computer in a corporate environment. Lay offs could be around the corner, and you’ll be secure in the knowledge that your work PC won’t have any personal traces left behind after you’ve left the company because there was nothing personal on it in the first place.

This guide will show you how to:

  • Build an Encrypted PortableApps Drive
  • Download Portable Apps on to Your Encrypted USB Drive
  • Installing Firefox on your Encryped USB Drive
  • Installing a Live USB Linux Distro
  • Portable iTunes on Your iPod
  • Portable Remote Desktop Using LogMeIn

USB-Flash-Drive by _ES.
Photo by endlessstudio

(more…)

Filtering Reddit and Hacker News

Posted in Firefox and Greasemonkey, Reddit, Technology by engtech on May 23, 2008

Social Bookmarking and Social Voting

Giles had a fantastic rant this week that cut to the heart of what’s wrong with all of these “social web application sites”:

People who waste their own time have, in effect, more votes than people who value it – to elevate bad but popular ideas and irretrievably sink independent thinking.

It’s analogous to what’s wrong with the entire massively online roleplaying game genre (eg: World of Warcraft) in that success is a greater factor of the time invested than of skill or talent. Many social web applications add extra features to keep the users interacting with the site, even if this interaction offers dubious value to their lives.

(more…)

Become a Greasemonkey Ninja with jQuery

Posted in Firefox and Greasemonkey by engtech on May 08, 2008

Programming Tips

This is for all the Greasemonkeyers in the house who want to learn how to be much more productive when it comes to hacking together Greasemonkey script by using my favorite Javascript library: jQuery. jQuery will turn a 700 line Greasemonkey script into a 12 line Greasemonkey script. I learned about jQuery through all of the Greasemonkey scripts I created to work with Friend Feed.

This is advanced stuff that is of interest to people writing Javascript. If you’re just a Greasemonkey user then you can safely skip this one.

(more…)

How to Unminify Javascript Code

Posted in Firefox and Greasemonkey, Technology by engtech on May 02, 2008

Programming Tips

As websites have moved away from static pages to interactive updating displays, the modern Greasemonkey hacker has been forced to learn new tricks: namely interacting with the Javascript on a website. Sometimes that’s harder than it looks because the Javascript on the site you want to modify has been minified.

(more…)

Friend Feed Scripts: Unsubscribe, Who Are You and Better By Service

Posted in Firefox and Greasemonkey, friendfeed, Technology by engtech on April 10, 2008

Web Browser Tips & Tricks

It’s another week which means I have more Friend Feed scripts to share with you all.

(more…)

Greasemonkey Scripts: Friend Feed Auto-Pagerization, Resharing Links and Even More

Web Browser Tips & Tricks

It’s the last day of my week of Friend Feed and I have 5 more Greasemonkey scripts for you (for a total of 8). I think I’m done writing scripts for Friend Feed for the next little while. I might put together something for importing your Twitter contacts as friends (update: here it is) but if I wait long enough I’m sure they’ll do it as an official service.

As usual you’ll need Firefox and Greasemonkey to use these scripts.

(more…)

Tagged with:

Greasemonkey Scripts: Friend Feed Twitter Client and Remove Visited Links

Web Browser Tips & Tricks

“Friend Feed” week seems to be continuing at IDT. But don’t worry, there’s a team of trained attack Bonobo monkeys prepared to take me into a dark alley and beat me up and make me suffer if I don’t stop talking about Friend Feed. What can I say? This is what it looks like when a web app gets people excited. I’ve put together two more Greasemonkey scripts to add features I want in Friend Feed.

(more…)

Greasemonkey Script: Filter FriendFeed by Service

Web Browser Tips & Tricks

I’ve sipped the Kool Aid and I’m really liking Friend Feed as a lifestreaming aggregator. One feature that is a bit hard to find is filtering by individual services. I’ve created a Greasemonkey script that sticks a huge bar of icons at the top of the page to make this accessible.

  • It remembers the context you’re in.
    • If you’re browsing within friends, then clicking on the icons will filter by that service on your friends.
    • If you’re browsing within a specific user, then clicking on the icons will filter by that service on that person.
    • If you’re browsing the public timeline, then clicking on the icons will filter by that service for the public timeline.
  • It returns 100 results per page instead of 30.
  • It will automatically update itself if I update the script.

Let me know if you have any problems in the comments.

(more…)

Tagged with: ,

Programming Best Practices: Profiling

Posted in Firefox and Greasemonkey, Programming and Software Development, Technology by engtech on November 14, 2007

Programming Tips

My first task coming back from my work stress blogging hiatus is to finally fix problems with Akismet Auntie Spam that Lorelle reported over a month ago — if your Akismet spambox has over 10,000 spam comments then Auntie Spam is going to crash hard. Viewing that many comments at once will make Firefox use eight times more memory than normal web browsing, even without using Auntie Spam [1].
This means it’s time to do some code profiling [2]. In programming, profiling means to measure your code and find out which parts are using the most time and the most memory. Profiling gives you performance analysis measurements so that you can optimize your program for speed and/or memory.

“Don’t prematurely optimize” is a programming Best Practice, and it can be summed up in the words of my grandfather: “measure twice and cut once”. You can guess at what parts need fixing, but it is much more effective to measure how your program performs so that you can focus on the worst parts. They have the most room for improvement. Without profiling you could easily spend several hours optimizing a loop that executes in negligible time and ignore the three lines that copy huge chunks of memory for No Apparent Reason. Get it working, and then use your profiler to get it working fast.

Profiling is a Skill

I’ve been creating Greasemonkey scripts using javascript for a year now, and this is my first time firing up any kind of javascript profiler. It really struck me that I waited too long to do this. Don’t prematurely optimize, but also don’t waste any time learning how to run a profiler on your code and interpret the results. If you’ve never gone through the process of optimizing code in a language you regularly use, then you’ve been relying on all kinds of bad habits [3]. Learn how to integrate a profiler with your program as soon as possible so that performance analysis doesn’t become one of those “I’ll get around to it” tasks that never happens.

Another good rule is to always test with large data sets. Ideally you want a fast case for rapid prototyping of new features, and a worst case for stressful testing of that new feature. To often we use small sets of data for development and testing. We never realize how badly our code performs in real world conditions. Speed and responsiveness play a greater factor in whether or not someone becomes a regular user of your program than you might realize.

Footnotes

[1] One thing WordPress does wrong is it includes all of your comment spam in their WordPress export files. One friend saw his export file decrease from 83 MB to 8 MB once he deleted the comment spam.

[2] The best way to profile Javascript is with FireBug, but it doesn’t recognize Greasemonkey scripts unless you embed them in the page so FireBug can find them. Wikipedia has a list of profilers for popular languages.

[3] Some of the bad habits that were lurking in Auntie Spam:

  • I was using a custom getElementsByClassName instead of an XPATH call. XPATH can be so much faster that walking the DOM.
  • I had too many innerHTML assignments instead of leaving HTML as a string and then giving it to the web page to process as a final step
  • Inefficient regular expressions
  • Too many copies of the comments in memory

How to Profile Greasemonkey Scripts with Firebug

Posted in Firefox and Greasemonkey, Programming Tools, Technology by engtech on November 13, 2007

Programming Tips

Running performance analysis on Greasemonkey scripts can be a pain in the butt. They aren’t part of a webpage so standard tools for analyzing web sites don’t work… or do they?

The Goal

Profiling Greasemonkey scripts with Firebug

What You’ll Need

  1. Firefox
  2. Greasemonkey
  3. Firebug extension

The Trick

#1: You need to remove all of the Greasemonkey GM_* functions from the script you want to profile. This is easier than it sounds because all of the functions can be performed by plain ‘ole javascript (except for the open in new tab function and register menu command).

#2: You need to embed your Greasemonkey script inside of the running page so you can analyze it with Firebug’s profile tool. I have a function below that can embed a function inside the current web page.

#3: You’ll need to call the function either using unsafeWindow or by embedding a call to the function in the page.

#4: Litter your code with calls to Firebug’s console.profile() and console.time() functions.

Sample Code Template


(function() {
  function embedFunction(s) {
document.body.appendChild(document.createElement('script')).innerHTML =
s.toString().replace(/([\s\S]*?return;){2}([\s\S]*)}/,'$2');
 }

  function myKickassGreasemonkeyScript() {
    console.profile();
    // Put everything you need for your Greasemonkey script in here
    // Don't use any of the GM_* functions!

function kickass() {
      console.time("Block1");
      // Block of code that might take a lot of time
      console.time("Block2");
      // another block of code
      console.timeEnd("Block2");

      console.timeEnd("Block1");

    }

// more cowbell

console.profileEnd();
  }

  embedFunction(myKickassGreasemonkeyScript);
  // Method 1: embed the function call into the current page
  document.body.appendChild(document.createElement('script')).innerHTML = "myKickassGreasemonkeyScript();";
  // Method 2: directly call the function using unsafeWindow
//     window.addEventListener("load", function(e) {
//                   unsafeWindow.myKickassGreasemonkeyScript();
//                   this.removeEventListener('load',arguments.callee,false);
//                 }, false);

 })();

Firebug Tutorial

Michael Sync has a tutorial on using Firebug that describes the console.time() and console.profile() functions. The official website has a nice list of Firebug keyboard shortcuts and a brief description of all the console.* functions.

Related Posts

Distraction Free GTD: 32 Todo List Web Applications

Web Browser Tips & Tricks

The fine folks at LifeHacker have forced me to tip my hand with their post on using Web Runner as a distraction free browser. Web Runner is a tiny site-specific web application that runs using less resources than Firefox or Internet Explorer.

The whole idea behind a site specific web browser is that you want to access a web application without being tempted to access other sites. You want to access a site without being distracted by the rest of the Internet. A good example is an online todo list or GTD application. You want to be able to quickly access your todo list to add or checkoff items without getting caught in an Internet black-hole.

internet is a big distraction

(via Coding Horror)

To make things easier for everyone I’ve created a huge bundle of Web Runner web applications centered around accessing ToDo/GTD web sites. This is a list of the supported sites.

Want more sites added? Leave a comment.

Step #1: Install Web Runner

  1. Go to this page on the Mozilla Wiki
  2. Choose the Windows, Linux, or Mac installer
  3. Run the installer

Step #2: Download My “Distraction Free GTD” Web Bundle

  1. Download this zip file (Update 2007/10/10)
  2. Unzip the contents to a folder
  3. Click on a .webapp file to launch the web application you want

Every web app has hotkey history navigation (ALT+LEFT, ALT+RIGHT and ALT+HOME).

Leave a comment if you have any problems.

Managing Spam Maintenance with Akismet Auntie Spam Version 2

WordPress Tips and Tricks

Akismet Auntie Spam is a maintenance script for WordPress administrators. One of the problems with the Akismet spam protection service is that sometimes it misidentifies a real comment as spam. WordPress has a spam recovery console that I like to call the spam inbox.

akismet auntie spam helper script for akismet administration

Have you ever stuck your hand as far back at you can into the crannies of your couch and pulled out what you found? That’s kind of what going into the default Akismet spam inbox is like. It’s a dark and evil place, filled with things that will make your eyes burn. You only wanted to find the quarter you lost, but before you know it your hand is stuck and something is touching you back.

Akismet Auntie Spam is a kind old lady who will come to your house and give it a thorough cleaning. She’s not afraid of the dark corners, particularly the spam inbox because she knows exactly how to handle the creepy crawlies hiding out of sight.

Akismet Auntie Spam is not a WordPress plugin. It is a script for the Firefox web browser that will work with any installation of WordPress or WordPress Multi-user — that means you can use it with WordPress.com, Edublogs.org, Blogsome.com and any site that is running WordPress with Akismet. Version 2 is a complete rewrite from scratch, and it is much less complicated now. There are no knobs and buttons for users to twiddle with — it works out of the box, the same way for everyone. Auntie Spam is here for one reason and that’s to save you time.

Akismet Auntie Spam is in no way affiliated with WordPress or Auttomatic — it’s a script I created to make it a hell of a lot easier to watch out for false spam.

How to Install

Slight gotcha: if you are an old time user of Akismet Auntie Spam (from before August 2007) then you’ll want to uninstall your old version before installing the new version of the script. Find out how to uninstall a Greasemonkey script.

What Does Akismet Auntie Spam Do?

Much less time is spent navigating your spam inbox. You can see it all on one page, and it doesn’t take nearly as long to scroll through as it would without Akismet Auntie Spam installed.

  • Fetches all of your spam comments and displays them on one page.
  • Sorts spammers by the amount of spam they’ve sent.
  • Shows only the first line of spam, so less time is spent scrolling.
  • Completely hide obvious spam.
  • Automatically checks for a new version of itself every two weeks.
  • Install it once into your Firefox browser and it will work with *ALL* your WordPress blogs.

Show Me How It Works

Go to your spam inbox on your WordPress dashboard console.

wordpress comments akismet dashboard

Auntie Spam will immediately kick in and download all of the spam at once — no navigating between 10s to 100s of individual pages of spam.

Akismet Auntie Spam will automatically download all of your spam

You can do something else like check your RSS feeds while she grabs all of your spammy comments and organizes them.

Auntie Spam has finished downloading

Spam is sorted from newest to oldest and categorized from most spammy to least spammy. She groups spam by identifying the computer it came from, so surprisingly enough the more spam you have the easier it is to look through it all. She even summarizes it all by only showing the first line.

Spam is compressed - only the first line

Auntie Spam hates those idiots who keep sending you spam again and again. They can be completely ignored.

obvious spam is completely hidden

As you read through all the comment summaries, you may come across one that looks like it isn’t spam. Click on the ‘# comments’ link and Auntie Spam will show you the full text of the comment and give you the option to mark it as not spam.

Click to see the full comment and to mark it as not spam

Once all the spam is loaded there no need to reload it all because you want to search for something specific — hit Ctrl+F and use Firefox’s built in page search.

Search from within your browser instead of using the website

When it comes to de-spamming marked comments, or deleting all comments, Auntie Spam gets out of the way and things work the same way they always have.

despaming or deleting all comments

all spam deleted -- no spam found

If Auntie Spam is doing something you don’t want here to, you can return to way things have always been with a single click on the Greasemonkey icon and reloading the page.

turn greasemonkey on and off

What Are You Waiting For?

If you’re running WordPress and you’ve ever had to go dumpster diving for a comment that was accidentally marked as spam then you need Akismet Auntie Spam.

Related Posts

Revolutionizing the Web with Firefox and Greasemonkey (with screenshots)

Posted in Firefox and Greasemonkey, Popular Posts, Technology by engtech on August 24, 2007

Web Browser Tips & Tricks

A greasemonkey is a mechanic who works on your automobile. He gets his hands dirty, and goes under the hood to find out why your car is making that clunking noise. Greasemonkey is an extension for Firefox that does much the same thing, but without the ridiculous fees.

This guide is intended for beginners

In my previous guide I explained how to install a Firefox extension, and hopefully sparked some interest in why you would want to extend your web browser in the first place. I used the Greasemonkey extension as an example for a very good reason. Sometimes you want to extend your web browser in a big way, like putting a new room in your house. That’s where an extension comes in (it’s like hiring a construction company). Other times all you want to do is repaint a room or re-hang a door; something you could do yourself over a weekend. That’s where Greasemonkey comes in. There are many small jobs and minor tweaks to web pages that would be overkill for a full Firefox extension.

Greasemonkey is a unique extension in that it lets you install these things called user scripts. User scripts are much smaller than extensions, and are often targeted to much more specific tasks than extensions. There is a web site called UserScripts.org that is devoted to these small tiny hacks people have created to make the web work more like the way they want it to.

It can be complicated to create your own user scripts (it requires understanding the Javascript programming language), but it is dead simple to install and use scripts other people have created. And let me tell you that a *lot* of people have created scripts. There are over 7500 user scripts on UserScripts.org. If something on a web page has annoyed you, there is undoubtedly a user script that fixes it.

What Can Greasemonkey User Scripts Do?

  • Remember information
  • Remove parts of web pages
  • Change how web pages look
  • Automatically download information from other web sites and put it into the current page
  • Cross-reference information from other web sites
  • Speed up common tasks so that they require less clicks

Because user scripts use the Javascript programming language there is really almost anything that they can do. Or at least, that would be the case if they weren’t restricted. One of the nice things about Greasemonkey user scripts is that they’re restricted in ways that regular Firefox extensions aren’t. User scripts won’t change your Firefox toolbars, add things to your right click menu options, look at files on your computer or rub your cat’s hair the wrong way.

Useful Greasemonkey User Scripts

Install Greasemonkey

Greasemonkey installs like any other Firefox extension. This guide shows you how to install Greasemonkey in a step by step process with screenshots.

How to Find Greasemonkey User Scripts

userscripts.org logo

The best source for finding Greasemonkey scripts is userscripts.org. To find scripts for a specific web site, type its name into the search box and hit enter.

userscripts.org help search end hit enter

The left hand side of the screen will return a list of scripts. Unfortunately there is no way to sort them.

userscripts.org search results

If you click on the script name it will take you to a page with more information about the scripts. The easiest way to tell if a script is any good is by the number of times it has been installed, and how much effort the author goes into explaining what the script does and how it works.

example of good script documentation

To install a script click on the “install this script” link in the right hand column.

Hot Tip: I’ve created a script that highlights the most popular user scripts and makes it easier to find the best scripts on userscripts.org.

Lifehacker.com and Lifehack.org both often feature Greasemonkey user scripts.

Installing a Script

All user scripts end with the .user.js extension. If you do not have Greasemonkey installed, or Greasemonkey is disabled, then your web browser will try to download the file instead of installing it.

use download count to see how popular a script is

Click on this link to start installation of my Akismet Auntie Spam script.

A box will pop-up that gives a short description, tells you which web sites the script runs on, and offer to install it. Click on the Install button.

firefox greasemonkey extension install script dialog

A message will appear temporarily in the lower right hand corner of your web browser telling you that the installation was successful.

greasemonkey firefox userscript install

Turning Greasemonkey on and off

You can enable and disable Greasemonkey temporarily by clicking on the little monkey icon in the lower right corner of your web browser. This is a great trick for when a script isn’t doing exactly what you want – you can turn off all of your scripts and interact with the web site normally as if you didn’t have Greasemonkey installed.

turn greasemonkey on and off

Advanced Users – Managing Scripts

greasemonkey script management

If you click on Tools >> Greasemonkey >> Manage User Scripts it will open up a windows that lets you:

  • Control which web sites the script does or does not run on
  • Enable or disable specific scripts
  • Uninstall scripts
  • Directly edit the script (it will ask you which text editor to use the first time you try it)

greasemonkey userscript firefox edit disable manage

Heading to the management panel is a really useful way to further tweak scripts, or just change the web sites they run on.

Advanced Users – Configuring Scripts

I can’t tell you how to configure a specific script, but I can give you a general overview of the various ways it can be done.

Editing the Script

Example: Find images that are too wide

This is the sign of a lazy programmer. It isn’t that hard to edit a script, but it is still a pain in the butt when they tell you to change settings directly in the script. I usually won’t bother installing scripts like this.

  • Click on Tools >> Greasemonkey >> Manage User Scripts
  • Choose the Script
  • Click on Edit
  • Make the change
  • Save

Running User Script Commands

Example: Pagerization

User scripts can only modify the Firefox menu in one place, under Tools >> Greasemonkey >> User Script Commands. It may be grayed out if you don’t have any scripts installed that register commands.

greasemonkey firefox user script commands register

Hot Keys

Example: Facebook photo album keyboard navigation

Some scripts use hot keys to perform actions. You’ll have to read their documentation on how to use them. When you’re on the web page that the script works with, hitting keys on your keyboard will cause the script to do things.

Changing Settings Interactively

Example: Pre Fill Comments

Smart scripts configure themselves through dialog boxes the first time you run them. This is by far the recommended and most painless way for scripts to configure themselves. Hint.

firefox greasemonkey install guide prompt for settings

Troubleshooting

Q1: Greasemonkey is cool! Is there anything else out there like it?

Stylish is a very similar extension that lets you apply user styles (not scripts to web pages). Stylish is to CSS as Greasemonkey is to Javascript. It lets you change the CSS of any web site to improve the way it looks, or get rid of annoyances. Greasemonkey user scripts will let you do more than Stylish, but if all you want to do is change the appearance of something then Stylish is the right tool for you. You can find styles that other people have created at UserStyles.org.

Q2: I want to create a Greasemonkey script, but I don’t know how to program.

Platypus is WYSIWYG editor for Greasemonkey scripts. It will let you create Greasemonkey scripts by moving around and interacting with parts of a web site.

(WYSIWYG – what you see is what you get)

Q3: What about Internet Explorer?

Yes Virginia, it is possible to use some userscripts with Internet Explorer. Watch this space.

How to Install a Firefox Extension (with screenshots)

Posted in Firefox and Greasemonkey, Technology by engtech on August 23, 2007

Web Browser Tips & Tricks

One of my favorite features of Firefox is that users can modify it with extensions. No matter what it is you want to do or change about a web page, there is undoubtedly an extension out there already that does it for you. Someone has gone to through all the hard work and now all you have to do is install it to reap the benefits. I know it is arrogant of me to say so, but I do not understand how people surf the Internet without using extensions that simplify common tasks and improve the way websites work.

This guide is intended for beginners

Why Use Extensions?

Firefox extensions help you get things done. They can reduce repetitive tasks to something simple and improve your web experience. Here are some examples of popular Firefox extensions:

The real power of Firefox is in the user community around it who builds all these cool toys. If you only use one extension, Ad Block Plus will revolutionize your web surfing. I’m always so surprised when I access web sites on a browser without Ad Block Plus and see all of the crap that gets in the way. Installing extensions can be addictive, but it’s a good idea to pick 5 to 10 of the best ones and stick with those.

Installing a Firefox Extension

I hope I’ve convinced you of the value in Firefox extensions. A little goes a long way. Here is a walkthrough of how to install them.

1. Find an extension you want to install

greasemonkey firefox extension install mozilla add ons

Most extensions can be found on the Mozilla Add-ons website. For this example I’ll be installing the Greasemonkey extension. Greasemonkey is a bit different than other extensions, in that it’s kind of a parent extension. With Greasemonkey installed you’ll be able to install all other kinds of baby extensions (called userscripts) to tweak web sites even more.

2. Click on the install link

firefox greasemonkey installation guide

Firefox extensions end with the .XPI suffix. When you click on an .XPI file, Firefox knows how to open and install it for you. The official Mozilla Add-ons page shows all of the links with a green Install This button. If you are installing an extension from somewhere else it might look different.

3. Click on the Install Now button

firefox greasemonkey install click install button

When Firefox recognizes that you are installing an extension it brings up a box asking you if you want to install it. Click Install Now.

4. Restart Firefox to Finish Installation

mozilla firefox click restart to finish installation

The installation will not be complete until you restart Firefox. The good news is that Firefox will remember all the pages you are viewing right now, so go ahead and click on the Restart Now button.

Conclusion

Now you’ve installed your first Firefox Extension. You can find more useful extensions at Mozilla Add-ons or on popular blogs like Lifehacker.

Troubleshooting

Thinks don’t always go the way you want them to. Leave a comment if you have any other further questions and I’ll expand this section.

Q1: How do I find out what extensions I have installed?

firefox find out what extensions are installed and uninstall some

If you go to Tools >> Add-ons you’ll find a list of all of your installed extensions. From that list you can configure, enable, disable, check for updates, and uninstalled individual extensions.

Q2: I click on the .XPI file but it downloads the file instead of asking me to install. Help!

This is because the web server with the .XPI is improperly configured. Save the file to your computer and then open it using File >> Open. You will get the normal prompt to install the file.

Q3: I want to download a file from somewhere other than Mozilla Add-ons.

downloading from a site other than mozilla firefox add ons

Here is an example of downloading an extension from the popular technology blog Lifehacker.

firefox lifehacker install problem guide

After you click on the download link Firefox will display a yellow status bar at the top of your web browser (but still underneath your toolbar) because it doesn’t know if you trust extensions from lifehacker.com.

install firefox lifehacker guide allow blocked site

Click on the Edit Options button and it will bring up a window asking you to confirm if you trust this site for installing add-ons. Click on the Allow button followed by the Close button.

Then click on the original download link again and your install will proceed as normal.

Related Posts

Greasemonkey Script: Yahoo Pipe Cleaner

Posted in Firefox and Greasemonkey, Technology, Yahoo Pipes by engtech on August 13, 2007

Hacking RSS with Yahoo Pipes

I’m a very big fan of Yahoo Pipes. It’s an amazing service that lets you take information from websites (using RSS, XML, JSON) and then do all kinds of filtering and manipulation with it. It is all done with a slick graphical user interface but it is not for the faint of heart — it is much easier to create new pipes if you have a programming background. But once a pipe is created it is simple for other people to use it. For example, this is how you can create a blog digest post using a Yahoo Pipe I’ve created for you.

Yahoo Pipes can create automated lists that you can cut-and-paste into blog posts. My only real complaint is with the HTML markup they create. It doesn’t look good when you cut-and-paste it into a WordPress blog. This is where Yahoo Pipe Cleaner comes in. It is a Greasemonkey script for Firefox that fixes the Yahoo Pipe output so that it looks nicer when you cut-and-paste it into a WordPress blog.

  • removes any H1, H2, H3, H4, H5, H6 headers
  • dofollows the links (removes rel=nofollow)
  • replaces paragraphs with list elements
  • removes all class/id CSS selectors

Without Yahoo Pipe Cleaner

 

  • Facebook Tip: Broadcast your Facebook status as RSS

    RSS is one of the most useful tools out there for moving information around on the web. Recently the concept of “micro-blogging” status updates has become very popular with applications like Facebook, Twitter and Pownce. The only problem is that it is a pain to update many sites at the…

  • How Do People Use Google Reader with Internet Explorer?

    Any computer geek worth his salt has been through the drill: you go to visit a family member for dinner and eventually they mention some arcane problem they’ve been having with software you long ago expunged from all of your computers. Common culprits are the Unholy Triad: Microsoft Outlook,…

With Yahoo Pipe Cleaner

  • Facebook Tip: Broadcast your Facebook status as RSS
    • RSS is one of the most useful tools out there for moving information around on the web. Recently the concept of “micro-blogging” status updates has become very popular with applications like Facebook, Twitter and Pownce. The only problem is that it is a pain to update many sites at the…
  • How Do People Use Google Reader with Internet Explorer?
    • Any computer geek worth his salt has been through the drill: you go to visit a family member for dinner and eventually they mention some arcane problem they’ve been having with software you long ago expunged from all of your computers. Common culprits are the Unholy Triad: Microsoft Outlook,…

Get Yahoo Pipe Cleaner

You can find installation instructions for Yahoo Pipe Cleaner here.

How Do People Use Google Reader with Internet Explorer?

Posted in Firefox and Greasemonkey, RSS Syndication, Technology by engtech on August 06, 2007

Web Browser Tips & Tricks

Any computer geek worth his salt has been through the drill: you go to visit a family member for dinner and eventually they mention some arcane problem they’ve been having with software you long ago expunged from all of your computers. Common culprits are the Unholy Triad: Microsoft Outlook, Internet Explorer and Norton Anti-Virus. But what’s much worse than when solving some niggling problem that is only caused by their choice apps is when you volunteer to enter the belly of the beast and perform some “improvements” of your own free will.

To all the computer geeks reading this I offer you a humble warning: nothing good can come from volunteering to “improve” a family member’s computer. Don’t fix what ain’t broke.

I was at my father’s house this weekend. A relaxing day of pool, reading and sun followed by a delicious barbeque left me content and sated. My normal cynicism when it comes to technology was at an all time low. He isn’t as technically minded as me, and for a long time I’ve been wanting to get him set up using an RSS feed reader. He has never used them before but he understood the basic concept: RSS is like getting email newsletters of website updates, but without clogging your email. RSS is a blogger’s best friend. It lets us keep track of each other’s updates painlessly and effortlessly. He has a blog of his own and using Google Reader would make it very easy for him to share posts and links on his blog using the Shared Items feature and a widget in his blog’s sidebar.

rss feeds the oprah way

Google Reader was an easy choice because it is the feed reader I use every day. It is the most widely adopted web-based RSS reader with 50-60% market share. The interface is similar to Gmail. It lets you quickly scroll through items, starring stuff you want to find again later and sharing items with other people. But the deciding factor for me is that it is the reader I use every day — always get your family members using the same software you do if you want to have any hope of troubleshooting problems later.

The initial steps were easy: create a new Gmail account for his blog identity that doesn’t use his real name (since that is displayed by your Google Shared Items), add that identity to his Blogger blog as admin, and add his Google Shared Items as a sidebar widget on his blog. It all went very smoothly until I started subscribing to feeds.

Internet Explorer 6 Sucks for RSS

He is still a die hard Internet Explorer 6 user, and it’s all my fault because of articles like this where I explain how to downgrade from IE7 to IE6. Internet Explorer 6 is really bad for reading RSS feeds because it doesn’t understand RSS at all. I so rarely use IE6 that I had forgotten that it doesn’t know how to automatically find the RSS feed for a page (“RSS autodiscovery”) and that when you click on an RSS link it displays crap like this:

interet explorer rss feed looks like crap

What are you supposed to do with something like that? The answer is that you cut-and-paste the feed URL and add it to Google Reader manually. Is someone new to RSS ever going to do that? No.

There is an easier way of doing it using a bookmarklet — a piece of Javascript that you save as a bookmark (or “Add as Favorite” in IE lingo). You can find a bookmarklet for doing that in Google Reader under Settings and then Goodies. Unfortunately it didn’t work properly because of either his Internet Explorer security settings or because of a conflict with Norton Anti-Virus. He likes to save his bookmarks on the desktop to access them instead of using the Favorites menu, so the chances of getting him to use a bookmarklet were already slim to none. Back to the drawing board.

google toolbar example

Instead of trying to figure out the conflict, I decided to add the Google Toolbar for Internet Explorer. Google Toolbar is a great little add-on for any web browser. You can edit the buttons to add all kinds of neat things like searching within the current website, notification of new Gmail messages, toggling highlighting of search terms on the current page and Google Reader notification of new posts in your RSS feeds. But what is missing is a way to one-click subscribe to the current site in Google Reader.

Screw this. One of the “advanced” features of Internet Explorer 7 is better RSS integration, so it’s time for an unplanned upgrade. 15 minutes and one reboot later we’re running the latest and greatest IE7 — and having the exact same problems!

How Do People Subscribe with Google Reader in IE7?

When you click on an RSS link in IE7 you at least get something you can read with an option to subscribe to it. But it only defaults to the built-in Internet Explorer 7 feed reader — it doesn’t give an option to subscribe to Google Reader. It’s much better than IE6 but it still doesn’t solve my problem: I want him to be able to add subscriptions to Google Reader with one click. The bookmarklet still isn’t working properly under Internet Explorer 7.

I’m tired, frustrated and desperate so I decide to pull out the big guns. Firefox has this amazingly little tool called Greasemonkey that makes it trivial to add additional functionality to your web browser. I know that there’s a Greasemonkey script to let you one click subscribe to RSS feeds in Google Reader. I know that it’s possible to manhandle IE to force it to be able to run Greasemonkey user scripts… Google tells me that a plugin called IE7Pro can do it, but after I install IE7Pro it doesn’t understand how to install Greasemonkey scripts.

WTF? THIS IS SO SIMPLE TO DO IN FIREFOX! Why in the world is everything so hard in Internet Explorer? How do people surf the Internet like this?

For any non-believers in the audience, let me show you how easy RSS works in Firefox land.

Firefox + Google Reader = Crazy Delicious

Firefox understands when a website has an RSS feed auto-discovery link. You don’t have to search through the entire page to find the stupid orange button, you can click on the button in your address bar.

Step #1: Click on the Orange Icon in the Address Bar

rss feed auto-discovery

Step #Who Cares: You Only Do This Once

The first time you use it, it will display the feed in a nice, human readable way, with a yellow box asking you what you want to use to subscribe to this feed. Google Reader is one of the options and you can set it up to *ALWAYS* use Google Reader from now on.

always use google reader to subscribe to rss

Step #Skip This With Greasemonkey: Choose Between Google Homepage and Google Reader

Unfortunately, Google isn’t smart enough to remember your preference between Google Reader and Google Homepage — so you have to always chose the red pill or the blue pill. There is a handy Greasemonkey script to fix that though: always subscribe to Google Reader.

one click subscribe with google reader

One click subscription to Google Reader thanks to Firefox and Greasemonkey. Quite a bit easier than:

  1. Right Click on RSS feed URL
  2. Copy shortcut
  3. Log in to Google Reader
  4. Click on Add Subscription
  5. Paste short cut into form
  6. Click Add

…which seems to be the only way to do it in Internet Explorer 6 that worked reliably for me.

Please Tell Me I’m Wrong

When I’m writing rants about frustrating moments of needless computer complication there is always the nagging voice in the back of my head that I’m missing something obvious and making things much harder than they have to be. I hope this is the case.

I was surprised that someone hasn’t built a one-click “add auto-discovery feed to Google Reader” button for the Google toolbar. A little digging shows that it isn’t be possible because the kind of things you can do with Google Toolbar is actually quite limited. This is too bad because it would get more Google Reader users using the Toolbar and more Toolbar users using Google Reader.

My experience with Google Reader + Internet Explorer wouldn’t have been so bad if the bookmarklet had worked for me. But given the fact that 58% of people surfing the web are using some form of Internet Explorer (compared to 35% for Firefox) and that Google Reader is the most popular web-based RSS reader… well, it’s no surprise that more people aren’t reading RSS feeds. It’s hard enough to explain to people why RSS is useful when you can’t show them how to subscribe to an RSS feed consistently in one or two clicks.

If the best feed reading software doesn’t integrate seamlessly with their web browser of choice then why should they jump through hoops getting it to work when they’ve never even used RSS before? And it really doesn’t help that most of the mainstream news portals on the net still don’t offer full feeds. If you don’t read blogs then it’s hard to explain the power of RSS — mainstream sites still don’t get how RSS without full feeds isn’t worth reading.

My Top Must Have Firefox Extensions

Posted in Firefox and Greasemonkey, Technology by engtech on March 24, 2007

I’m always amazed that people use Internet Explorer over Firefox. With the available extensions Firefox becomes the nerve center of your Internet activity. Lifehacker quite often has good suggestions for FF Extensions to try out.

These are what I use. All links go to more information about the extension.

General

Bookmarking / Sharing Sites

  • del.icio.us - I use religiously, even automatically generating blog posts off of it and sharing my del.icio.us links with people on Twitter
  • stumbleupon – not a productivity tool :)

Web Development

  • Greasemonkey – I’ve written several greasemonkey scripts to make blogging with WordPress easier
  • DOM Inspector – needed for coding with Greasemonkey
  • Web Developer – CSS development, mainly because I haven’t figured out Firebug yet. The easiest way to create a skin for a theme without having to spend a lot of time learning the underlying structure – click on an element and find out how to access it.

Some I plan to try out: Firebug, Stylish, IETab, CustomizeGoogle

What do you use/recommend?

Greasemonkey Script: Find images that are too wide and break your blog template

Posted in Firefox and Greasemonkey, IDT Labs Software Development, Technology by engtech on January 12, 2007

Ever try to stick a 550 pixel-wide image into a 500 pixel-wide space? Firefox will increase the space, but under Internet Explorer 6 (or lower) it will move the sidebar so that it comes AFTER the blog posts.

Figure 1: Crappy MSPaint drawing explaining what I’m talking about.

Inserting an image that's the right widthInserting an image that's too wide in FirefoxInserting an image that's too wide in Internet Explorer

Blog themes come in two flavours. Fluid/liquid where the template stretches around the content to use the maximum width and fixed where the template will always be a certain number of pixels wide.

Problems can arise when using a fixed width template with images. If the image is too wide to fit it can stretch the fixed width section. This can break your sidebar in Internet Explorer 6 by pushing your sidebar so that it comes after all of your content.

(more…)

Follow

Get every new post delivered to your Inbox.

Join 280 other followers