Tweaking Firefox’s InFormEnter plugin

as a follow up to my post about firefox’s plugins, and specifically informenter, i felt i had to share two things about it:

1. it really does rock. no more typing the same old stuff all of the time. just go in, define your items, and presto, click, select, auto fill. ahhhh… much better…

2. i really don’t like the icon it places next to all the form fields. i feel like it’s too big, and calls way too much attention to itself. i know you could always simply turn off that feature, but then you’d have to right-click to pull up the menu and select informenter and then select your item, and who wants that?

so i set about to see if i could swap in my own much smaller, and more unobstrusive graphic. first off, it would have been great if there was a visible css file and graphics in a skin folder in the extension’s directory. no such luck. so i right-clicked on the graphic and copied the url, and found that it had a chrome:// uri, which means it must exist in the extension’s jar file.

this is what i did (mind you this is for OSX):
1. quit firefox
2. find the extensions folder, it should be in ~/Library/Application Support/Firefox/Profiles/{something}.default/extensions
3. there will be a bunch of directories, you need to find the one that contains a file called informenter.jar in a subdirectory called chrome
4. copy that informenter.jar to someplace safe (ie back it up in case bad things happen)
5. i created a tmp folder on my desktop to work with
6. copy the informenter.jar file to that tmp folder
7. open up terminal, or better yet iterm and type this (disregard the > as it denotes a prompt):

>cd ~/Desktop/tmp

you should now see informenter.jar in the listing
now i have the osx developer tools installed, and i am unsure as to whether they are necessary or not, but continue on:

>jar xvf informenter.jar

there should now be 3 directories: content, locale, skin
8. in the skin/classic/informenter you will find all the graphics for informenter. the most important graphic in my experience has been marker.png.
9. time use photoshop or whatever graphics editing tool you want, create what you want, then save it out as a transparent png named “marker.png”. also take note of its size in pixels (see step 11)
10. replace the marker.png in that working tmp/skin/classic/informenter directory
11. now it’s time to fire you favorite text editor, i happen to think that there just isn’t anything better than bbedit. open up the file called informenter.js, it’s in ~/tmp/content/informenter/informenter.js
12. search for “var styleAttribute” and replace the height and width px values with the size of your new graphic and save.
13. now that the js file has been saved, and you’ve added your new graphic(s), it’s back to the terminal/iterm window


you should see those 3 directories

>jar cvf informenter.jar *


you should see the informenter.jar
14. place that new jar file in the extensions directory you yanked it from in the first place and fire up firefox. find a page with a form (which should be any page whatsoever) and see if your new graphic is there and is displaying properly.
15. yes? hurrah…