Some Fun with Bookmarklets and the Contenteditable HTML Attribute

Introduction

ooh, new fancy section header title things (you’re welcome)

I know it’s been a while since I posted last1, and I’m going to try to post more frequently. I just have a lot of unfinished projects that I didn’t really feel were ready. With that out of the way, I have something interesting to share with you today: a JavaScript script that can be embedded inside a bookmark and run on any page open in the browser. Once activated on a web page, this script2 allows you to make temporary, client-side edits to the web page.

 

ooh, footnotes

1. 228 days, 21 hours, 17 minutes and 24 seconds

2. I might call it “Editable.” I’m so creative.


(ooh, fancy <hr /> dividers)

How it Works

[Demo video definitely probably maybe coming soon] 

To use the script, go to this page and just drag and drop the link into your browser’s bookmark bar; WordPress doesn’t like having scripts inside links, so I couldn’t have the link directly in this blog post. Once the bookmark3 is clicked, it will enable editing for the page you are currently on, much as if you had opened it in a word editor. It provides similar functionality to the “Inspect Element” developer tool in most modern web browsers (Ctrl-Shift-I in Chrome), allowing temporary front-end edits to a web page that are reset when the page is loaded. This tool just makes it easier to do this, without having to individually “inspect element” for each element you want to alter. To disable editing, you can use the “Disable Editable” script, also on this page (refreshing should also work).

The link contains a script that includes JavaScript code. When the bookmark is clicked,  this code is run. In this case, the script runs through each HTML element on the page and changes its “contenteditable” attribute to “true,” allowing the user to edit text as if it was inside of a text box. Another thing that’s cool is that the code is small enough to be stored entirely inside of the bookmark, without needing to reference an external file, so you can use it without needing to be connected to the internet (although I can’t really see why you would want to use this offline). There are many other uses for this kind of embedded code; this is just one that I thought would be cool to test out.

Usage Examples:

(can you guess which one is before and which one is after?)

I wonder how many lawsuits I’ve opened myself up to.

Maybe this would be a better name for the blog. . .

What’s this Google thing all about, anyway?

Icons, taken literally.

The whole page will basically act as a text field, so if you want to revert a change you can just use Ctrl-Z (Command-Z on a Mac) or refresh the page. I also can’t guarantee that this will work in all browsers, but in the latest version of Google Chrome it’s worked just fine for me. I did have an issue once where even after navigating to a different page, one of the changes I made with this script remained, but refreshing the page should usually fix the problem easily (the changes are never permanent; they are all just on the front end). I also noticed that after enabling editing for a page and then leaving that tab alone for a while could cause the page to slow down, so I would recommend closing the tab after you’re done using this.

The whole script is relatively very small, and I’ve broken it down here:

javascript:( – Signals a JavaScript script inside of the bookmark

function() { – JavaScript function that our code is stored inside of

var elements = document.getElementsByTagName(‘*’); – Selects all HTML elements on the page and stores them in an array (we’re using single quotes because the whole script has to be stored inside the href = “yourlinkurlhere” attribute of an HTML link)

for(i=0;i<elements.length;i++){ – “For loop” that cycles through the entire array

elements[i].setAttribute(‘contenteditable’,true); – Here’s where the magic happens: select the current attribute from the array and set its “contenteditable” property to “true” (the disable script just sets this to “false”, disabling editing) [more single quotes]

} – Closing bracket

} – Another closing bracket

()); – End JavaScript

 

3. I just found out this morning that these things actually have names. They’re called “bookmarklets“, or “favlets.” Good to know.


Credits

This mini-project was primarily inspired by fontBomb, another cool “bookmarklet” (the bookmark embed code is also based on this) – fontbomb.ilex.ca

Stack Overflow answer that helped me embed the code inside a bookmark – stackoverflow.com/questions/18872679/function-as-google-chrome-bookmark


Disclaimer

Who doesn’t love a good disclaimer?

Please don’t use this maliciously or try to convince people that a website says something it doesn’t. This is purely for fun and I hold no responsibility for malicious or unintended use of my projects.

The End

Well, if you made it to the end, thanks for reading. I should have another post posted in about a week or so. Bye.