Basic Google Chrome Extensions Developing

Google Chrome is by far the easiest browser to make extensions for, as you will see from the steps below. We can build an extension for it using only HTML, CSS, and JavaScript.

Testing Your Very First Extension

It is great that we can test our extension without uploading it to Chrome's web store. In the browser's address bar, just type in:

chrome://extensions

Before doing that you have to check Developer mode and click the Load unpacked extension... button. Then simply select the folder from hard disk which contains the extension's files. The image demonstrates it:

Step 1:

Let's create our extension project. Name it "hello_world". Chrome starts with a manifest file. If is a json file. The manifest file is only parsed when the extension is loaded. It should be a valid json file. Let's have a look of a basic manifest.json file:

{
  "manifest_version": 2,
  "name": "Getting started example",
  "description": "Hello world extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Click here!"
  },
  "permissions": [
   "activeTab"
   ]
 }

permissions section specifies that we need to have permission to access the activeTab.

Download png file provided by google's official extension development site:

Now load the extension from:

chrome://extensions

You will see the icon at the top corner of the browser. It also has a tool tip. If you click the icon it will render the file not found page. Because we have not created the popup.html.

Step 2:

Let's create the popup.html file. It is the basic html file to be shown when the icon is clicked.

<!doctype html>
<html>
  <head>
    <title>Hello world!</title>
    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Hello world!</h1>
    <button class="btn btn-primary">Check this page now!</button>
  </body>
</html>

mhasan3/extension.md

Basic Google Chrome Extensions Developing

Testing Your Very First Extension

Step 1:

Step 2:

mhasan3 commented Jul 30, 2015