Hi Everyone,

Welcome to the first post of the building a Chrome extension MVP series.

It has been more than 6 months since I created a minimum viable product as part of my learning process. The last time, I built a website with Flask and jQuery and it took me two months of working nights and weekends to ship it.

Now is the time to learn new technology, platform, or programming language. Inspired by the Keyword Everywhere Chrome extension plugin, I decided to create something similar for my use.

The pros of building a Chrome extension

There are many reasons, why building a minimum viable product in the form of a Chrome extension is an attractive option for the average full-stack indie makers.

Building a Chrome extension should not be that hard. It is based on vanilla javascript so you don't learn any new language.
Chrome is by far the most used web browser in the world. So building something on the platform with the biggest market share gives you a better chance to succeed.
The setup of a development environment is not that complicated as it is with React apps.

The cons of building a Chrome extension

Because of the low entry barrier, no one ever got rich with a Chrome extension. So in most cases, Chrome extensions are just an extension of a regular web-based product. The cons are then obvious.

A highly saturated market flooded with Chrome extensions solving every problem you can imagine.
Maybe 99% of the Chrome extensions are free of charge and are open-source. So most Chrome extension developers rely on donations and freelancing gigs.
You have to pay 5 USD to Google for a developer license.

Chrome extension development setup

Since I explained my motives behind this challenge, let's get into it.

The first step in every programming endeavor would be to build something stupid simple. Just to learn the ropes and to clear up every issue during the initial project development setup.

So, let's create a dummy prototype, that displays pop up with an image after clicking on the extension icon. The icon you see next to the Chrome menu.

create a folder with an extension name e.g. dummy_chrome_ext

create a manifest.json file in the folder

In the manifest file, fill it with the Chrome extension configuration below.

{
    "manifest_version": 1,
    "name" : "Dummy",
    "description" : "My clickable extension",
    "version" : "1.0",
    "author" : "Viet Phan",
    "browser_action" : {
        "default_icon" : "icon.png",
        "default_popup" : "popup.html",
        "default_title" : "My clickable extension"
    },
    "permissions" : [
        "activetab"
    ]
}

This manifest file will put an extension icon in the user’s toolbar that, when clicked, loads the contents of the file named “popup.html.”, which we will create in the next moment.

The browser action part of the code will load the icon and display it in the toolbar. And it also responds to the user, clicking on the icon, by displaying a popup.

Permissions limit the extension’s functional region. "activeTab" is the most common choice, allowing the extension to access the currently active Chrome tab.

Before going further I should explain, that the purpose of the icon is to show the user a menu, popup, tooltip, or a badge. It is a backend user interface for your Chrome extension.

Create popup HTML

Now create a popup.html.

<!DOCTYPE html>
    <html>
    <head>
        <title>
            Click It
        </title>
    </head>    
    <style tpye="text/css">
        body {    
            margin: 5px;
        }
        h1 {
            font-size: 15px;
            text-align: center;
        }
    </style>
    <body>
        <h1>
            Clicked
        </h1>
    </body>
</html>

Now I can load extension to Chrome.

First, I have to go to chrome://extensions in the browser. Then I have to make sure that the Developer mode checkbox in the top right-hand corner is checked.

Finally, click Load unpacked to show a dialog with a file-selection popup. Select the directory with Chrome extensions and let's see what happens.

But all I got is an Error.

Manifest Error

Seems the manifest version is wrong so change the manifest variable to 2. The manifest version tells Chrome what version of the manifest markup I am working with. For modern Chrome extensions, the value is 2. Don't ask me why.

Now try to load extension again.

Ok, the icon does not exist yet, so let's create the icon.png file and try to load the Chrome extension again.

Cool, it works. Now try to click on the icon and wait for the magic.

Wonderful. A Chrome extension window was displayed with an H1 element telling us we clicked on that icon.

Add javascript to show real popup

As a next, add some logic to show a real popup. So open the “popup.html” file and do a few modifications like so.

<body>
    <h1>
        Click it
    </h1>
    <button id="clickIt">
        Click
    </button>
</body>
<script src="popup.js"></script>

What I am trying to do is to implement a logic, that should execute something after the user clicks on the "Click" button. To do that, add an event listener to listen for the click events on the "Click" button.

Create a popup.js file and add the following code:

document.addEventListener("DOMContentLoaded", function() {
    var checkPageButton = document.getElementById('clickIt');
    checkPageButton.addEventListener("click", function() {
        chrome.tabs.getSelected(null, function(tab) {
            alert("Helo world");
        });
    }, false);
}, false);

Now test it out. But nothing happens.

Try to open a new tab and click on the icon again. Still nothing, but now I notice a new error message.

I made a typo, so fix that to activeTab and try to load extension again. It still doesn't work, but at least I get a new error message about the unexpected identifier.

Unexpected

After some googling, it turns out the chrome.tabs.getSelected() method is now deprecated. I have to change the manifest permission configuration to...

"permissions": [ ...
   "tabs"
]

And change the JS function to reflect the new method.

chrome.tabs.query(null, function(tab) {
    alert("Helo world");
});

No luck either. The same error appears.

Google some more and try to edit the javascript script tag with a type variable.

type=“module”

Great. Now it works.

Success

Today, I successfully created my first Chrome extension. Although it does nothing except showing a simple popup, it is a great achievement.

I am excited about what comes next in this journey. Thanks for reading and see you in the next post.

Building Chrome Extension Day 1 - Show a Popup

The pros of building a Chrome extension

The cons of building a Chrome extension

Chrome extension development setup

Create popup HTML

Add javascript to show real popup