Chrome Web Extension - No Prior Coding Experience Needed

Chrome Extensions are small programs built to enhance a users browsing experience. For more info on chrome extensions go to https://developer.chrome.com/extensions.

To make a Chrome Web Extension, coding is required, so it is very useful to review HTML, JavaScript, and CSS at the below website:

https://www.w3schools.com/default.asp (w3 schools is a good website for coding resources)

Don't know how to code? Don't worry, this tutorial will help guide the way.

The best thing about Chrome Extensions is that they can be customized. It's not just one specific thing that can be done, so be creative.

Supplies

The supplies that are needed are below:

A computer with a text editor (I am using Notepad)
Google Chrome

And that's all!

Create the Directory

First, create a folder to hold all the files, and name it 'extension'. The name can be changed later if desired.

Create the Manifest File and Code It

The manifest file is a very important part of the extension. It tells the extension exactly what to do and be. Manifest files are formatted in JSON. The first step is to open a text editor and save a new file as 'manifest.json'.

Next type the below script:

{
"name": "First Extension",
"version": "1.0",
"description": "I can code an extension",
"manifest_version": 2,
"browser_action": {
	"default_title": "First Extension"
	}
}

Remember the commas after the values!

After this is typed, save the manifest file and go to chrome://extensions (Chrome should be used as the browser for this). Once at chrome://extensions, turn developer mode on. After that, press the button 'Load unpacked' and select the 'extension' folder.

drum roll please...

Yay! That is an extension, except... its kind of boring. It does literally nothing as of right now, but soon it will be super cool.

Create the Icons and Update the Manifest

One website that works well for drawing icons is https://www.piskelapp.com/. There are other drawing programs available for use, also. The icons should be square. This project will be using 16x16, 32x32, 48x48, and 128x128 icons. Once the icon is made, make a folder called 'images' in the extension folder and put the icon in that folder. It might be a good idea to name an image according to its size. For example, 'icon32.png'. The new code is below:

{
"name": "First Extension",
"version": "1.0",
"description": "I can code an extension",
"manifest_version": 2,
"browser_action": {
	"default_title": "First Extension",
	"default_icon": {
		"16": "images/icon16.png",
		"32": "images/icon32.png",
		"48": "images/icon48.png",
		"128": "images/icon128.png"
		}
	}
}

For reference on the manifest code, go to https://developer.chrome.com/extensions/manifest.

Add a Popup

This extension will have a popup. The popup is an HTML(Hypertext Markup Language) file, so it is good to learn the basics of HTML, CSS, and JavaScript first.

First, save a document as 'popup.html' file in the extension folder.

Next, edit the manifest file to show 'popup.html' when it is clicked. The new code is below:

{
"name": "First Extension",
"version": "1.0",
"description": "I can code an extension",
"manifest_version": 2,
"browser_action": {
	"default_title": "First Extension",
	"default_icon": {
		"16": "images/icon16.png",
		"32": "images/icon32.png",
		"48": "images/icon48.png",
		"128": "images/icon128.png"
		},
	"default_popup": "popup.html"
	}
}

Don't forget the comma!

Now, if the following HTML code is added into popup.html, then it will show 'Hello World' when clicked.

<h1>Hello World</h1>

Make It Look Good and Make It Interactive.

If a basic HTML line is typed, then it gets the bare minimum done. If CSS (Cascading Style Sheets) is added, then it will look cooler, and if JavaScript is added, then it can be more interactive. This tutorial will not go into detail explaining HTML, JavaScript, and CSS, but there are plenty of resources online. Below is the code for the simple 'Hello World' program, then the more colorful program, respectively:

<!DOCTYPE html>
<html>
<h1 id = "hello" >Hello World</h1>
</html>

<!DOCTYPE html>
<html>
<h1 id = "hello" >Hello World</h1>
<style>
#hello{
    background-color: #000000;
    color: #ff0000;
    border: 8px outset  #86a3b2;
    border-radius: 50px;
    transform: rotate(57deg);
    padding: 10px;
    user-select: none;
    cursor: crosshair;
    transition: transform 2s;
}
#hello:hover {
    transform: rotate(-417deg);
}
</style>
</html>

This second example could be very confusing, for a beginner. But, this was to show you how important CSS is to a program/extension. Now would be a good time to take a break and learn some HTML5 coding and use developer.chrome.com for some reference. It may take some time, but a great extension can be made.

Publishing It to the Chrome Web Store

If somebody has made a really great extension and they want to share it with the world, then they can publish it. That is, after all, the point of an extension. This tutorial only tried to explain the manifest file, and how you can use it, and it just had a 'Hello World' program.

The first thing to do to make an extension public is make the extension folder into a zip file. The second thing to do is go to https://chrome.google.com/webstore/category/extensions and log in to a google account. Then, click on the settings gear button and then click on 'developer dashboard'. Press the 'New Item' button to upload the zip file. Once there, it is necessary to edit the Store Listing, Privacy, and Pricing. An extension can be published easily if it is submitted for review.

Now that the extension is finished, continue to code!