Introduction

I recently learned about making extensions on google chrome and publishing them. So in this blog, I will be describing the exact process of building chrome extensions from scratch and then deploying them to Chrome Web Store. This blog is a complete guide to build EditShot (Extension Made By Me). Source Code is Available Here.

Outline

1. Setting Up The Environment.
2. Building Logic.
3. Building Manifest File.
4. Building UI.
5. Building Background File.
6. Building Foreground File.
7. Deploying to Chrome Store.

Important Declaration

First of all, let's be very clear with the convention. Background scripts means all the scripts which run in context with Extension’s javascript console. DOM to be more specific. And Foreground Scripts imply that they run under the website's DOM.

Also, Note that this blog explains all the files but to get a complete overview of the file structure, head over to github repo. Also, star it. ;)

1. Setting Up The Environment.

Thanks to Google Chrome and super smart guys behind google chrome extensions, setting up the environment is just a few clicks.

First, Create a new Folder. Open it, and create a Manifest File (file named `manifest.json`). Paste following JSON file. Very easy to understand. We will discuss it in the 3rd Step. :)

Now, head over to chrome://extensions in your Chrome Browser, turn on Developer mode toggle in the right most corner. Click on `Load Unpacked` and then select the folder which you made earlier. Done! You have successfully imported your extension and it is now ready to use.

2. Building Logic

This is the main logic we will be implementing. So go through it so that you don't face any problems in understanding code.

1. Once you hit "Make Screen Editable", it grabs all the elements in the DOM and sets their contenteditable property yo true.
2. Then, it iterates over all the links and deletes their href property. Thus, saving users from getting redirected while editing. 😉
3. Lastly, when the user hits the Take Screenshot button, it uses html2canvas library to generate an image. It is in memory currently.
4. Then, it creates an "in-memory" “a” tag, appends the data to the URL by doing some conversions and hits that “a” tag.
5. Ofcourse everything is done behind the scenes and quickly. So this doesn't hamper the experience. 😄

3. Building Manifest File

Manifest file is the heart of your Chrome Extension. It is a place where you manage versions, manage dependencies, manage permissions, trigger scripts and so on. You can read full documentation here.

We will take a look at the field which we will be using.

Here is the exact manifest file we will be adding.

Now let's go through each field one by one. (leaving the obvious ones)

1. brower_action: This field specifies all the interactions which will be done on the right corner tab. This includes PopUP. Here, we give a path to the popup file which we want to open whenever someone clicks on the extension icon.
2. content_scripts: This field has two child arrays. One specifies a set of Regexes and Other, a set of Js files which run when the URL of the site matches any of the Regex in Array.

4. Building User Interface (UI)

User interface is nothing but an attached HTML file which is displayed in a box whenever someone clicks your extension.

In our case, we have used a simple bootstrap file with basic components. Take a look here.

5. Building Background File

First of all, notice the problem here. Both foreground and background scripts are running on different consoles. Thus, communication between them is not directly possible. So, to make communication happen, we need to find the tab where that script is running, and then, send a MESSAGE there. Then, at the foreground there is a function that reads messages and makes appropriate function calls.

In the above example, first, we search for active tab, then, send a message to tab.

That's it! This is the driver for our background file.

Click here to view the complete file. 

We have two actions in our background file. One makes the screen editable. Another one captures a screenshot. But both those tasks must have access to the DOM of the website. Also, we cannot simply run the script since it will cause problems (All contents will become editable as soon as the page is loaded and screenshot will be taken XD).

So we send two types of messages. When the user clicks “Make screen editable”, we send the message “MAKE_ALL_EDITABLE”. When the user clicks “Take a Screenshot”, we send “CAPTURE_SCREEN”.

6. Building Foreground File

The only job of this file is to receive messages and trigger appropriate functions. In order to keep this blog short, logic is not discussed here. View file by clicking here. Logic is mentioned in Step 2 and Code is readable.

Using the above function, we call appropriate functions which then, lead to intended changes.

7. Deploying to Chrome Store.

This is a very easy process. However, it takes time to get your extension verified. Specifically in our case, since we are asking to run script in the background of every page, which is a serious permission.

Remember, you have to pay 5$ one time registration fee. You can publish upto 20 extensions from one account.

To publish your item to the Chrome Web Store, follow these steps:

1. Create your item’s zip file
2. Create a developer account from here.
3. Upload your item
4. Add assets for your listing
5. Submit your item for publishing

So that was it!

You can connect with me on LinkedIN, follow me on Github and Twitter.