google chrome extension
Today we are going to discuss a good and my favorite topic google chrome extension.How can we make a chrome extension? It is very simple.You can make it with html and javascript.So let’s start.
STEP1
An extension is basically just a web page that is hosted within Chrome and can access some additional APIs.Here I am going to add a textarea and a button in the extension.When you click on the button, It will alert the text which is written inside the textarea.So, first of all, I am creating a project directory.We’ll put all the files we need for our extension in this new folder.Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files.
STEP2
Manifest code
Chrome extension requires manifest.json file.Here we will add all the details of the extension.So first create a manifest.json file inside the project folder.Add the following piece of code.
{ "manifest_version": 2, "name": "My test extension", "description": "This is simple extension", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "index.html" }, "permissions": [ "activeTab" ] }
browser_action section where I add what the default icon is icon.png and what HTML page should be displayed when the browser action button is clicked.Here I add a permission section that specifies that we need to have permission to access the activeTab.
STEP3
UI section
In this step, we create the UI. Open the index.html and paste the following code.
<!doctype html> <html> <head> <title>My extension</title> <script src="script/popup.js"></script> </head> <body style="width:500px"> <textarea rows="5" id="msg" style="width:100%;margin-bottom: 15px"></textarea> <button id="go" style="padding: 10px 20px;color:#fff;background-color:green;font-size: 20px ">Go</button> </body> </html>
STEP4
Javascript code
Now we create a directory with name script inside the project folder.Then create the popup.js file inside the directory.Now we add the javascript code inside the popup.js file.This code will be executed when click on the button.
document.addEventListener('DOMContentLoaded', function() { var go = document.getElementById('go'); go.addEventListener('click', function() { var msg=document.getElementById('msg').value; alert(msg); }, false); }, false);
When we click on the button the message will be alerted which is written inside the textarea.
STEP5
Now we have to test the extension.Open the chrome browser and type the following url
chrome://extensions.Here you will see the list of extension.Now we have to enable the developer mode.Now click on “Load unpack extension” button and browse the project folder.Then you will see the extension icon right side of the browser.Click on the icon and see your result.