DEV Community

Cover image for Creating Chrome extension in under five minutes
Tarek Hassan
Tarek Hassan

Posted on

Creating Chrome extension in under five minutes

Developing an extension for chrome is very easy and doable with just HTML, CSS and JavaScript.

What are we building

We are building simple extension that reads an API from Breaking Bad quotes and shows it, that is it.

Step 1

We need to create few files to have a chrome extension index.html, manifest.json ,script.js and a png file for your icon. You can add style.css file and link it but I am keeping this as simple as possible.

Step 2 - working with manifest.json

This is a JSON file that contains data about your extension.
Most of its attributes are self explanatory. Here is a full example of our extension manifest.json

{
  "manifest_version": 2,
  "name": "Breaking bad",
  "description": "The breaking bad quote extension",
  "version": "1.0",
  "browser_action": {
    "default_icon": "bb.png",
    "default_popup": "index.html"
  }
}

Please note that manifest_version, name and version are required.
Most important part here is browser_action. This is where you tell chrome where to find file to open and icon to have in chrome.

Step 3 - Markup

This markup is going to to have a header and a section to have our quote after API calling is done

<!DOCTYPE html>
<html>
  <head>
    <title>Breaking bad</title>
  </head>
  <body>
    <main style="text-align: center;" class="pt-20">
      <h1 class="text-center text-4xl font-bold leading-10 tracking-wide">
        Breaking bad quotes
      </h1>
      <section id="quote-section"></section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

Step 4 - The JS part

In our index.html we have imported script.js file. This file is going to call https://breaking-bad-quotes.herokuapp.com/v1/quotes and get a random Breaking Bad quote.

Here is the script for our extension

var quoteSection = document.getElementById('quote-section');

fetch('https://breaking-bad-quotes.herokuapp.com/v1/quotes')
  .then((res) => res.json())
  .then((res) => {
    console.log(res);
    quoteSection.innerHTML = '<div>' + res[0].quote + '</div>' + '<h4>' + res[0].author + '</h4>';
  });

Step 5 - Uploading extension

This is s simple drag and drop step. But before make sure you have enabled developer mode in your browser. Then head to chrome://extensions/ and drag the folder where all files in and drop inside extensions tab.

That is it. The full code is found in this repo.

Discussion (0)