Hackszine.com: Firefox Archives

Archive: Firefox

Page 1 of 2 1 2 >>

September 12, 2008

Super GreaseMonkey - your favorite Firefox plugin meets jQuery

Along with Firebug, GreaseMonkey remains one of the best Firefox extensions, giving the browser capabilities that Safari, IE, and Chrome still can't compete with. It gives you the ability to easily write your own custom features for Firefox in Javascript, letting you customize the way content renders and executes on any website you visit.

Super GreaseMonkey is a slight modification of the plugin that provides built-in jQuery support. With this addition, you can get done in a single line of code what might have taken 20. Most GreaseMonkey scripts work by searching for specific tags, classes, or IDs in a page structure and then altering their contents. Traversing the DOM is a lot of work in standard Javascript, but it's completely painless in jQuery, making this feature a must have for regular GreaseMonkey scripters.

Because it's a modification of the standard GreaseMoney install, Super GreaseMonkey may be a version or two behind the latest release. Also, it's not currently the plugin that most people are using, which is important if you want others to use your scripts. Fortunately, you can also get jQuery to work with the standard GreaseMonkey install by manually embedding jQuery into your scripts. It's only marginally more work, and will ensure that your script will work with other GreaseMonkey users. InternetDuctTape describes a few options for making this work, but the best recommendation is to download a packed version of the jQuery library and paste it right at the top of your script.

Super GreaseMonkey
InternetDuctTape - Using jQuery With Standard Greasemonkey

July 2, 2008

Algorithm Ink and ContextFree.js - generative art with Javascript

Currently Firefox, Safari and Opera have reasonable support for the Canvas HTML element. With IE the only major remaining laggard, there are a lot of people starting to experiment with Javascript's new graphical capabilities. I mentioned John Resig's Processing.js library in May, and now Aza Raskin has released the ContextFree.js library, which brings another generative drawing language to web-standards software development.

Besides being pretty, why is ContextFree.js interesting? Because it shows the power of Open web technologies for making graphically-enabled, compelling interaction. The true power of the web revolves around anyone being able to dive in, see what someone else has done, and expand upon it. Canvas lowers the cost of entry to creating graphical mashups and other dynamic, graphical content. It also shows the progress the web has made: a year ago, this demo would not have been possible. Canvas wasn't ready, and Javascript interpreters weren't fast enough. Looking at the qualitative difference in speed from Firefox 2 to Firefox 3 indicates the amazing and substantial progress made towards speeding up Javascript since the last major browser release cycle.

ContextFree.js is a Javascript port of the Context Free open source generative art application by Chris Coyne. It basically defines an extremely simple grammar that is designed to generate rule-based artwork with very few lines of code.

Aza has also released the Algorithm Ink website, which uses ContextFree.js to create an open source art gallery. Using Algorithm Ink, you can load, tweak, and share generative art through a web interface. When you see something you like, you can view the source for the artwork and use it in your own creations. Very cool.

ContextFree.js & Algorithm Ink: Making Art with Javascript
ContextFree.js at Google Code
Algorithm Ink
The original Context Free by Chris Coyne
Drawing Graphics with Canvas
Processing.js - visualization library for Javascript

June 30, 2008

Add-Art - turn the adverweb into an art gallery

Add-Art is an ad blocking extension for Firefox, but it's a bit different from other ad blocking hacks. Instead of simply removing ads, leaving a score of empty holes in ad-laden sites, Add-Art replaces all those nasty skyscrapers and leaderboards with a selection of images from a contemporary artist. The image above, for instance, is a cropped banner from Add-Art's current show, Hotel Vue des Alpes by Monica Studer and Christoph van den Berg.

In addition to turning your browser into an art gallery, blocking ads might actually speed up your browsing experience a bit. The Add-Art images are distributed with the plugin and are loaded locally from your machine, so there's no download involved for any of the ad units. Just think of all those bytes you could be saving while viewing lovely mountain scenery instead of dancing mortgage dudes.

Add-Art Firefox Plugin
Hotel Vue des Alpes

May 29, 2008

Wii Balance Board hacks

A few days ago, this video appeared with Matthieu Deru and Simon Bergweiler showing off a hack that allows them to surf Google Earth using a Wii. Unfortunately, there weren't too many details about how it was accomplished and I couldn't track down any source for the C# application that talks to the bluetooth device.

What I did find was this other clip from almost a month ago (?!?) in which Daniel Schneider demonstrates using the Wii Balance Board to navigate the web in Firefox.

That's right. You can actually surf the web:

He's using the latest version of GlovePIE (v0.3) to accomplish this. As far as I can tell, it's still very alpha, and the WiiLi wiki claims it's buggy, but it does appear to work. Daniel has some pointers to how he's configured things, including the Greasemonkey script that allows you to surf without clicking.

For more information on coding GlovePIE scripts that use the Balance Board, peek at the documentation.rtf file that's packaged with the GlovePIE download. There's information around page 70 that describes how the board functions and how to pull the 4 sensor values from each of its feet.

Using GlovePIE and Firefox with the Nintendo Wii Balance Board
GlovePIE

May 9, 2008

Processing.js - visualization library for Javascript

John Resig, of jQuery fame, released a port of the Processing visualization language for Javascript. Seriously, John is on fire:

The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.
It works "fairly well" (in that it's able to handle anything that the processing.org web site throws at it) but I'm sure its total scope is limited (until a proper parser is involved). I felt bad about tackling this using regular expressions until I found out that the original Processing code base did it in the same manner (they now use a real parser, naturally).

The full 2D API is implemented, with the exclusion of some features here and there between browsers (Firefox 3 is pretty full featured). You can interact with the Processing API directly from standard Javascript. This lets you make use of these drawing features by simply instantiating a Processing object, and then calling its various drawing methods.

Another capability is to write code natively in the Processing language. This allows you to make use of extended language features such as method overloading and classic inheritance, though it looks like type information is pretty much ignored.

John has many of the demos from processing.org working. Most of them are going to peg your CPU, but this is some seriously cool stuff to see working in a first release.

Javascript just got a lot more interesting.

Processing.js
Processing: open source data visualization language

March 28, 2008

CSS ad blocking for Firefox and Safari

Using Firefox's CSS-based chrome feature or Safari's advanced stylesheet preferences and a little clever CSS coding, you can disable most banner ads, making them invisible in your browser. This technique is considerably easier and more flexible than setting up a private DNS server or proxy to filter out images from ad-serving domains.

The trick is setting up a number of CSS rules that use "*=" substring selection on an element's properties. For instance, matching an IFRAME tag with the SRC parameter containing doubleclick would look like IFRAME[SRC*="doubleclick"] and matching an anchor tag with an HREF containing a url with "ads." in it would look like A:link[HREF*="ads."]. Giving the style "display: none ! important" to all of the possible combinations and adding the stylesheet to your browser's chrome effectively turns off the ad-serving web. The site below has a comprehensive CSS file that's been tailored to assassinate ads from most networks.

To be honest, I didn't realize that you could do this type of parameter matching and subselection in CSS, so it's worth looking at the CSS source for that alone. If you don't use it for this purpose, perhaps the technique will come in handy for something else you are working on.

Better Ad Blocking for Firefox, Mozilla, Camino, and Safari
Ad Blocking userContent.css

November 15, 2007

HOWTO: using tabbed bookmarks in Safari and Firefox

A friend of mine was commenting today on a common scenario that a lot of us run into. When you're actively working on a project, you often times have several tabs open in your browser solely related to that work: some API documentation, a couple versions of a site you are working on, a google spreadsheet, a project resource/status page, and things of that sort.

When you change gears to work on something else, you might have another entirely different set of pages that you keep open all the time. If you juggle several projects at the same time, it can be a nuisance (not to mention a waste of time) to constantly be closing and opening all those windows throughout the day.

This isn't new news, but Firefox and Safari both have a really convenient--and often overooked--feature built into their tabbed browsing and bookmarking functionality that makes managing groups of commonly viewed documents really simple.

In Safari, just create and fill a folder in your bookmarks menu for each group of sites. When you open the bookmarks menu, in your project subfolder there will be a link titled Open in Tabs. Clicking that will open the entire folder's bookmarks at once, each in a tab of the active window.

Firefox makes it even easier. Just set up your tabs the way you normally would, then click on Bookmarks->Bookmark All Tabs. Firefox will create a new folder in your bookmarks menu and automatically import all of your current tabs to the folder. When you open the bookmarks menu, in your project subfolder there will be a link titled Open All in Tabs. This works just as you would expect, conveniently loading all of the documents in the bookmark subfolder.

June 8, 2007

HOWTO: Port Firefox extensions to IE

Hackszine reader Pete Warden is the author of a cool Firefox extension called PeteSearch. He wrote in to tell us about his progress with porting the functionality to IE:

PeteSearch is an extension that mashes up Google (and Ask, Technorati, Live and Exalead) search pages to give you hot-keys, dead-link checking and split-screen preview.
Now I'm trying the IE port, and I've my own HOWTO with sample code and articles on that painful process!

Building a browser object for IE is a much more laborious process than making a Firefox extension. Welcome to COM DLL hell. Thankfully, Pete's done a nice job of documenting things while porting his app over, and it's this sort of first-hand experience that makes it bearable to start a project like this of your own.

June 6, 2007

HOWTO - Build a Firefox extension

Gina at Lifehacker posted a really nice rundown of what goes into making a Firefox extension:

The meat of a Firefox extension is simply Javascript - the not-very-mysterious stuff of bookmarklets and regular old web pages - and a markup language called XUL (pronounced "zool.") To build your own, you'll need some Javascript know-how, comfort editing XML files, and a healthy curiosity about bending your favorite web browser to your will.

Check it out, then make something awesome and tell us about it in the comments.

How to build a Firefox extension (Gina@Lifehacker)- Link
How to create Firefox extensions (Eric Hamiter) - Link
The Official Building an Extension Guide - Link

June 5, 2007

Use GPG encryption with Firefox and GMail

FireGPG is an awesome little plugin that adds GPG support to Firefox. You need the GPG package installed on your machine to start, and after activating the plugin, you'll have a new right-click menu that will let you sign, encrypt, decrypt and verify any selected text.

You can use this to add strong crypto functionaliy to any webmail system or forum that you use! Special support for GMail is already built-in, which provides encryption and signature buttons right alongside the normal send button.

Currently, there isn't a lot of documentation, but the author has set up a Wiki. If you want to help out, try the software for a while and pitch in with a page or two on the maual.

FireGPG: Use GPG Easily in Firefox - [via] Link

GPG (GNU Privacy Guard) for Linux, Mac, and Windows - Link

May 27, 2007

Beautify Firefox widgets in Ubuntu

The thing about Firefox under Linux is that its form widgets look a little nasty. Thankfully, Osmo Salomaa created some nice replacement widgets that really clean up the interface, and fatsheep over at ubuntu forums put together a quick script for installing/uninstalling the patch. It's a big improvement, unless you're into the whole super-aliased, shadow-casting button thing.

New Firefox Widgets and Install Instructions - [via] Link

May 12, 2007

iGoogle Greasemonkey hacks

If you use Firefox with Greasemonkey, there are a lot of really nice scripts available for tweaking the iGoogle interface. You can resize columns, replace the iGoogle logo, or, my personal favorite, add some subtle transparency effects to the search interface so that it blends in with the theme you are using - Link.

Related:

May 1, 2007

Real Costs - emissions data into travel related e-commerce website

Make 601
Adds C02 emission information to travel sites, extremely clever -

Real Costs is a Firefox plug-in that inserts emissions data into travel related e-commerce website. The first version adds CO2 emissions information to airfare websites such as Orbitz.com, United.com, Delta.com, etc. Following versions will work with car directions, car rental, and shipping websites. Think of it like the nutritional information labeling on the back of food... except for emissions.

The objective of the Real Costs is to increase awareness of the environmental impact of certain day to day choices in the life of the Internet user. By presenting this environmental impact information in the place where decisions are being made, it will hopefully create an impact on the viewer, encourage a sense of individual agency, and provide a set of alternatives and immediate actions. In the process the user/viewer might even be transformed from passive consumer to engaged citizen. Real Costs is project by Michael Mandiberg.

Real Costs - Link.

April 30, 2007

Open 2+ start page tabs in Firefox

Make 595
Every time I launch Firefox I'm usually researching something online and/or something that has appeared on MAKE - so here's a fun feature... You can have two pages open up in tabs as your start page, just put a link, the pipe symbol "|" and the other URL - handy!

April 20, 2007

Firefox as a Web Development IDE

The Firefox Web Developer Extension and Firebug plugins are two very cool tools for editing and debugging HTML and CSS. Jeff Atwood of Coding Horror had this to say:

I can't imagine debugging a web app without these two essential tools, which transform Firefox into the Visual Studio of browsers. It'd be akin to writing a .NET application in Notepad.

Firebug, pictured above, can even assist with profiling and debugging your AJAX/Javascript code. You can evaluate javascript expressions and see how it effects the document in realtime, as well as view the "generated source," which comes in really handy when debugging code that populates elements in the page at runtime.

Firefox as an IDE -Link.

Page 1 of 2 1 2 >>