Bookmarklets part 1
I was looking at a Wassat (Wellington Open Source Show & Tell) notice and looked back at one of the organisers, Grant, presentation on Bookmarklets on YouTube and slides. I thought it was an interesting idea and decided to explore it further.
Basically you do add Javascript to the Address bar on a browser. This Javascript usually loads after the page has loaded, then it creates an event on that page. You can have it as a simple bookmark on your Bookmark Toolbar, just like any other Bookmark and with Firefox you can even assign a hotkey to it as well.
As you are doing the JS event after the page has loaded, and you have a script that changes the background colour of the page, you can go back to prior running of Bookmarklet by just refreshing the page and it brings you back to the original page load state.
Sounds cool and I was intrigued by it. So I started by wonder exactly what you could do to on mr YouTube. The code train one shows how to build them and challenges (no new lines in JS) but his examples are a bit weak. The 2nd video discusses a webpage mrColes that takes your JS and converts it into a Bookmarklet:
All the above videos do not show any examples that made me jump out and go mad on them, so I started looking on web search and came across this site Jesses Bookmarklets and there are quite a few examples to test and you can browse by topic. I quite liked the ^Highlight Word^ (my quotes don’t seem to work in wordpress at the moment) and the ^zap white background^ which changes background colour on the page you are reading.
At Statz n stuff site there is one bookmarklet that allows you to play snakes and another with Asteroids (actually that one I want to play with), there is also this website Website Asteroids where you can get the bookmarklet more easily.
Another site I found is Bookmarklets, history, exported bookmarks, extensions for Chrome & Firefox (2020-08-17)-David McRitchie and there are some nice ones on this site, I found a nice one that sends you email of the tab URL you are currently on, Send, where you put your email address in and when you use the link it will send an email to that address:
javascript:{var s=[],metas=document.getElementsByTagName('head')[0].getElementsByTagName('meta');for(var i=0,L=metas.length;i<L;i++){if(metas[i].name.toLowerCase()=='description')s[s.length]=metas[i].content;}s=s.join(',');}location.href='mailto:[email protected]?subject='+document.title+'&body='+escape(location.href) A couple of practical ones are where you highlight text, press Bkmklet and it takes you to Wiki or Google for searching , I’ve now set a couple of these up, they are useful and predictable.
Another video on BkmkLets I thought was really good and the demo for testing in Chrome is very educational (firefox does not have developer snippets):
I saw on the Statz page a Timer, but couldn’t get it to work, but found this site 7is7.com where you can setup your own bookmarklet to start a timer from a specific date & time, slightly fiddly as you have to set start time, but form other articles I’ve done on getting a timer running for projects this is pretty simple and handy.
Open in New Tab/New Window
This has been a bit of a challenge for me. I had a couple of Bkmklts that I put on my browser bar so that I could access them right away, one being selecting a bit of text in a web page and then looking it up on Wiki or looking it up in DuckDuckGo. The only issue being it did it in the tab that you had selected the text in, rather than opening another tab. At the time I did a bit of searching on the topic and didn’t have much success. I’ve since had another attempt that has been more successful. Now they are much more usable.
the window.open JS code does different things depending on your browser seetup. I have firefox and the window.open default is Open a New TAB, that is a FireFox default, in other browsers it might be open a new Browser Window, so the Bookmarklet will open in a completely new browser window. If you want to chage the browser default you have to go into the specific browser settings to do so.
I’ve been testing them on a dummy Bkmklt, editing the JS until I get it to work. So for Wiki after highlighting text on a page, cut past code below into a bookmark:
javascript:q = "" + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);if (!q) q = prompt("You didn't select any text. Enter a search phrase:", "");if (q!=null){window.open("https://en.wikipedia.org/wiki/" + escape(q))}; void 0And for DuckDuckGo, cut past code below into a bookmark:
javascript:q = “” + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);if (!q) q = prompt(“You didn’t select any text. Enter a search phrase:”, “”);if (q!=null){window.open(“https://duckduckgo.com/?q=” + escape(q))}; void 0
Anothjer that I think is useful for me is finding an address and then looking it up on google maps, so you select/highlight the address then hit the bookmarklet and it opens a new Google Maps tab with a pin for the address, cut past code below into a bookmark:
javascript:d=''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(/\r\n|\r|\n/g,' ,');if(!d)d=prompt('Enter the address:', '');if(d!=null){window.open('https://maps.google.com?q='+escape(d).replace(/ /g,'+'))};void 0GreaseMonkey
I’d heard of Greasemonkey doing the JS injection into a web page. There is a Firefox add in for it. The video below goes through the fundamentals of what its trying to do:
This allows you to programmatically change specific websites that you visit and store the script related to the actions. You can filter which websites it effects and create a library for different actions on different sites. As it sits in the background it automatically runs when you open the specified URL.
End comment
I like the idea of being able to do more things with bookmarks and the bookmarklet is a nice feature to use, especially being able to alter some of the structure on existing pages, one I was playing with was transposing rows , altering bullet points to numbers and adding row numbers
I think these might have their place as productivity tools if they are in a handy location. Im please with colouring white background one for reducing eye strain on web pages, also the google and wiki searches too. I’ll bear them in mind for finding simple, practical uses.
Searching for popular bookmarklets and articles such as the best 10 BMLets a lot I’d never use as they do not do much for me, but there is a potential for bespoke code for repetitive tasks like autofill forms and uploading data onto a form or database through a webpage, or even for some validation testing on websites. A handy button to run some simple code may be just the right process to use.
