First Chrome Extension: Urban Dictionary Random Word

See a random word from Urban Dictionary when you open a new tab in Chrome.

Currently, I use more than five new tab style Chrome extensions ranging from tabs showing how old I am getting every second to random quote.

For those who don’t know what new tab style Chrome extension is, think of it as a webpage that shows up every time you open a new tab on Chrome.

I have been going on Urban Dictionary more frequently these days and saw it as an opportunity to learn by making new tab Chrome extension.

Check out the extension on web store!

Urban Dictionary Random Word

Here is what I learned from making it:

The basics

When making any style Chrome extension you need a dedicated file named manifest.json. This file consists the meta data about the extension. This is how mine looks like:

{
  "name": "Urban Dictionary Random Word",
  "short_name": "Urban Dictionary",
  "version": "0.0.2",
  "manifest_version": 2,
  "description": "See a random word from Urban Dictionary when you open a new tab.",
  "author": "Abhinaya Konduru",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png" },
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "permissions": ["storage"],
  "browser_action": {
    "default_icon": "icon48.png",
    "default_title": "Urban Dictionary"
  }
}

chrome_url_overrides tells the browser to overwrite the contents with new html files that is part of the project.

Entire project is written in HTML, CSS, Javascript and jQuery.

Urban Dictionary API

There is no official Urban Dictionary API guide but I came across

http://api.urbandictionary.com/v0/random

that results in 10 random words along with other information like definition, example and word URL.

With the API call I was able to take the first word, it’s definition and example to show it on screen.

Soon, I learned that the definition and example for the word are not the “top” definition and example. I wanted to make sure the definition and example are the best ones to understand the word in the few seconds that user looks at it (FYI — on Urban Dictionary, users can upvote or down vote a user suggestion description for the word. So one word might have multiple descriptions that consist of definition and an example).

Needed to figure out two things going forward:

1. How to get the top definition and example for a random word?
2. How to store info about all 10 words to not call the API too many times?

Top Definition and Example

Discovered another API call that can be used to get all the definitions of the word:

http://api.urbandictionary.com/v0/define?term=WORD

This call returns all the definitions and examples for a specific word. It is way more than I needed because I only used the first returned definition and example of the word.

Store Information

This is why we need to get permissions through manifest.json.

"permissions":["storage"]

This allows the webpage to “store, retrieve, and track changes to user data.” You have the option to store the information locally or through sync. I went with the sync option.

You can store/save the information using the set option:

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

and retrieve/read the information using the get option:

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

With these two questions answered, I now had the pieces together.

Mo Problems

This is also when I ran into more issues with asynchronous and synchronous execution of code.

While I had the correct code to show the word details on the page, it was taking too long to get the information from the API calls to execute the code properly. To make the code work, I had to learn about promises and async functions. Once I figured out how to use them by using a predefined example, I was able to come up with the basic structure.

Get word dictionary from storage
   if the storedObj is undefined or null
      output a pre-defined example to html 
      create a word_dict array
      save word_dict to the storage
      call getAllRandomWords function
   else if storedObj.word_dict length is less that or equal to 2
      take the first word array from the stored array to output to HTML 
      save the stored array again
      update word_dict array by calling getAllRandomWords function
   else
      take the first word array from the stored array to output to HTML 
      save the stored array again

The reason for else if statement is to update the array with new information without the user noticing any lag next time next time they open their tab. However, I am concerned that it might have errors if there is ever a connectivity issue or the user closes the tab fast.

The definition and example sentences go through extra loops to turn some of the words into hyperlinks. This is done by recognizing the words through a regex. For example, Urban Dictionary might return a definition of a word in this format:

who is [the true] definition of [perfection]

Using regex, words inside the [] are turned into a hyperlink. We now have working code that does what we want: show a random word from Urban Dictionary with its top definition and example.

✎ Settings

NSFW words — Friends who heard about the idea soon pointed out to me that there has to be a filter set in place to make it work friendly.

A text box was created to get the words that the user is not comfortable with. Whenever those words show up in definition and example, that word info is not saved to the dictionary array (there might be a bug).

Reset — I wanted to give the user an option to reset all setting if there is ever something wrong with it. As if now, this option also erases users NSFW words. I am still debating if I shouldn’t do that as it can be annoying to retype those words.

☀ Light/Dark Mode

I am a huge fan of it 😎

CSS

Color

The hyperlink color has to work on both light and dark modes and be color blindness friendly. I went through shades of yellow, orange, green and blue before selecting a turquoise shade.

Font

I spent way too much time trying to find a new font that I liked and worked well with the project before settling on my old favorite: Roboto.

Developer Dashboard

This is where you have to upload your files to share it with others on the Chrome web store.

It was fairly simple to upload the zipped file, fill out the description, upload screenshots (1280x800) and promotional tile images.

The dashboard also asks to pay “a one-time developer registration fee of US$5.00” but it still allowed me to publish it to the web store. Not exactly sure if I have to pay it in the future or not but it works just fine for now. Go check it out!

Urban Dictionary Random Word

You can find the code for the project on GitHub as well. Open for suggestions on how I can improve the code and what else you want to see in the Chrome Extension. You can DM me as well✌️