How to use JavaScript Bookmarklets to Amend Web Page Example [Tutorial Text and Video]

TLDR; When you learn to manipulate the DOM with JavaScript you can create simple tools and automate from within the browser and use bookmarklets to make the code easy to execute and sync across different machines.

Background

When I first learned how to code it was in BASIC with an interpreter. This was great because I didn’t have to write a lot of scaffolding code to create an application I just wrote code and it ran.

I can experience a similar process using JavaScript in the browser console which makes JavaScript a good first language to hack about with and make your first steps learning how to code.

It also means that I an get a lot done very quickly from the console to help me when I test web applications.

I can manipulate a web application client in my browser by:

changing the DOM
amending the JavaScript
changing the values of variables
adding new elements into the DOM

A client, in a browser, is ours to command.

A Set of Twitter links

Bearing the above in mind. I visited the TestingCircus.com list of testers on twitter and there were a few names I didn’t recognise.

The page handily provides the twitter handle and the URL but the URL is a text element, not a clickable URL. Therefore in order for me to check if I follow that person I have to engage in manual effort to copy and paste the text into the browser URL field and visit the page.

Ugh, manual effort.

Fortunately however:

this is a web page
the URLs are on the page as text
I know how to get the URL from the page with JavaScript
I know how to amend the DOM with JavaScript
I can write some JavaScript to convert all the text URLs into clickable URLs

The full process for this is shown in a video on youtube.

The code

If I inspect the page and into the JavaScript console I paste the following code and hit return to execute the code then all the Twitter URLs will become clickable:

posslinks = document.getElementsByTagName("td");
for (var plinkid = 0; plinkid < posslinks.length; plinkid++) {
    if (posslinks[plinkid].innerHTML.startsWith("https://")) {
        posslinks[plinkid].innerHTML = 
                     "<a href='" + posslinks[plinkid].innerHTML + "'>" + 
                     posslinks[plinkid].innerHTML + "</a>"
    }
}

get all the elements with tag name “td”
iterate over them all in a for loop
if the text in the table data/cell starts with “https://” then
- change the text so that it is clickable link

The bookmarklet

Since I will probably want to do this a few times I can make this easier by creating a bookmarklet.

A bookmarklet is:

javascript code
wrapped in an anonymous function that executes immediately
prefixed with “javascript:”
added to your browsers bookmarks

javascript:(function(){
  posslinks = document.getElementsByTagName("td");
  for (var plinkid = 0; plinkid < posslinks.length; plinkid++) {
    if (posslinks[plinkid].innerHTML.startsWith("https://")) {
      posslinks[plinkid].innerHTML = 
         "<a href='" + posslinks[plinkid].innerHTML + "'>" + 
         posslinks[plinkid].innerHTML + "</a>"
    }
  }
})

If I paste the above code into my bookmark toolbar then I’ll create a bookmarklet that I canclick on to change all the listed URLs to clickable URLs.

Bookmarklets can sync across machines .e.g if logged into Chrome Browser then your bookmarklets sync across all logged in browser sessions.

A Tool

Because I create small JavaScript snippets and convert them into bookmarklets to help me with my testing and general web navigation, I created a tool to help with this process.