How to create a simple Chrome extension — with code examples

3 min readMay 11, 2022

Introduction

I wrote about “how I created a Chrome extension in just one day “ — now I will show you the technical details and the coding parts. The extension that I created had get, post(upload), and del functions. I created these functions with just a few lines of JS code so don’t worry. One good part of developing on Chrome is the storage — you don’t need to use a database for mini functions. Chrome has its local storage package(chrome.storage)

My first App:

Actually, my first extension was not for beginners (I started with a hard one). The flow of the extension was like.

Open and activate the extension
Click on the sign — the pop-up will appear on to screen
Type the word you don’t know inside the input box
Type the meaning
Save(You can also save words by just highlighting them on web pages with ContextMenus)
If you want — edit or delete
That’s all

example image

Why I did show you my first extension and why it’s important. It’s important to make you know how big projects you can create in just a few weeks.

In the coming parts, we will cover the manifest.json, pop-up HTML file, and Chrome packages. So let’s start

What is Manifest.json

A manifest.json file is required for any Chrome extension. The manifest.json file contains information that defines the extension. The format of the information in the file is JSON.

{"manifest_version": 3,"name":"App","version":"1.0.0","description":"Nothing","icons":{"128":"./icons/logo_128.png","32":"./icons/logo_32.png","16":"./icons/logo_16.png"},"action":{"default_icon":"./icons/logo_16.png","default_popup":"./popup.html"},"permissions": ["contextMenus",]}

What is Pop-up HTML

It is a basic HTML file that is connected with manifest.json. The pop-up HTML file appears when you click on the app icon

<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1><p>My first paragraph.</p></body>
</html>

Hahaha, that’s all!😎

What is chrome.storage

Description:

Use the chrome.storage API to store, retrieve, and track changes to user data.

set with .sync:

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

or local:

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

get with .sync:

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

or local:

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

What is chrome.contextMenus

Description:

Use the chrome.contextMenus API to add items to Google Chrome's context menu. You can choose what types of objects your context menu additions apply to, such as images, hyperlinks, and pages.

chrome.contextMenus.create(
 createProperties: object,
 callback?: function,
)

How to Start

Create this folder structure on your editor and put the codes up inside the files. For icons look at the documentation it’s necessary to create the structure of the icon.

For errors and more visit https://developer.chrome.com/docs/extensions/mv3/getstarted/

Closing

That was all don’t forget to follow me on LinkedIn and Medium!