DEV Community

loading...

Create a Google Chrome Extension in 15 minutes.

fumblehool profile image Damanpreet Singh ・2 min read

In this blog, I'm going to build a simple Chrome Extension that gives user a healthy habit whenever he clicks on the "Get a Healthy Habit!!" button.

The source code is available here

Initial Set Up

A chrome extension required following files -

  • icon.png - this is the icon displayed to user.
  • manifest.json - This file contains properties like extensions' name, extension's version, author's name, and most importantly what permissions the extension requires.

Setting up manifest.json

Our extension does not require any special permission. So our manifest.json will look  this-

{
  "manifest_version": 2,

  "name": "Healthy Habits Plugin",
  "description": "This extension will give show Healthy habits.",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab"
   ]
}
Enter fullscreen mode Exit fullscreen mode

Points to note -

  • name - name 0f extension
  • description - description of what this extension does.
  • version - extension's version
  • browser_action - here we specify browser actions.
  • default_icon - this is the default icon of extension.
  • default_popup - this is the html that will appear if user clicks on extension icon.
  • permissions - we only need activeTab permission

Read more about manifest.json Here

popup.html

Our popup.html will look something like this -

<!doctype html>
<html>
  <head>
    <title>HealthyHabits</title>
    <script src="popup.js"></script>
    <style>
        #habit{
            font-size: 22px;
            text-align: center;
            border: 1px solid red;
            margin-bottom: 10px;
        }
    </style>
  </head>
  <body>
    <h1>HealthyHabit</h1>
    <div id="habit"></div>
    <button id="getHabit">Get A Healthy Habit!!</button>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

popup.js

This file contains the logic to handle the button click. It will look something like this -

document.addEventListener('DOMContentLoaded', function() {
    var getHabitButton = document.getElementById('getHabit');
    var count = 0;
    getHabitButton.addEventListener('click', function() {
        var data = {
            "habits":[
                {"habit":"Eat Breakfast Every Morning"},
                {"habit":"Add Fish & Omega-3 Fatty Acids To Your Diet"},
                {"habit":"Get Enough Sleep"},
                {"habit":"Make Social Connections"},
                {"habit":"Exercise For Better Health"},
                {"habit":"Practice Dental Hygiene"},
                {"habit":"Take Up A Hobby"},
                {"habit":"Protect Your Skin"},
                {"habit":"Snack The Healthy Way"},
                {"habit":"Drink Water & Eat Dairy"},
                {"habit":"Drink Tea"},
                {"habit":"Take A Daily Walk"},
                {"habit":"Plan"}
            ]
        }
        document.getElementById('habit').innerHTML =
            data.habits[count%13].habit;
        count = count +1;
  }, false);
}, false);
Enter fullscreen mode Exit fullscreen mode

Whenever the button is pressed, it chooses next habit from data and will set it in our div's content.

Testing it out

It’s really easy to test a new extension in Chrome. Type “chrome://extensions” in a tab to bring up the extensions page.

Extension

Once on this page, check “Developer mode” to enable loading unpacked extensions. This will allow you to load your extension from a folder. Finally, click “Load unpacked extension” and select the extension folder to load up the extension. You should immediately see the extension show up as a Browser Action with your icon in the toolbar window of the current tab.

To test out the extension, Simple click the icon for our extension. When the HTML page comes up, click “Get a Healthy Habit!!” and you should immediately see a healthy habit being displayed.

Extension in Action

And that’s it! We have created our first Google Chrome Extension.

Resources -
https://developer.chrome.com/extensions/overview

Discussion

pic
Editor guide