Bookmarklet help wanted

June 12, 2012 1:44 PM

Help me find a good set of tools for creating bookmarklets.

I want to write some bookmarklets to fix some problems / add feature on some web sites I visit. I've written one or two small ones previously, but in a very hack-ish way that I can see will quickly become a PITA. Looking for development tools (free, hopefully).

As I understand it, bookmarklets are just javascript that gets run against the DOM of the currently loaded HTML page. So I guess I need a good Javascript environment, that will let me load HTML from any URL. I'd also want something like Firefox's DOM Inspector, and then the editor window where I write my code. I'm thinking it'll go "write code, reload page, run script, find problems, repeat".

Once I get my javascript working then there's turning it into a bookmarklet. I've got a hackish Perl script that strips comments and escapes quotation marks, etc., which would do the job, but maybe there's something better.


Preferred environment
- Prefer Windows, rather not have to use Linux, Mac is not possible.
- Prefer Firefox, Chrome is doable, I'd be surprised if someone recommends IE.
- Editor: I have my preferred one (Textpad) but I don't need anything fancy like context coloring or automatic completion.
- jQuery? Should I be using jQuery? It seems like it's almost standard these days, but I've never touched it. And is it sensible, or even possible in a bookmarklet?

Thanks for any suggestions.

posted by benito.strauss to computers & internet (9 answers total)

Could you use Userscripts instead? The Greasemonkey extension for Firefox can use them, and I think Chrome can use them right out of the box.
posted by backwards guitar at 1:50 PM on June 12, 2012 [1 favorite]

Could you use Userscripts instead?

I'm not looking to use scripts that others have written; I want to write them myself. It's to both scratch the itch of improving those pages, and I also want to learn some more Javascript.
posted by benito.strauss at 1:59 PM on June 12, 2012

Well you can write them yourself, and host on userscripts. Probably easier than a bookmarklet.
posted by backwards guitar at 2:48 PM on June 12, 2012

Userscripts are the natural progression of bookmarkets -- they are automatically executed, you can edit them in a real file with a real editor, and you don't have to constantly squeeze everything into one line by playing escaping games.

You don't need any external sites or third party scripts. Just name a bit of javascript foo.user.js and give it the appropriate header comment, then open that file in the browser and Greasemonkey will ask you if you want to install the script. From there on, you can further edit the script as much as you like, there's even a convenient shortcut that will launch an editor of your choice. And Greasemonkey scripts even have elevated privileges that are not found elsewhere, such as the ability to break the same origin policy, which gives you the ability to create mashups.
posted by Rhomboid at 5:06 PM on June 12, 2012 [1 favorite]

Oh. When I looked at userscripts.org it just looked like a repository of bookmarklets.

It sounds like you're saying Greasemonkey can do everything I want? That sounds great. Do I need to install anything other then this?

Do I have to have them automatically executed? For some scenarios I'd like to be able to view the un-modified page, and decide "yep, modify it." by myself. I guess I'm asking if bookmarklets can reference scripts that Greasemonkey has installed.
posted by benito.strauss at 6:00 PM on June 12, 2012

If anyone stumbles across the question, a method to take an external script and run it via a bookmarklet can be found here. (This does mean you have to find the location of your Greasemonkey file and encode it as a file:// URL.)
posted by benito.strauss at 10:27 PM on June 12, 2012

For some scenarios I'd like to be able to view the un-modified page, and decide "yep, modify it." by myself.

That's easy enough to deal with: have the userscript always run but instead of doing the modification unconditionally, have it insert a link or button or clickable element on the page that triggers the modification.
posted by Rhomboid at 7:07 AM on June 13, 2012

Great idea.
posted by benito.strauss at 12:30 PM on June 13, 2012

For anyone else who stumbles across this question, Firefox's Firebug extension is the all singing, all dancing tool for doing this. It's a little intimidating at first because it's got so many features, but once you get the hang of it it's great.
posted by benito.strauss at 1:04 PM on July 13, 2012