What can I learn playing with bookmarklets?
You need to create and use a fundamental unit of HTML: a link (also known as “anchor”;
<a href="somewhere">Link</a> ). You can start with the most basic
Where to start?
I started with a pet peeve about a page I visit regularly. My first bookmarklet ever hides the right column in Facebook, so I don’t have to see the ads. Take that, Mark! If you click the link below while on this page nothing will happen. But if you drag the link to your Bookmarks Toolbar (in Firefox, “Bookmarks Bar” in Chrome, etc…) do that while viewing your Facebook page (or any page that coincidentally has a right column
id="pagelet_side_ads") you will toggle its visibility.
Bookmarklet1: Toggle FB ads Drag the link to your bookmarks bar to try it.
To embed a bookmarklet so it can be dragged to the toolbar you just place a link on your Web page:
The imagination runs wild
I may explain this code in another post, but for now it’s about bookmarklets and an example of what one might do with one. If you don’t understand this paragraph you’ll need to do some vocabulary homework. This script only works at www.lyrics.com. That page has a version of jQuery installed so I used it. To write the script I used Firebug to identify IDs and classes of elements on the page that I use as “selectors” to have access. I fiddled in the console until I had a working script. Meticulous syntax is important… your script goes on one line, so semi-colons are in, comments are out.
This script is quite a bit more involved than the first. I did succeed in making it work in the link code like the first one, but there’s an easier way. In order to make more complicated scripts work you should use the bookmarklet to load your script from a file on your server. I created
rcf-get_lyrics.js and placed it on this server. You can copy/paste the script below and just change the path to point to your own file.
I’ll discuss the code in more detail in a future post, but quickly, you create a script element and set the source to the file, then append this new element. There’s a unique identifier, which I’m not using for anything right now, created from the time and appended to the url.
Alan’s script demonstrates how to load a complex script off a server using only a small manageable amount of code in the bookmarklet itself. As you see, I borrowed it but removed his protocol check for simplicity. I think the aforementioned date/time “query string” he adds prevents the browser from caching the script indefinitely, but I didn’t research that—it’s a guess.
Another impressive project that’s available as a bookmarklet is pjscrape. If I wanted to turn my lyrics scraper into a real utility I’d probably start with pjscrape.
Update 2: I’ve placed both the bookmarklets on their own page. I expect I’ll add to the list.
Update 3: I’ve added a variation on the Facebook ad hider, using display:none and targeting only the ads—compare the two and try to figure out what’s different. I’ll add all future updates on the bookmarklets page.
- This was updated since original publication and now uses