Announcing highlight.js, an extension to highlight text on web pages

I participated in IndieWeb Create Day, an online event during which people in the IndieWeb come together to work on personal projects, this Boxing Day. I decided to start on a new project. I wanted to build a tool that would let me highlight specific pieces of text on my website and send those highlights to someone else for them. I have previously built a tool, fragmention.js, that lets you link to a specific paragraph of text, but this tool has its limitations: I can't link to multiple parts of a web page, I can only link to full paragraphs.

I wanted this project to work on both my personal site and my wiki, which meant it had to be site-agnostic. Thus, I decided to architect my code in such a way that it would not be dependent on my site. I built a separate stylesheet for the project and use JavaScript to dynamically insert all of the elements that the extension required. This turned out to be good preparation for turning the script into a browser extension, something I will talk about later in the post.

highlight.js, the name I gave to this project has a simple goal: enable people to create sharable links that highlight text on a web page.

I had a few requirements:

1. I should be able to highlight multiple pieces of text on a web page.
2. I should have an interactive highlighting interface through which I can select different pieces of text.
3. I should be able to remove highlights easily.
4. Links must be sharable without any installation requirements (i.e. you should not have to download a browser extension to use the tool).

To build the highlighting feature, where I can highlight text with my cursor that will be turned into a URL, I used the native browser window.getSelection() function. This lets me get the text a user has highlighted on the page. If the highlighted text is in a p or an li tag, highlight.js will save it to a list of highlights. highlight.js updates the URL of a page to add a new fragment (#) attribute, like this:

#text=this is an example

The above URL fragment would link to the "this is an example" text on the page. Highlights are comma-separated in URLs, which means that I can link to multiple pieces of text on a page:

#text=this is an example,#text=another example

Only exact matches are supported. highlight.js is case sensitive.

I then replace the highlighted text on the page with a span tag with a purple background colour. This span tag has an inline property so as to ensure the text fits in with the rest of the text in a sentence or paragraph. Appropriate sanitization is conducted using the DOMPurify library, recommended by the Mozilla Developer Network for HTML sanitization in browser extensions.

Initially, the highlighting feature was enabled for all users. This was not appropriate since not everyone would want to highlight text. I decided to add a control shortcut, Control + K that, when triggered, would move a web page into a highlighting mode. This mode keeps track of how many highlights have been recorded on a page. Here's an example of a page in highlighting mode:

When you press "Copy URL", you'll get a URL that you can share with someone else. Because highlight.js lives on my website, the link will work for anyone. I also installed highlight.js on my wiki, which means that I can highlight text on there too. My initial use case for this project was to be able to highlight specific movies on my list of recommended movies, which I am now able to do.

Here is an example of a page on my wiki with highlighted text:

highlight.js is available for all website visitors. Press Control + K and highlight text on the page to get a sharable URL that, when opened, will highlight the text you selected.

Toward the end of the Create Day meetup, I believe Angelo wondered whether the code could be put into a browser extension to allow people to highlight any website. I have worked on browser extensions before, but mainly on new tab pages so I had a bit of reading to do. It turns out that with a bit of metadata in a manifest.js file I was able to get pretty close to having a working version of highlight.js that could be applied to any website.

I had to change my code so that highlight.js annotated text at the end of the JavaScript code, rather than on a DOMContentLoaded event. I ran into issues using DOMContentLoaded. With this change, I had a script that let me highlight text on any website and create a sharable link. The sharable link would work if you have the highlight.js extension installed.

I am excited to use this tool for personal highlighting. I can record excerpts of text on a page and save my highlights for later use. I can envision a page on my website that shows quotations I find interesting from websites and that links directly to the quotation on the website (so long as you have the highlight.js extension installed, otherwise the page will load as normal).

After reading some Mozilla web extensions documentation and adding the requisite meta information, I had a version of highlight.js ready for the Mozilla store. I submitted the extension late at night because Create Day was hosted on Pacific Time. Within about a day, the extension was approved. I'm excited to announce you can start using highlight.js on Firefox today by downloading the extension. I have submitted a version to the Chrome extension store, but I expect to wait a bit longer for the extension to be approved.

Here is a short video that shows me highlighting two pieces of text on Wikipedia and creating a link for me to use later:

I don't presently have plans to expand this into an annotation extension, as I believe that purpose is served by Hypothesis. For now, I see this extension as a useful way for me to save highlights, share specific pieces of information on my website, and enable other people to do the same.

If you have any suggestions or ideas on how I can improve highlight.js, let me know. The code is open source and released into the public domain. I'm excited to keep using this extension myself.

Also posted on IndieNews.

Tagged in highlights, indieweb.