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.
Top comments (0)