Hello Friends, in this article we will learn to create a
chrome extension.
Step 1 - Create a
manifest.json file. It should contain a valid json content –
e.g –
{
"manifest_version": 2,
"name": "Logout from FB",
"description": "Auto logout from fb after 1 minute.",
"version": "1.0",
"author": "Saurabh Singh",
"manifest_version": 2,
"name": "Logout from FB",
"description": "Auto logout from fb after 1 minute.",
"version": "1.0",
"author": "Saurabh Singh",
}
In json file, make sure you have defiined these three
properties –
manifest_version,
version and name. These are the required properties. The value of the manifest_version should
be the integer 2
Content Scripts – If
you need to access DOM of the browser
page and this section will execute with ever page load.
e-g –
"content_scripts":[ { "matches" : ["https://www.google.com/*"], "js" : ["script.js"] }],
How to write the UI for
your extension –
So you have couple of options for writing it Browser Action
and Page Action. So lets talk about Browser Action.
Browser-action – After setting the browser action for your
extension. Icon will be placed at the right corner of address bar like below
image.
After clicking on the icon a popup will be shown. This will
be controlled by your html UI. Lets see the content of browser action –
"browser_action": { "default_title":"You will be logged out in 1 minute.", "default_icon": "icon.png", "default_popup": "popup.html" },
default_icon - is the property which shows the icon at the right corner of address bar.
default_popup – represents the html pop up which will shown
after clicking the image.
default_title – this is used to see the tool-tip.
Page-action – This is almost similar with BrowserAction the
only difference is the icon will be displayed inside the address bar like the
bookmark image. Checkout the below image.
Let’s see the content of PageAction –
"page_action": { "default_title":"You will be logged out in 1 minute.", "default_icon": "icon.png", "default_popup": "popup.html" },
So we are all set with our first chrome extension. Our
manifest.json file will look like this–
{ "manifest_version": 2, "name": "Logout from FB", "description": "Auto logout from fb after 1 minute.", "version": "1.0", "author": "Saurabh Singh",
"browser_action": { "default_title":"You will be logged out in 1 minute.", "default_icon": "icon.png", "default_popup": "popup.html" }, "content_scripts":[ { "matches" : ["https://www.facebook.com/*"], "js" : ["facebook.js"] }],
}
Step2 – Create an
icon file icon.png and place it at the same folder structure.
Step3 – Create a
popup.html file which will contain the UI you want to open it.
Here is the sample html file –
html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<h4>I am the UI click me.</h4>
</body>
</html>
We are good with our
first chrome extension. In case you want to download the code here is the link - Download Me !!
Happy Coding !!
Posts
