Hello amazing folks 👋

You must have used chrome extensions in your life. Have you ever wondered how people make them and how they work?

I'm going to teach you how you can make chrome extensions. In this tutorial we will be making a chrome extension which speaks the selected text. We will name it "Speak It".

We will be learning:

• What are chrome extensions and how do they work.
• How to make chrome extensions.
• How to deploy chrome extensions on chrome web store.

Loosen up your seatbelt cause it's going to be an easy tutorial even if you've never built any extension in your life. So let's get started.

Introduction

Chrome extensions are basically small programs that add functionality to the chrome browser. And you can even modify the appearance of any webpage on the with the help of chrome extensions. So prerequisites for creating a chrome extension are just the basics of HTML, CSS and JavaScript. We can use Javascript libraries like JQuery too. But we won't use it in this tutorial.

Before we start with creating our extension, we need to have an understanding how chrome extensions work.

We are going to write our Manifest, Html, Css and Javascript file. And this is then packaged into a '.crx' zipped file. Using this zipped file we will deploy our chrome extension to the chrome web store, from where the user can install our chrome extension.

Now there are three types of chrome extensions that you can build.

• Browser Action Extension As the name suggests, it is going to stay in the browser's toolbar. And it is accessible at all the time. We will be build this type of extension in this tutorial.

• Page Action Extension This type of extension works only on certain page which of course is decided by the developer. As it will only work on certain website, it will be disabled all the other time.

• Neigh BA or PA Extension These extensions runs in the background. They're neither browser action nor page action.

Our browser action extension contains manifest, css, html and javascript. We need to learn each of them in details, starting with manifest.

1.) Manifest

First step to creating a chrome extension is to write the manifest file. The manifest is a JSON formated file. It contains all information about the extension. And at the bare minimum the manifest must contain:

• Manifest Version
• Name of the Ext.
• Version of the Ext.

So, let's start of with that.

First, Create an empty folder naming "SpeakIt" in your desktop and open it in any code editor that you prefer. Now within the "SpeakIt" folder create a file and name it "manifest.json". And within this file we will need to mention some important information about our extension. As shown below.

    "manifest_version": 2,
    "name": "SpeakIt",
    "version": "1.0",
    "description": "Speak the selected text",
    "icons": {
        "128": "icon128.png",
        "48": "icon48.png",
        "16": "icon16.png"
    },

Manifest version should be new updated version. The current version is 2 and unless goggle updates it, don't try to change it. And "version" mentioned above is our extension version. You can change it to your own.

We have also added three icon images in separate folder and mentioned them in manifest. Because chrome extension shows three different size of icons to the user. You can choose whatever you like.

This extension is neither a browser action nor page action so we are not going to specify either of them. But we do need and event page.

   "background" : {
        "scripts": ["eventPage.js"],
        "persistent": false
    },

As above mentioned code. Our extension's script will run from "eventPage.js" file in the background. And we will set persistence to false because it is an even page.

And finally we need to request some permissions.

    "permissions": [
        "tts",
        "contextMenus"
    ]

We're going to be making use of chrome api. If you dont know about chrome api's learn more here. First we will request permission for "tts" which is 'text to speak'. It is an chrome api. And the next is for context menus(it appears when we right click on the site).

Now our manifest is completed. It will look like following screenshot:

2.) Event page

First thing we need is to have our extension in the context menu. We are going to start with our menu item.

var menuItem = {
    "id": "speak",
    "title": "Speak",
    "contexts": ["selection"]
};

It will have an id and a tittle which will appear in the website when you open context menu by right clicking. And it will have "contexts", which is basically 'when we want our menu item to appear'. And in our extension we want menu item to appear when we select some text.

Now that we have our menu item we can now use chrome api to create our menu item.

chrome.contextMenus.create(menuItem);

Next, we are going to listen to an event when user clicks on our menu item in context menu.

chrome.contextMenus.onClicked.addListener(function(clickData){
    if (clickData.menuItemId == "speak" && clickData.selectionText){
        chrome.tts.speak(clickData.selectionText, {'rate': 0.7});    
    }
});

After listening to click event will read selected text, if there's any. Then it will speak selected text to user using chrome 'tts' api. We can also specify options. And we are going to specify 'rate' at which it will speak. i felt that 1 was relatively fast, so we will set '0.7'.

#3.) Loading in Extension in Browser

Now that are extension is ready. We are going to load it in our chrome browser. To do that, open this URL and turn on developer mode. Then click on 'Load unpacked extenions' and selected your extension folder from desktop.

And Voila! now you have your extension "Speak It" in the browser.

To try how does that work, you can try to select any text and right click to open context menu and then select 'Speak'. It should speak your selected text. It is so cool. isn't it?

Thanks for reading 😃

If you want to take a look at the code you can check my github here .

I would ❤ to connect with you at Twitter | LinkedIn | GitHub

Share your queries in the comments section.