April 2023 - June 2024
OpenAI HTML CSS JavaScript

Need an explanation of something on a page? Like, now? Like... right now? Without leaving the page? And clicking any buttons? And the explanation needs to consider other content on the page? Sounds a lot like HighlightGPT. Like a lot.

Show me how to HighlightGPT

HighlightGPT usage instructions:

  • Open a website
  • Read it
  • Read some more
  • Notice the microscopic scroll bar
  • Realize you need to read a lot
  • Get stuck on a concept
  • Do research on the concept
  • Realize you are only a quarter of the way done with your assignment
  • Subsequently realize that you’ve already spent 3 hours on it

Kidding. Here are the real instructions:

  • Select text

That’s it!

So slick.

After the initial setup (user input of their API token), there is no visible interface aside from the small popup that shows up with the summarized/explained/shortened text.

Sooo useful.
Sooooo informative.
Dark mode!

The unintrusive popup quickly appears after a user has selected some text, and a small “Loading...” denotes that it is processing a summary. A result is typically generated within a second, but sometimes may take up to three.

Let’s get technical

Despite the premise of HighlightGPT being relatively simple, the implementation for HighlightGPT is likely my most unique. First, the user selection range is cloned and saved. The midpoint of the selection is calculated and a string of invisible characters in that spot on the page is inserted to save the position. The context window is created based on the length configured in the extension settings, but the precise boundaries are shifted to account for cases where either the start index is at the very beginning of the page or the end index is at the very end. Also, the moment the mouse is lifted, the X and Y coordinates are recorded and the placeholder popup is rendered at that location.

As the mouse is lifted and the context boundaries are defined, the extension pulls the text from that window and sends a request to OpenAI with the selection, context, and additional instructions. Utilizing the latest model, we get a response pretty quickly, and the output is immediately displayed in the placeholder popup. Through trial and error, I have concluded that ignoring double-clicks would yield the smoothest experience for the user.

Motivation

HighlightGPT is another project that caters to an inconvenience that I have, whether it be needing a quick summary, explanation, or cumulative information snippet, similar in design to Wikipedia’s “Page Previews”. The solution had to be unintrusive, responsive, straightforward, and useful.

Wikipedia’s "Page Previews".

So, does HighlightGPT live up to its standards, ideologies, goals, and motivations?

Verdict:
Yes

HighlightGPT is a fun little experiment with decent results. The properties of LLMs allowed the extension to provide a response that was automatically catered to what the user was selecting, a feature that took minimal implementation effort on my end. Unfortunately, the page context forwarded with the OpenAI’s API request, while customizable, required a substantial amount of surrounding page content to be relevant, catered, and accurate, resulting in rapidly rising expenses. During development, I did not consider any ways around that. Additionally, a UI refresh and an update that compresses the request context (or selects the most important context) would yield a higher success verdict.