Looking for a way to spice up your browsing experience? Look no further than our dictionary extension! With this powerful Chrome extension, you can easily look up word definitions without ever leaving your current browsing session.

How it Works

Our dictionary extension is a simple and straightforward Chrome extension that uses the Free Dictionary API to retrieve word definitions. It's composed of two files: popup.html and scripts.js.

Once you activate the extension, a popup window with a search bar and a search button will appear. To use the extension, simply type in the word you want to search for, and hit the search button or press the enter key. Our extension will then retrieve the definition of the word from the Free Dictionary API and display it in the popup window.

Implementation

Implementing the dictionary extension is a breeze! Just follow these easy steps:

First, you'll need to set up a new folder on your local machine for the extension.
Inside the folder, create two new files: popup.html and scripts.js.
Copy and paste the following code into popup.html:

<!DOCTYPE html>
<html style="width:300px">
  <head>
    <meta charset="UTF-8">
    <title>Dictionary Search</title>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container mt-4">
      <h2 class="mb-4">Dictionary Search</h2>
      <div class="form-group">
        <label for="search-input">Search for a word:</label>
        <div class="input-group">
          <input id="search-input" type="text" class="form-control">
          <div class="input-group-append">
            <button id="search-btn" class="btn btn-primary">Search</button>
          </div>
        </div>
      </div>
      <div id="results"></div>
    </div>
    <!-- Add Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

This code creates an HTML form that includes a search bar and a search button, with Bootstrap CSS classes that give the form a modern and stylish look.

Next, add the following code to scripts.js:

const searchBtn = document.getElementById("search-btn");
const searchInput = document.getElementById("search-input");
const resultsDiv = document.getElementById("results");

// Define the API URL with the endpoint and the search term as a query parameter
const apiUrl = "https://api.dictionaryapi.dev/api/v2/entries/en/";

// Add an event listener to the search button
searchBtn.addEventListener("click", () => {
  // Get the search term from the input field
  const searchTerm = searchInput.value.trim().toLowerCase();

  // Call the API with the search term
  fetch(apiUrl + searchTerm)
    .then(response => response.json())
    .then(data => {
      // Display each meaning on the page
      resultsDiv.innerHTML = "";
      data.forEach(entry => {
        const word = entry.word;
        const meanings = entry.meanings;
        const html = `
          <h2>${word}</h2>
          ${meanings.map(meaning => `
            <div class="card mb-4">
              <div class="card-header">${meaning.partOfSpeech}</div>
              <div class="card-body">
                <p><strong>Definition:</strong> ${meaning.definitions[0].definition}</p>
                ${meaning.definitions[0].example ? `<p><strong>Example:</strong> ${meaning.definitions[0].example}</p>` : ""}
              </div>
            </div>
          `).join("")}
        `;
        resultsDiv.innerHTML += html;
      });
    })
    .catch(error => {
      // Display an error message if the API call fails
      resultsDiv.innerHTML = `<p>Error: ${error.message}</p>`;
    });
});


// Add an event listener for when the enter key is pressed
searchInput.addEventListener("keypress", (event) => {
    if (event.keyCode === 13) {
      // Get the search term from the input field
  const searchTerm = searchInput.value.trim().toLowerCase();

  // Call the API with the search term
  fetch(apiUrl + searchTerm)
    .then(response => response.json())
    .then(data => {
      // Display each meaning on the page
      resultsDiv.innerHTML = "";
      data.forEach(entry => {
        const word = entry.word;
        const meanings = entry.meanings;
        const html = `
          <h2>${word}</h2>
          ${meanings.map(meaning => `
            <div class="card mb-4">
              <div class="card-header">${meaning.partOfSpeech}</div>
              <div class="card-body">
                <p><strong>Definition:</strong> ${meaning.definitions[0].definition}</p>
                ${meaning.definitions[0].example ? `<p><strong>Example:</strong> ${meaning.definitions[0].example}</p>` : ""}
              </div>
            </div>
          `).join("")}
        `;
        resultsDiv.innerHTML += html;
      });
    })
    .catch(error => {
      // Display an error message if the API call fails
      resultsDiv.innerHTML = `<p>Error: ${error.message}</p>`;
    });
    }
  });

This code adds the search functionality to the extension. It listens for both the click event (or press on enter key) on the search button and the keypress event on the search bar, retrieves the word definition from the API, and displays it in the popup window.

Finally, create a manifest.json file in the extension folder with the following code:

{
    "manifest_version": 3,
    "name": "Dictionary",
    "description": "Look up the meanings of words right from your device!",
    "version": "1.0",
    "action": {
        "default_popup": "popup.html",
        "default_title": "Dictionary"
      }

  }

This file provides important information about the extension, including its name, version, and permissions.

Result:

And that's all there is to it! With these simple steps, you can give your browsing experience a little extra pizzazz and start looking up the meanings of words without ever leaving your current tab.

You can access to the source code on GitHub by clicking here. You can also find how to install it to your browser! Don't hesitate to play with it and customize!

Code Your Future

Code Your Future

Let's Build A Dictionary Extension Together!

Table of contents

How it Works

Implementation

Result: