How to create a Chrome extension

Cover photo by Mediamodifier on Unsplash

Creating a Chrome extension can sometimes change your life (it happened to me).

Sometimes even simple steps, but to be repeated often, can lead to unnerving. Making an extension could make the difference by facilitating the operations or even automating them (as in my case).

That's why I want to show you the steps to start creating and testing your first extension for Google Chrome. Once created, integrating new features or introducing improvements will be as easy as developing for a web application.

Let's go

Structure of an extension

I want to show you right away which files make up the basic structure of a Chrome extension (you can find the example here ):

Let's see in detail the role of each individual file:

1. hello_extensions.png : this is the image that represents the extension icon (further on you will find a complete description of the formats of the different icons that can be used for your extension).
2. hello.html : in this file the rendering of the extension is built (a bit like the index.html of any simple site)
3. manifest.json : This JSON is used to define the extension properties such as permissions (e.g. whether to access the clipboard), icons, what is the extension's html file (point 2) and other information related to the extension (such as name, version and description). Consider manifest.json as the most important file of your extension.
4. popup.js : actually this file is not essential for a basic extension without business logic but I want to show it to you for completeness since a program, whether it is an extension (as in this case) or a real application, has no reason to exist without business logic 😊.

By business logic I mean the code that will perform the tasks you are creating your extension to do (such as opening tabs, reading/writing clipboard content, and so on).

Contents of the individual files that make up an extension

hello.html

As anticipated, the hello.html file is the classic html that we are used to seeing. Our extension will therefore have a h1 title with the words “Hello Extensions” and will load the js file “popup.js”.

popup.js

In this file we can insert our scripts for the operations of our extension (business logic). For this simple extension we will simply write the message “This is a popup!” in the console.

manifest.json

The manifest.json file is the most important! It contains the configurations and information of our extension.

The manifest.json is the heart of a Chrome extension, you can define:

• Your extension name and description
• version
• action — to define the appearance and behavior of the extension icon (for more information chrome.action )
• command — to define keyboard shortcuts within the extension (for more information chrome.commands )
• omnibox — allows the extension to record a keyword in the Chrome address bar (for more information Omnibox )
• permission — enables the use of particular APIs such as reading/writing the clipboard (for more information see Permissions )

…and much more you can find here Manifest file format .

Returning to our example, the extension will be called “Hello Extensions” and when opened it will load the file “hello.html”. Its default icon will be “hello_extensions.png”.

hello_extensions.png

Let's now take a detailed look at the icons of an extension.

Chrome has several sections where it will display your extension and for each of them the icon format is different. If you want your extension to always display the correct icon (and not the default Chrome one), you will need to add 4 images of your icon of different sizes:

1. - icon size 16x16 px
2. - icon size 32x32 px
3. - icon size 48x48 px
4. - icon size 128x128 px

In the references you will find a site that creates all the icons for your extension in one go starting from the original image.

Once created, the images will need to be indicated in the manifest.json through the “ icons ” property. The manifest will then become ( NB : the “default_icon” property has also changed):

{ 
  "name" :  "Hello Extensions" , 
  "description" :  "Base Level Extension" , 
  "version" :  "1.0" , 
  "manifest_version" :  3 , 
  "icons" :  { 
      "16" :  "hello_extensions16.png" , 
      " 32" :  "hello_extensions32.png" , 
      "48" :  "hello_extensions48.png" , 
      "128" :  "hello_extensions128.png" 

  } , 
  "action" :  { 
    "default_popup" :  "hello.html" , 
    "default_icon" :  " hello_extensions16.png" 
  } 
}

And the final structure of our extension will be:

Installing an extension

Let's now move on to installing the extension in Chrome to start doing some tests and verify the result of our work.

To install an extension (without necessarily publishing it on the Google store) we can use the “ Developer mode ” available in Chrome.

Open Chrome and enter chrome://extensions/ in the address bar. At the top right you can enable developer mode:

Now you can load the extension by clicking on “ Load unpacked ” and selecting the hello_extension folder (which contains the files seen previously):

Here is finally our extension (with the right icons 😉)! 🎉🎊🥳

Wait a minute, something's missing…

Where did our console.log that we put in the “popup.js” file go?

To view the Console (and consequently the Chrome developer toolbar) just right click on the extension and choose “Inspect”:

Follow me #techelopment

Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment

References

• Extensions / Get started | Chrome for Developers
• Hello World extension | Chrome Extensions | Chrome for Developers
• An overview of the manifest.json properties of a Chrome Extension.
• Chrome Extension Icon Generator