Create Your First Chrome Extension in No Time - A Step-by-Step Base64 Encoder & Decoder Tutorial

Prerequisite

Today, we will dive into the world of Chrome Extensions. For this journey, you'll need some knowledge of HTML, CSS, and JavaScript.

Let's roll up our sleeves and delve into a simple, yet immensely useful project: a Chrome Extension to encode and decode base64 strings.

Step 1: Setting Up the Project

First, let's set up our project folder. Call it “base64-extension”. Within this folder, we need three files:

manifest.json: This is the heart of the extension. It tells Chrome everything it needs to know about your extension.
popup.html: This is the HTML document that will be displayed when you click on the extension icon in the Chrome menu.
popup.js: Our JavaScript file where the magic happens!
styles.css: For styling your extension.

Go ahead, create these files in your project directory.

Step 2: Creating Our Manifest

Next, we're going to fill out our manifest.json file. This is how Chrome knows what to do with our extension. Here's what you'll need:

json

1{  
2  "manifest_version": 3,  
3  "name": "Base64 Converter",  
4  "version": "1.0",  
5  "action": {  
6    "default_popup": "popup.html",  
7    "default_icon": {  
8      "16": "images/icon16.png",  
9      "48": "images/icon48.png",  
10      "128": "images/icon128.png"  
11    }  
12  }  
13}

Note: You'll need to provide your own icons, or feel free to use a placeholder.

Step 3: Crafting the UI

Let's design our popup window. It'll be simple: two textareas (one for input, one for output), two buttons (to encode and decode), and some catchy styling.

Below is the content for popup.html:

html

1<!DOCTYPE html>  
2<html>  
3  <head>  
4    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">  
5    <link rel="stylesheet" type="text/css" href="styles.css">  
6  </head>  
7  <body>  
8    <h1>Base64 Converter</h1>  
9    <textarea id="input"></textarea>  
10    <div id="flexButton">  
11        <button id="encodeButton">Encode</button>  
12        <button id="decodeButton">Decode</button>  
13    </div>  
14    <textarea id="output"></textarea>  
15    <script src="popup.js"></script>  
16  </body>  
17</html>

And the content for styles.css:

css

1body {  
2  font-family: 'Open Sans', sans-serif;  
3  padding: 15px;  
4  background-color: #f5f5f5;  
5  width: 500px;  
6}  
7  
8h1 {  
9  color: #3c4f76;  
10}  
11  
12textarea {  
13  width: 90%;  
14  height: 120px;  
15  margin: 10px 0;  
16  padding: 10px;  
17  font-size: 16px;  
18  border-radius: 5px;  
19  border: 1px solid #ddd;  
20  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);  
21}  
22  
23button {  
24  margin-right: 10px;  
25  padding: 10px 20px;  
26  border: none;  
27  border-radius: 5px;  
28  background-color: #3c4f76;  
29  color: #ffffff;  
30  font-size: 16px;  
31  cursor: pointer;  
32  transition: background-color 0.3s ease;  
33}  
34  
35button:hover {  
36  background-color: #5a6f9c;  
37}  
38  
39#flexButton {  
40    display: flex;  
41    justify-content: start;  
42}

This looks quite neat, but feel free to add your personal touch to it!

Step 4: The Magical JavaScript

Here comes the fun part: writing our JavaScript logic! We'll handle button clicks, grab the input, process it, and display the output. Pretty straightforward!

In popup.js:

javascript

1document.getElementById("encodeButton").addEventListener("click", function () {  
2  let input = document.getElementById("input").value;  
3  let output = btoa(input);  
4  document.getElementById("output").value = output;  
5});  
6  
7document.getElementById("decodeButton").addEventListener("click", function () {  
8  let input = document.getElementById("input").value;  
9  let output = atob(input);  
10  document.getElementById("output").value = output;  
11});

Step 5: Load and Test the Extension

Time to put our extension to the test! Open Chrome and navigate to chrome://extensions. Turn on Developer Mode (top right corner). Click Load Unpacked and select your project directory. Voila! Your extension is now in the browser!

Click on the new icon in your Chrome menu bar, paste a string, hit ‘Encode', then ‘Decode', and see if it returns the original string. If so, congratulations!

Chrome Extension

Step 6: Publishing Your Extension to the Chrome Web Store

Once you're satisfied with your extension, you might want to share it with the world. This step is for you! Google provides a simple process to submit your extensions to the Chrome Web Store.

Package your extension: Create a .zip file of your project folder. The manifest.json file should be at the top level of this .zip file.
Create a Developer Account: Visit the Chrome Web Store Developer Dashboard and sign in with your Google account. If you haven't already, you'll need to register as a developer. There's a one-time developer registration fee of $5.
Upload your extension: In the Developer Dashboard, click “New Item”, then “Upload” to upload your .zip file. Fill out the form with details about your extension. Make sure to use clear, concise language to describe its functionality.
Add Images and Screenshots: Upload an icon for your extension (at least 128x128 pixels), as well as a few screenshots showcasing its features. This helps potential users understand what your extension does and how it looks before they download it.
Pay the Developer Signup Fee: If you haven't already, you'll be prompted to pay the developer registration fee.
Publish your extension: Once you've completed all the above steps and are satisfied with your listing, click “Publish Changes”. Google will review your extension, and if it meets all their guidelines, it will be available in the Chrome Web Store for others to download and use!

For more information, you can refer to the following resources:

Chrome Extension Developer's Guide: The official Google Chrome Extensions documentation. This is your go-to guide for everything related to Chrome extensions.
Base64 Encoding and Decoding: A detailed explanation of Base64 from MDN web docs. It provides good context to understand why and how Base64 is used.
Publishing Extensions: Google's guide to publishing your own extension. This guide walks you through the entire publishing process step by step.