Who doesn’t love a way to make their day more efficient. There are always ways to make your work better – it may take a time to recognize where efficiency gains can be made, but trust me it’s worth the effort. What if three clicks/page-loads were removed from your common tasks throughout a day? That adds up!
What sort of gains? Do you routinely have to copy and paste text from a webpage? Or do you often open URLs that have predicable patterns in them? These are all tasks that can be improved with simple bookmarklets.
Contents
What is a Bookmarklet?
A bookmarklet is a smart bookmark in a web browser.
What does that mean exactly? Typically a bookmark is simply a URL with a name assigned to it. (you know – those things you often collect in your browser and forget they exist? Admit it – we’ve all done this…)
But a bookmarklet is more than just a URL – it’s Javascript code that is run when clicked. What Javascript? Whatever you choose really. It could scrape content off the page, open another URL, call an AJAX endpoint to fetch data, etc.
Sounds exciting – right?
How Write a Bookmarklet
The biggest trick to writing a bookmarklet is to start a one-line string of Javascript with javascript:. So a super-simple example is to have an alert box popup.
1 | javascript: alert('hello world'); |
One frustrating thing about writing a bookmarklet however is that the code needs to be on one line. This makes it difficult to edit and do development of course… You write 30 lines of code with if/loop statements and you need to wrap another if around… the closing } goes right after… shoot… this is hard to read…
A Better Way to Write a Bookmarklet
A tool has been born to make writing bookmarklets easier packed full of great features:
- Script Editor
- Beautified editor to write code the way it should be!
- Bookmarklet formatting built in behind the scenes
- No need to ensure you have the proper syntax, format, single-line properly formatted, etc.
- Include jQuery on a page that doesn’t have jQuery with the check of a box
- Versionable
- Easily regenerate the beautified code in the editor from the bookmarklet
- Generate HTML for embedding your bookmarklets into an HTML document for sharing with others
Try it out for yourself. Write your javascript, make a bookmarklet, and make your daily routines that much easier!
Tutorial 1: Get Page Content Bookmarklet
This tutorial will show how to make a simple bookmarklet that copies text of the main links from a Google search results page.
Create Bookmarklet version 1.0
First name the boomarklet and set the version number. Also, Google does not include jQuery on their page. Thus check the Include jQuery box to have jQuery accessible to your bookmarklet.
Vanilla Javascript can be used to write the bookmarklet as opposed to relying on jQuery. Including jQuery here is for the purpose of demonstrating how the jQuery option works.
Write bookmarklet Code
On the Google search results page, each of the main links are <h3> elements. So a small block of jQuery will output the text.
1 2 3 4 5 | jQuery("a>h3").each(function(i,v){ if(v.innerText.length > 0){ console.log(v.innerText); } }); |
Generate the Bookmarklet Link
Click the Generate Bookmarklet button and the code magic happens in the background.
In the yellow block is a button for dragging to the browsers bookmarklet bar. And just that simple a bookmarklet has been created and is ready to be used.
Additionally there are two HTML output blocks.
The Bookmarklet HREF can be used to manually add a bookmarklet to a browser, email to others, etc.
Copy the HREF, add a new page, and paste into the URL field.
The Bookmarklet HTML box is the HTML that can be copied to an HTML page for publishing this link for others to use. This will result in a button on a page just like the yellow block above. Example CSS can be found under the Directions / Reference section.
Create Bookmarklet version 1.1
The bookmarklet currently only outputs to the browser console. And that’s not overly helpful. This bookmarklet tool has a built in mechanism for quickly reloading the bookmarklet into the editor for making alterations. A URL is built into the bookmarklet. This can be found by right clicking on the bookmarklet and clicking Edit...
For the sake of illustration, you can see here in the Bookmarklet HREF the same URL.
Clicking on this link will load v1.0 of the Google Link bookmarklet.
Now update the Bookmarklet Version Number to 1.1, modify the Bookmarklet Code as needed, and click the Generate Bookmarklet button again.
1 2 3 4 5 6 7 8 9 | var out=""; jQuery("a>h3").each(function(i,v){ if(v.innerText.length > 0){ console.log(v.innerText); if(out.length>0){out+="\n";} out+=v.innerText; } }); navigator.clipboard.writeText(out); null; |
Now clicking this updated bookmarklet will copy the link text to the computers clipboard. Pasting will output the text into a text editor.
Given that this is a new version and code, the link to edit this bookmarklet is now changed. This updated bookmarklet can be re-published to those that it’s shared with and inform them of an updated version.
Tutorial: Bookmarklet with Prompt
There may be a need for an input field to be used with the bookmarklet. For example, if the URL is predicable and only needs an ID filled in, a bookmarklet like this will do the trick.
Clicking the bookmarklet will open a prompt. Enter an ID, click OK and the bookmarklet will open a URL with this ID appended to it (per the code).
1 2 3 4 | (function () { var id = prompt('Input Order Entity ID'); window.open("https://www.example.com/id/"+id); })(); |
Generate a bookmarklet
This bookmarklet generator tool is there for use as needed. With the examples above, a little knowledge of Javascript, and this tool there isn’t anything in the way from making awesome bookmarklets!
