More Related Content
Similar to Web browser extension development (20)
Web browser extension development
- 1. Web Browser Extension
Development
Lucian Novac and Rusu Alexandru
Faculty of Computer Science, Al. I. Cuza University of Iaşi
- 7. Google Chrome Extensions
Example of manifest file provided by Google Chrome:
{
"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" }
}
- 9. Opera Extensions
The two basic parts of an Opera extension and
how they communicate.
From Opera
- 10. Opera Extensions
• /config.xml
• /index.html
• /background.js
• /popup.html
• /icons/example.png
• /locales/no/index.html
• /locales/no/background.js
• /locales/no/popup.html
• /options.html
- 12. Opera Extensions
• config.xml file(provided by Opera):
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://www.example.org/example">
<name>My test extension</name>
<description>API experiments and testing.</description>
<author href="http://foo-bar.example.org/" email="foo-
bar@example.org">Foo Bar Corp</author>
<icon src="icons/example.png"/>
</widget>
- 13. Opera Extensions
• index.html file(provided by Opera):
<!doctype html>
<html>
<head>
<script>
window.addEventListener("load", function(){
var theButton;
var UIItemProperties = { disabled: false, title: "101 - createItem w popup big", icon:
"icon.png", popup: { href: "popup.html", width: 250, height: 500 } } theButton =
opera.contexts.toolbar.createItem( UIItemProperties );
opera.contexts.toolbar.addItem( theButton ); }, false);
</script>
</head>
<body>
</body>
</html>
- 23. Safari Extensions
• The main ingredients of an extension are:
oGlobal HTML page
oContent (HTML, CSS, JavaScript, media)
oMenu Items (labels, images)
oInjected scripts
oInjected style sheets
oIcon image
- 24. Bibliography
• http://dev.opera.com
• http://code.google.com
• https://developer.mozilla.org
• http://developer.apple.com
