ChatGPT Bookmarklet to Decipher Any Text on a Web Page

Man and woman expressing befuddlement at bits of text in a web page.

Ever wondered what an acronym means in an article? They’re not easy to look up in a dictionary since a 2- or 3-letter acronym could mean different things in different contexts. But, given some context, it’s an easy question for an AI chatbot. Likewise, you’ve probably encountered web pages with other bits of incomprehensible text: esoteric words, verbose sentences, or phrases in foreign languages. To implement this popular ChatGPT use case, we’ll create a clickable browser bookmark that connects to the ChatGPT API to decipher some text.

Here’s what we’re aiming for:

Animated video of AI chatGPT bookmarklet explaining text

About this ChatGPT Use Case

The goal is to be able to highlight a bit of text on a web page, then click on a button on your browser, and have the text replaced, in a red font, with its simpler meaning. It’s not realistic to think that a user would go to chatgp.com every time they wanted to ask a question about some cryptic text. Instead, we’ll use the ChatGPT API to programmatically capture the context around some highlighted text, and instantly pass that to ChatGPT, along with a prompt asking for the meaning of the text. To do this, we:

  1. Set up a bookmark to a random website
  2. Assign the bookmark to not load the random website, but rather, to execute some JavaScript code
  3. The JavaScript code detects the highlighted text on the page and sends a question to ChatGPT asking what it means
  4. To pay for OpenAI’s processor time, you will set up an account with a service called “Eden AI” to get a free $1 credit for use with OpenAI’s API

Video Tutorial

A longer video, with the EdenAI registration process, can be found here on our Youtube channel.

Step 1: Bookmark a Random Website

This bookmark will eventually become the button you press to figure out an acronym. First, start by bookmarking a normal website — we recommend https://isitchristmas.com for its simplicity. Depending on your browser, you can bookmark a site by:

  • dragging its URL onto the bar below the URL
  • click on a star or flag next to the URL to add it to “favorites” (same as bookmarks)

Ultimately, you should end up with a button your browser that, when you click on it, instantly loads a specific URL.

Step 2: Edit the Bookmark to Execute JavaScript Code

Beyond putting a URL in the address bar, did you know that you can put a snippet of JavaScript in the address bar and the browser will execute it? This means that you can likewise click on a bookmark and have the browser execute a bit of code. To arrange this change the URL in your bookmark from, for example, “https://isitchristmas.com” to “javascript:alert(2+2)”.

First, right-click or option-click on the bookmark icon and select “Edit…”:

screenshot 1 - editing bookmark

Next, change the current bookmark to a fun label like “huh?” and instead of the URL, type in the JavaScript snippet, “javascript:alert(2+2)”:

screenshot 2 - editing bookmark
screenshot 3 - editing bookmark

After you update your bookmark, you should be able to click on it and see the JavaScript code calculate the result of 2 + 2. This is called a “bookmarklet” and should pop up this alert when clicked:

Screenshot 4 - editing bookmark

It works! Now that we can execute JavaScript with the click of a button, we just replace our simple arithmetic JavaScript with a chunk of code to call the OpenAI API and ask what a particular acronym means.

Step 3: Get a Free API Key from Eden AI

To use OpenAI’s ChatGPT API, you need an “API Key” — a secret code that tells OpenAI who is using their service. API keys are similar to the keycodes employees use when they take turns using the office photocopier — the keycode allocates a certain amount of billing to each person, which gets charged on a company credit card at the end of the month. OpenAI does give you a certain number of free credits for use for a limited amount of time, but unfortunately they still require you to input a credit card to get one of their API keys, so they can start billing you when the free credits expire. There is, however, an alternative, which still gives you access to OpenAI’s API, but doesn’t require you to type in a credit card number to start. This service is Eden AI (https://www.edenai.co), and it serves as a sort of proxy where you can access different APIs from different companies with a single Eden AI API key.

Eden AI offers a free trial with $1 in credit if you create an account with a gmail/yahoo email address, and more if you create an account using a business email address. To get the definition of an acronym, it only costs a few cents of processing power, so using the Eden AI key should work for a while.

To get the Eden AI API key, register on their website, preferably using a work email. From there, you’ll see your new API key and current balance on the home page of their dashboard after you log in:

Screenshot of Eden API dashboard

Copy the Eden AI API key and save it in a text file.

Step 4: Incorporate your New API Key into this JavaScript

Now that you have an API key that works with OpenAI’s API, we can incorporate it into some JavaScript that identifies a highlighted word on a web page, finds the context surrounding it, and sends a prompt to ChatGPT to figure out the acronym based on the context.

Step 1: Simply paste your (quite long) new EdenAI API key into the green text box below. When it is pasted, it will automatically replace the placeholder “xxxxx” API key in the orange text box further below. Alternatively, if you want to follow best practices for security — and avoid pasting your API keys into someone else’s website — copy the big code chunk from the orange input box below and paste it into an external text file, then replace the “xxxxx” API key in the code with your actual Eden API key.

Step 2: Once you’ve pasted your key into the green box, click on the “Copy” icon at the bottom of this input box:

Copy icon

At this point you should have the entire code — with your Eden API key integrated into it — copied into your clipboard.

Step 5: Update your Bookmarklet with your Custom Code

While your newly updated code is still in your clipboard, right-click on your bookmark to edit it. Paste over the “javascript:alert(2+2)” with your long one-liner:

screenshot 3 - editing bookmark
Bookmarklet with acronym decoder code screenshot

Step 6: Test It

No go to a web page that has a lot of acronyms, highlight one of them, click your bookmarklet, and watch as it replaces the acronym with its fully-spelled out definition:

White House paragraph with SBA acronym
White House paragraph with acronym decoded by ChatGPT

Notes on this ChatGPT Use Case

For advanced users: there is another number you can tweak, a variable called “contextLength.” This determines how many characters on either side of the highlighted acronym get sent to the API as context to help it identify the acronym. You can increase this number to get more accurate results, but that costs more in computing fees.

If the bookmarklet stops working, it’s possible that:

  • you’re on a website that forbids sending data to external services (e.g., Twitter)
  • your free credit from Eden AI has expired
  • Eden AI has changed something about the way code should communicate with their servers (unlikely)

Want to learn more about AI chatbots? Consider taking our instructor-led ChatGPT training courses or Midjourney classes.

1 thought on “ChatGPT Bookmarklet to Decipher Any Text on a Web Page”

Leave a Comment

Scroll to Top