Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

How to develop chrome extension

Before starting to build a chrome extension, we have to know what is chrome extension and what it does and how chrome extension works. Chrome extensions allow you to add functionality to Chrome. We can create chrome extension using some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some Continue Reading


Before starting to build a chrome extension, we have to know what is chrome extension and what it does and how chrome extension works.

Chrome extensions allow you to add functionality to Chrome. We can create chrome extension using some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes.

An extension is basically just a web page that is hosted within Chrome and can access some additional APIs.

In this tutorial, I’m going to show you how to create a basic Chrome extension called a Browser Action extension. The extension puts a button in the Chrome toolbar that will show an HTML page when clicked.

If you have ever built a web page then you can write the chrome extension code easily.

Chrome extensions can also be created to work on certain pages by using Page Actions, they can run code in the background using Background Pages, and they can modify an existing page loaded in the browser using Content Scripts.

Start Creating the extension
First of all we have to create a folder name myextension. create the following files within it.
1) manifest.json
2) Index.html
3) extension.js
4) icon.png

The manifest.json file contains the important information about your extension, like its name and which permissions it needs.

The main file is manifest.json file. The entry point of your extension is the manifest.json file. The manifest.json file tells Chrome important information about your extension, like its name .It should contain a valid JSON object.
The following file is the sample manifest.json for our example

{
  "manifest_version": 2,

  "name": "Jquerytraining Plugin",
  "description": "This extension will give you new post of jquery training",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "index.html"
  },
  "permissions": [
   "activeTab"
   ]
}

Now the web page or index.html for our extension is as below

<html>
<head>
<title>Jquery training Extension</title>
<script src="extension.js"></script>
</head>
<body>
<h1>Jquery training chrome extension demo</h1>

</body>
</html>

The extension.js is require if need to do any action in our plugin.
The icon.png is the icon which will show in the chrome toolbar as icon of the extension

now go to address bar and type

chrome://extensions

Now check the developer mode check box and then load the unpacked extension button

Note: after check developer mode check box load the unpacked extension will appear

Please follow and like us:






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts