Do you have repetitive web tasks where you have to click on the same set of buttons over and over again? We once had to go through over 3000 pages containing 100+ checkboxes and make sure four were ticked. If I’d known about “bookmarklets”, the job would have be a lot easier!
CreativeMedia.org.uk is all about making life easier, so I’ve written this tool to make the tricky part of the process easy too.
Watch my video, use the tool below and start bookmarkletting: Your fingers (and mouse!) will thank you for it! Donations for my time are much appreciated.
Enter a line-separated list of IDs for boxes that should be ticked (or leave blank)
Enter a line-separated list of IDs for boxes that should be unticked (or leave blank)
Enter a line-separated list of IDs for anything else that should be clicked (or leave blank)
Enter a line-separated list of IDs for anything else that should be clicked (or leave blank)
Enter ID for the page’s submit button (or leave blank if none) and a delay in seconds (to allow time for all the above clicks to take place)
Drag your bookmarklet to your browser bar.
You can practice safely with bookmarklets on the sandbox page
Keep a collection of the code for your bookmarklets, either in a text document, or in a local HTML file. If you put the javascript code in as a link, you can drag it to the bookmarks bar when you need it, rather than having to keep it on the bar all the time.
Here are some JavaScript snippets for how to perform certain actions. Once you’ve created (and tested in the browser’s Developer Tools Console) your code…
Go to a JavaScript “minifier” site such as Uglify and minifier.org and use it to remove all the spaces and line breaks from your code. If there are still spaces after minifying, probably replacing each space with the code %20 should work. The minifier may also change your code (eg the IF statements) into a more compact form.
Create a new bookmark on your browser bookmark bar. In the Location (or URL) field type javascript: and then paste in your minified code. Save the bookmark and, fingers crossed, it should work!
If an item has eg class="thisname” instead of id="thisname" and if there’s only one instance of class="thisname" on the page, here are some other ways to identify and click them:
document.getElementsByClassName("class")[0].click();
document.getElementsByName("name")[0].click();
document.querySelector('[title=\'Source code\']').click(); (The backslashes are so you can use single quotes around Source Code - using double quotes in the script makes it difficult to create the bookmarklet link).
listOfLinks=document.getElementsByTagName("a"); // Go through the all the "a" links on the page and find the one with title "delivery"
for (i=0;i<30;i++)
{
if (listOfLinks[i].innerHTML=="Delivery")
{
listOfLinks[i].click();
}
}
(This method looks through the first 30 links on the page and clicks ones matching the string)
Sorry, I’ve not found a way to make the bookmarklet carry on operating after a new page opens. You could create a second bookmarklet for operations on the next page, or you could try installing AutoHotKey.
Try this code for <input> boxes:
document.getElementById("id").value="text";
…and this code for <textarea> boxes
This probably isn’t possible using a bookmarklet. You may want to try programming Autohotkey to click on your bookmarklet, then click on the popup.
JavaScript is impatient! It doesn’t wait for one line to complete before running the next. Try the code below to delay operations. All the lines will still be triggered simultaneously when you click the bookmarklet, but now they’ll have to wait for the amount of milliseconds you specify.
setTimeout(function(){document.getElementById("id").click();},500);
This example will click on the item with id “id” after a delay of 500ms (half a second). The code between the { and } is what runs after the delay. You can put whatever JavaScript you like in there. If you use several setTimeout commands simultaneously, the ones with the smallest delay number should run first.
In this case, there's only one <iframe> on the page:
iframeHandle=document.getElementsByTagName("iframe"); // Find all the iframes on the page
doIt("firstName","test",iframeHandle[0]); // I'm doing this using a function to make it more compact to update several items
function doIt(id,text,handle)
{
iframeHandle[0].contentWindow.document.getElementById(id).value=text;
}
There’s a lot more that can be done with JavaScript. A web search may find you a solution. Sites like W3Schools have lots of simple examples for you to learn. Or find a friendly programmer to help you.
AutoHotKey is a really useful tool that enables you to create new keyboard shortcuts, program mouse and keyboard actions and even loop them, for hands-free computer operation.
Give me some encouragement by making a donation via PayPal - decide an amount in GB pounds/pence (xe.com will show you current exchange rates) based on how much time/tedium it’s saved you. Alternatively, make a donation to Oxfam, Greenpeace or Practical Action. If you can’t stretch to that, then visit an advert on this page and I may earn a few pence.
When creating this page, I used the incredibly useful site HTML-Cleaner. It’s a great way to turn documents into clean HTML code for web pages and content management systems.