Browser extensions are programs that add new functionality to browsers. They are developed using technologies like HTML, CSS, JavaScript, and XML. The general structure of an extension includes metadata, a user interface, and functionality. Chrome extensions have a manifest file and folder structure that includes optional files. Firefox extensions have an install manifest file and chrome folder structure that can include XUL, JavaScript, images and more. Extensions are loaded by clicking "Load unpacked extension" in the browser extensions page after placing the extension files in a folder.
8. The general structure of an
Extension
metadata information
user interface extension
functionality
9. Chrome Extensions
Each extension has its own folder, and therefore a Chrome
ext. folder looks like this :
My_Extension
manifest.json js_file.js other_files
popup.html (optional)
(optional)
10. Note
The manifest.json file gives information about the
extension, such as the most important files and the
capabilities that the extension might use.
Example :
{ "name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": { "128": "icon_128.png" },
"background_page": "bg.html",
"permissions": ["http://*.google.com/", "https://*.google.com/"],
"browser_action": {
"default_title": "",
"default_icon": "icon_19.png",
"default_popup": "popup.html"
}
}
11. Zipp’ing the Chrome extension
We can either load our extension unpacked or using the
zipped form - the .crx file
js_file.js
(optional)
popup.html
manifest.json
other_files
(optional)
.CRX
12. Publishing the chrome extension
https://chrome.google.com/extensions/developer/dashboard
14. The files
install.rdf : provides information about the extension
chrome.manifest - maps out the file/structure layout of the extension
for Firefox
/chrome
/content : contains the extensions XUL and JavaScript Files
file.xul : the XML that creates the layout of the extension
file.js : the JavaScript that manages the action of each extension object
/locale : contains language files
/skin : contains images and CSS to control extension object layout
file.css - a CSS file controlling presentation, just like a website
file.png - image
15. The files
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>sample@example.net</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>
<!-- Target Application this extension can install into,
with minimum and maximum supported versions. -->
<em:targetApplication>
install.rdf
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>4.0.*</em:maxVersion>
</Description>
</em:targetApplication>
<!-- Front End MetaData -->
<em:name>sample</em:name>
<em:description>A test extension</em:description>
<em:creator>Your Name Here</em:creator>
<em:homepageURL>http://www.example.com/</em:homepageURL>
</Description>
</RDF>
16. The files
XUL ??
XML-based User-Interface Language that lets you build
feature-rich cross platform applications that can run
connected or disconnected from the Internet.
21. {
"name": "Bookmark",
"description": "Adds the current page to my bookmarking system.",
"version": "1.0",
"background_page": "background.html",
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "Bookmark This Page",
"default_icon": "icon.png",
"popup": "popup.html"
}
} manifest.json
22. // This callback function is called when the content script has been
// injected and returned its results
function onPageInfo(o)
{
document.getElementById("title").value = o.title;
document.getElementById("url").value = o.url;
document.getElementById("summary").innerText = o.summary;
}
// POST the data to the server using XMLHttpRequest
function addBookmark(f)
{
var req = new XMLHttpRequest();
req.open("POST", "http://mywebappurl/do_add_bookmark/", true);
var params = "title=" + document.getElementById("title").value +
"&url=" + document.getElementById("url").value +
"&summary=" + document.getElementById("summary").value +
"&tags=" + document.getElementById("tags").value;
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", params.length);
req.setRequestHeader("Connection", "close");
req.send(params);
req.onreadystatechange = function()
{
// If the request completed, close the extension popup
if (req.readyState == 4)
if (req.status == 200) window.close();
popup.html
};
return false;
}
// Call the getPageInfo function in the background page, passing in
// our onPageInfo function as the callback
window.onload = function()
{
var bg = chrome.extension.getBackgroundPage();
bg.getPageInfo(onPageInfo);
}
23. <script>
// Array to hold callback functions
var callbacks = [];
// This function is called onload in the popup code
function getPageInfo(callback)
{
// Add the callback to the queue
callbacks.push(callback);
// Injects the content script into the current page
chrome.tabs.executeScript(null, { file: "content_script.js" });
};
// Perform the callback when a request is received from the content script
chrome.extension.onRequest.addListener(function(request)
{
// Get the first callback in the callbacks array
// and remove it from the array
var callback = callbacks.shift();
// Call the callback function
callback(request);
});
</script>
background.html
24. // Object to hold information about the current page
var pageInfo = {
"title": document.title,
"url": window.location.href,
"summary": window.getSelection().toString()
};
// Send the information back to the extension
chrome.extension.sendRequest(pageInfo);
content_script.js
25. After we have all there files in one folder, then we will
load the extension as follows :
Bring up the extensions management page by clicking the wrench icon and choosing
Tools > Extensions.
If Developer mode has a + by it, click the + to add developer information to the page.
The + changes to a -, and more buttons and information appear.
Click the Load unpacked extension button. A file dialog appears.
In the file dialog, navigate to your extension's folder and click OK.
And there you have it !
