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.

1. Cojocaru Victor-George
3B

2. browser extensions
are...

3. computer programs that gives
the browser new functionalities

5. Extension developing tools
Web developer
JavaScript Debugger
DOM Inspector
Komodo Edit

6. Some of the technologies used in
developing browser extensions
 CSS/CSS3
 HTML/HTML5
 JavaScript
 XML
 and so on…

7. Getting Started…

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

13. install.rdf
Firefox Extensions
The folder structure :
My_Extension
/chrome
install.rdf chrome.manifest
/content /locale /skin
file.xul language file.css
files
image
file.js files (opt)

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.

17. XUL file - example
<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World" />
</statusbar>
</overlay>

18. Zipp’ing the Firefox extension
.XPI

19. Publishing the Firefox extension
https://addons.mozilla.org/en-US/firefox/extensions/

20. Google Chrome
Demo

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 !

26. Bibliography
http://en.wikipedia.org/wiki/Add-on_%28Mozilla%29#Extension_technologies.5B1.5D
http://code.google.com/chrome/extensions/overview.html
http://markashleybell.com/articles/building-a-simple-google-chrome-extension
http://code.google.com/chrome/extensions/getstarted.html
http://davidwalsh.name/firefox-extension-template
https://developer.mozilla.org/en/Chrome_Registration
http://kb.mozillazine.org/Getting_started_with_extension_development#hello.xul

27. End of File