Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Develop Your First Google Chrome Extension Using HTML and jQuery

DZone's Guide to

Develop Your First Google Chrome Extension Using HTML and jQuery

We go through the process of creating your own Chrome extension, from the manifest.json to jQuery code, to finding it in the Chrome Web Store.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Chrome extensions are small programs (using HTML, JavaScript, jQuery), written basically to add additional functionality to the Chrome browser. You can download and find all Google Chrome Extensions in the Chrome Web Store (formerly the Google Chrome Extensions Gallery). As per Wikipedia, by February 2010 over 2,200 extensions had been published by developers.

If you check the Chrome web store, you will find a lot of Chrome extensions. You can check this out using this link.

These Chrome extensions have a small UI which is mainly an HTML page and we can make it interactive by using JavaScript and jQuery.

There are 3 main parts in a Chrome extension. These are:

  1. manifest.json.
  2. A JavaScript file.
  3. An HTML file.

Let's see what is manifest.json.

manifest.json

Every Chrome app has a JSON file which is called manifest.json. This file contains the information related to the app in JSON format.

Here is a simple manifest file.

{
  "name": "My chrome App",
  "description": "This is my first chrome app.",
  "icons": [{
    "src": "images/icon.png",
    "sizes": "192x192"
  }]
}

Basically, it contains metadata like name, description, what icon is used in the app, icon size, the HTML page being used, permissions, browser action, version, etc.

Image title

Browser Action

Browser action is used to show the Chrome app in the Google Chrome toolbar. It contains several properties like tooltip, badges, popup, etc.
Image title

Permissions

While creating a Chrome extension, you may need to use some third-party libraries, the Chrome API, etc. So to include these in the project, we need permissions data. We can mention our permissions in mainfest.json. Here is an example showing the permissions in our mainfest.json file.

{
  "manifest_version": 2,

  "name": "Debendra Notification",
  "description": "This extension by debendra256",
  "version": "1.0",

  "permissions": [
    "notifications"
  ],
  "browser_action": {
    "default_icon": "img/myimg.png",
    "default_popup": "popup.html",

    "icons": { "128": "myimg.png" }  
  }
}

Now let's try to create a Chrome app using Visual Studio 2015. For a Chrome template in Visual Studio, you can download it from this link and install it.

After installing the Chrome Extension Project Template, restart Visual Studio.

Once you restart your VS, you will find the following template under C# projects.

Image title

Now select the Google Chrome extension and work on it.

Image title

Now go to the mainfest.json and add the following:

{
  "manifest_version": 2,
  "name": "Debendra calculator",
  "description": "This extension by debendra256",
  "version": "1.0",
  "browser_action": {
    "default_icon": "img/myimg.png",
    "default_popup": "popup.html",
    "icons": { "128": "myimg.png" }  
  }
}

Here, I used a 128*128 image, labeled as myimg.

Now, in Popup.html, write the following HTML code.

<!doctype html>
<html>
  <head>
      <script src="jquery-3.2.1.min.js"></script>

      <script src="popup.js"></script>
  </head>
<body>
<input type="text" id="txt_name" />
<input type="submit" id="btnsave" 

title="save" value="save"/>
</body>
</html>

Now go to the popup.js and write the following logic to show the alert.

$(function () {
    $("#btnsave").click(function () {
        var name = $("#txt_name").val();

       alert("Hi"+" "+name);


    });
});

Now all the tasks related to creating the app are done, so we will see how we can add the extension to the browser.

Here are the steps to do so:

  • Open the project in the File Explorer.
  • Copy the project in the desktop.
  • Now go to Chrome settings, then Extension.

Image title

Now click on the Load Unpack extension button and find your extension project on the desktop.


Image title

After loading, it will appear in the top right corner of your browser, and you can access it by clicking it. You can play with it by typing your name.

Image title

Now click on the small icon which will appear on the top right side of the Chrome browser. It will start the app and will work as per your logic.

Image title

So in this way, we can just start creating a small Chrome app. For Chrome, there are lots of apps in the Chrome store. If you want to visit the chrome store, please click this link.

Image title

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
jquery ,html ,web dev ,json ,chrome extension

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}