Chrome extension are the program which adds new functionality to Chrome browser. It takes little space in the toolbar for instant access.
It uses only HTML,CSS, and JavaScript to building a Chrome extension, except them no other web technologies.
From this tutorial, you get an overview on Chrome extension and How you can build your own.
Contents
Why?
By this, you can create your own new feature which is not created yet and add it to your Chrome browser. It also helps other who are searching for the similar type of extension it is useful to them, but when you publish it to Chrome Web Store. From there, they easily download and install the extension to their Chrome browser.
If you have a website you can create an extension for it and stay updated your users. Or you can use it in any other manner.
Get started
Each extension has a manifest.json file, one or more HTML files, JavaScript file for handling logics it is optional and any resource file if required it is also optional.
Here, is our file structure,
- Create a new folder and name it myfirstextension,
- Create new files manifest.json, popup.html, popup.js, and also add an icon image within the folder. It’s better to use 19×19 pixel image if it is not then it will get resized to adjust in the toolbar.
manifest.json
It is a JSON file which contains all information about extension e.g. its name, description, version, dependencies, etc. Every extension has their manifest.json file.
Completed Code
{
"manifest_version": 2,
"name": "My first Extension",
"description": "This extension will read post title",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_title": "My first Extension",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Let me explain some of the property which we added in the manifest file.
name – Defines the name of the extension.
description – Describe extension.
browse_action – Using browse_action we have defined icon file name which shows in Chrome toolbar and also defines popup file using default_popup. This shows when the user clicks on extension icon from the toolbar.
For adding popup create an HTML file and specify its name in the manifest file.
activeTab – This permission gives access to current active Tab. Using this you can read active tab URL, title, and favicon. The extension only accesses the active tab on user explicit action.
popup.html
It is actually a UI which shows when the user clicks on an icon from the toolbar.
Completed Code
<!doctype html>
<html>
<head>
<title>My first plugin</title>
<script src="popup.js"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<button id="but_click">Click me</button>
</div>
</body>
</html>
popup.js
It contains logical part of the popup.
Note – Declaring inline JavaScript within HTML file is not allowed, you need to create a separate file for it and attach it to your HTML file.
Within script file define Click event to the button, and using chrome.tabs API to interact with active Tab.
Created a form and hidden element which contain active tab URL which we get using tab.url and submitting it, After submitting it redirect to action URL.
Completed Code
document.addEventListener('DOMContentLoaded', function() {
// Adding click event to button
var checkPageButton = document.getElementById('but_click');
checkPageButton.addEventListener('click', function() {
chrome.tabs.getSelected(null, function(tab) {
d = document;
var f = d.createElement('form');
f.action = 'https://makitweb.com/demo/cextension/cextension.php';
f.method = 'post';
var i = d.createElement('input');
i.type = 'hidden';
i.name = 'url';
i.value = tab.url;
f.appendChild(i);
d.body.appendChild(f);
f.submit();
});
}, false);
}, false);
style.css
Adding some CSS.
Completed Code
body{
background: white;
width: 400px;
}
.container{
text-align: center;
}
button{
background: dodgerblue;
color: white;
letter-spacing: 1px;
padding: 5px 10px;
border: 0;
width: 100px;
}
Other (cextension.php)
This is our form action URL page, Here, using YQL (Yahoo Query Language) for reading the post title and sending GET request using CURL which gets JSON response.
Completed Code
<?php
$url = $_POST['url'];
// query
$query = urlencode('select * from html where url="'.$url.'" and xpath="//title"');
$requesturl = "https://query.yahooapis.com/v1/public/yql?q=".$query."&format=json&diagnostics=true&callback=";
// curl request
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $requesturl);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = json_decode(curl_exec($ch));
// filtering title and created
$title = "";
foreach($response as $data){
foreach($data->results as $row){
if($row != NULL){
$title = $row;
}
}
}
if($title != ""){
$return_text .= "<h2>".$title."</h2>";
}else{
$return_text = "<h2>Not found</h2>";
}
?>
<!doctype html>
<html>
<body style='width: 400px;'>
<?php echo $return_text; ?>
</body>
</html>
Installation
For test your built extension you need to install it on your Chrome browser. For this go to Chrome settings and click on Extensions. Check that Developer mode checkbox is checked or not if it is not then checked it after checked you will see 3 more buttons will be shown.
Click on Load unpacked extensions and browser your chrome extension folder and select it.
If extension loaded successfully you will see its icon on the toolbar. Now click on that icon you will see a popup window with Click me button.
Conclusion
Chrome allows the developers to add new feature using an extension to their favorite browser using core Web technologies only – HTML, CSS, and JavaScript. It also helpful to other by publishing it to Chrome Web Store.
You can learn more about it from this documentation.
