What are extensions?
Extensions are small software programs that can modify and
enhance the functionality of the Chrome browser. You write them using web
technologies such as HTML, JavaScript, and CSS.
Extensions have little to no user interface. Extensions
bundle all their files into a single file that the user downloads and installs.
This bundling means that, unlike ordinary web apps, extensions don't need to
depend on content from the web. You can distribute your extension using the Chrome
Developer Dashboard to publish to the Chrome Web Store.
How to make chrome extension?
Step 1:
Let’s start by creating a new directory that
we’ll call “website analyzer”. All Chrome extensions require a manifest file.
The Manifest file tells Chrome everything it needs to know to properly load up
the extension in Chrome. So we’ll create a manifest.json file and put it into the folder we created.
Put this code into manifest.json.
{
"manifest_version": 2,
"name": "GTmetrix Analyzer Plugin",
"description": "This extension will analyze a page
using GTmetrix",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
|
Step 2:
Create a popup.html file and a popup.js file in our “website analyzer” directory.
Open up the popup.html page and add the following:
<!doctype html>
<html>
<head>
<title>GTmetrix
Analyzer</title>
<script src="popup.js"></script>
</head>
<body>
<h1>GTmetrix Analyzer</h1>
<button id="checkPage">Check
this page now!</button>
</body>
</html>
|
Step 3:
Open up the popup.js file and add the following code:
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton =
document.getElementById('checkPage');
checkPageButton.addEventListener('click',
function() {
chrome.tabs.getSelected(null,
function(tab) {
d = document;
var f = d.createElement('form');
f.action = 'http://gtmetrix.com/analyze.html?bm';
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);
|
Now go to chrome/extension. Check “Developer mode” to enable
loading unpacked extensions. This will allow you to load your
extension from a folder. Finally, click “Load unpacked extension” or simply
drag the your folder onto the page to load up the extension. You should
immediately see the extension show up as a Browser Action with your icon in the
toolbar window of the current tab.
To test out the extension, navigate to a page you want to
test with GTmetrics. Then, go ahead and click the icon for our GTmetrix
extension. When the HTML page comes up, click “Check this page now!” and you
should immediately see the request and results from the current page being
displayed.
Check this out
No comments:
Post a Comment