0
Web browser extension development Chisan Petrisor Laurentiu Stefanache Pavel Cosmin
What is a browser extension?
  A browser extension is a  computer program that extends the functionality of a web browser  in some way.
Technologies used for browser extension development HTML CSS Javascript XML based languages HTML5  API ..and many other te...
Structure of an Extension <ul><li>metadata information  </li></ul><ul><li>user interface extension  </li></ul><ul><li>func...
Developing firefox extensions
Web Developer AdBlock Plus Firebug Delicious
Folder structure /chrome content locale skin install.rdf chrome.manifest file.xul file.js file.dtd file.properties file.css
Everything zipped in an .xpi file extention.xpi
<?xml version=&quot;1.0&quot;?> <RDF xmlns=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot; xmlns:em=&quot;http://w...
<Description about=&quot;urn:mozilla:install-manifest&quot;> <em:id> [email_address] </em:id> <em:name>XUL School Hello Wo...
<Description about=&quot;urn:mozilla:install-manifest&quot;> ... <!-- Mozilla Firefox -->   <em:targetApplication> <Descri...
content   xulschoolhello   jar:chrome/xulschoolhello.jar!/content/ skin   xulschoolhello   classic/1.0  jar:chrome/xulscho...
<?xml version=&quot;1.0&quot;?> <?xml-stylesheet type=&quot;text/css&quot; href=&quot;chrome://global/skin/&quot; ?> <?xml...
Extension files  Content folder Extension files  Content folder Extension files   content folder <overlay id=&quot;xulscho...
browserOverlay.xul <script type=&quot;application/x-javascript&quot;  src=&quot;chrome://xulschoolhello/content/ browserOv...
<menupopup id=&quot;menu_ToolsPopup&quot;>   <menu id=&quot;xulschoolhello-hello-menu&quot; label=&quot;&xulschoolhello.he...
/** * XULSchoolChrome namespace. */ if (&quot;undefined&quot; == typeof(XULSchoolChrome)) { var XULSchoolChrome = {}; }; /...
browserOverlay.dtd <!ENTITY xulschoolhello.hello.label  &quot;Hello World &quot;> <!ENTITY xulschoolhello.helloMenu.access...
browserOverlay.properties xulschoolhello.greeting.label = Hello! Extension files   locale folder
Extension files   skin folder Here we put the CSS file for styling the the xul file
Tools for development <ul><li>Komodo Edit  </li></ul><ul><li>Web developer </li></ul><ul><li>DOM Inspector </li></ul><ul><...
Developing google chrome extension
Folder structure / manifest.json popup.html file_name.js * Any file* * optional files
Now, let's see a simple exemple
{ &quot;name&quot;: &quot;My First Extension&quot;, &quot;version&quot;: &quot;1.0&quot;, &quot;description&quot;: &quot;T...
<style> body { min-width:357px; overflow-x:hidden; } img { margin:5px; border:2px solid black; vertical-align:middle; widt...
<script> var req = new XMLHttpRequest(); req.open( &quot;GET&quot;, &quot;http://api.flickr.com/services/rest/?&quot; + &q...
<script> ... function showPhotos() { var photos = req.responseXML.getElementsByTagName(&quot;photo&quot;); for (var i = 0,...
We can load our extension uppacked or zipped in a .crx file manifes.json .js .html .css .png CRX
And what's next ?
Publish your firefox extension  https://addons.mozilla.org/en-US/firefox/extensions/
Publish your chrome extension  https://chrome.google.com/extensions/developer/dashboard
Bibliography http://code.google.com/chrome/extensions/getstarted.html https://developer.mozilla.org/en/Building_an_Extension
Upcoming SlideShare
Loading in...5
×

Browser extension

1,654

Published on

structura generală a unei extensii pentru browser, cu precizarea caracteristicilor particulare pentru fiecare navigator Web în parte (Chrome, Firefox).

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,654
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Browser extension"

  1. 1. Web browser extension development Chisan Petrisor Laurentiu Stefanache Pavel Cosmin
  2. 2. What is a browser extension?
  3. 3. A browser extension is a computer program that extends the functionality of a web browser in some way.
  4. 4. Technologies used for browser extension development HTML CSS Javascript XML based languages HTML5 API ..and many other technologies
  5. 5. Structure of an Extension <ul><li>metadata information </li></ul><ul><li>user interface extension </li></ul><ul><li>functionality </li></ul>
  6. 6. Developing firefox extensions
  7. 7. Web Developer AdBlock Plus Firebug Delicious
  8. 8. Folder structure /chrome content locale skin install.rdf chrome.manifest file.xul file.js file.dtd file.properties file.css
  9. 9. Everything zipped in an .xpi file extention.xpi
  10. 10. <?xml version=&quot;1.0&quot;?> <RDF xmlns=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot; xmlns:em=&quot;http://www.mozilla.org/2004/em-rdf#&quot;> <Description about=&quot;urn:mozilla:install-manifest&quot;> <em:id>helloworld@xulschool.com</em:id> <em:name>XUL School Hello World</em:name> <em:description>Welcome to XUL School!</em:description> <em:version>0.1</em:version> <em:creator>Appcoast</em:creator> <em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL> <em:type>2</em:type> <!-- Mozilla Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.0</em:minVersion> <em:maxVersion>4.0</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF> install.rdf (metadata) Extension files Extension folder
  11. 11. <Description about=&quot;urn:mozilla:install-manifest&quot;> <em:id> [email_address] </em:id> <em:name>XUL School Hello World</em:name> <em:description>Welcome to XUL School!</em:description> <em:version>0.1</em:version> <em:creator>Appcoast</em:creator> <em:homepageURL> https://developer.mozilla.org/en/XUL_School </em:homepageURL> <em:type>2</em:type> … </Description> install.rdf (metadata) Extension files Extension folder
  12. 12. <Description about=&quot;urn:mozilla:install-manifest&quot;> ... <!-- Mozilla Firefox --> <em:targetApplication> <Description> <em:id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </em:id> <em:minVersion>3.0</em:minVersion> <em:maxVersion>4.0</em:maxVersion> </Description> </em:targetApplication> </Description> install.rdf (metadata) Extension files Extension folder
  13. 13. content xulschoolhello jar:chrome/xulschoolhello.jar!/content/ skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/ locale xulschoolhello en-US jar:chrome/xulschoolhello.jar!/locale/en-US/ overlay chrome://browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul chrome.maifest (file references) Extension files Extension folder Extension files Extension folder
  14. 14. <?xml version=&quot;1.0&quot;?> <?xml-stylesheet type=&quot;text/css&quot; href=&quot;chrome://global/skin/&quot; ?> <?xml-stylesheet type=&quot;text/css&quot; href=&quot;chrome://xulschoolhello/skin/browserOverlay.css&quot; ?> <!DOCTYPE overlay SYSTEM &quot;chrome://xulschoolhello/locale/browserOverlay.dtd&quot;> <overlay id=&quot;xulschoolhello-browser-overlay&quot; xmlns=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;> <script type=&quot;application/x-javascript&quot; src=&quot;chrome://xulschoolhello/content/browserOverlay.js&quot; /> <stringbundleset id=&quot;stringbundleset&quot;> <stringbundle id=&quot;xulschoolhello-string-bundle&quot; src=&quot;chrome://xulschoolhello/locale/browserOverlay.properties&quot; /> </stringbundleset> <menupopup id=&quot;menu_ToolsPopup&quot;> <menu id=&quot;xulschoolhello-hello-menu&quot; label=&quot;&xulschoolhello.hello.label;&quot; accesskey=&quot;&xulschoolhello.helloMenu.accesskey;&quot; insertafter=&quot;javascriptConsole,devToolsSeparator&quot;> <menupopup> <menuitem id=&quot;xulschoolhello-hello-menu-item&quot; label=&quot;&xulschoolhello.hello.label;&quot; accesskey=&quot;&xulschoolhello.helloItem.accesskey;&quot; oncommand=&quot;XULSchoolChrome.BrowserOverlay.sayHello(event);&quot; /> </menupopup> </menu> </menupopup> </overlay> browserOverlay.xul Extension files content folder
  15. 15. Extension files Content folder Extension files Content folder Extension files content folder <overlay id=&quot;xulschoolhello-browser-overlay&quot; xmlns=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;> browserOverlay.xul
  16. 16. browserOverlay.xul <script type=&quot;application/x-javascript&quot; src=&quot;chrome://xulschoolhello/content/ browserOverlay.js&quot; /> Extension files content folder
  17. 17. <menupopup id=&quot;menu_ToolsPopup&quot;> <menu id=&quot;xulschoolhello-hello-menu&quot; label=&quot;&xulschoolhello.hello.label;&quot; accesskey=&quot;&xulschoolhello.helloMenu.accesskey;&quot; insertafter=&quot;javascriptConsole,devToolsSeparator&quot;> <menupopup> <menuitem id=&quot;xulschoolhello-hello-menu-item&quot; label=&quot;&xulschoolhello.hello.label;&quot; accesskey=&quot;&xulschoolhello.helloItem.accesskey;&quot; oncommand=&quot;XULSchoolChrome.BrowserOverlay.sayHello(event);&quot; /> </menupopup> </menu> </menupopup> browserOverlay.xul Extension files content folder
  18. 18. /** * XULSchoolChrome namespace. */ if (&quot;undefined&quot; == typeof(XULSchoolChrome)) { var XULSchoolChrome = {}; }; /** * Controls the browser overlay for the Hello World extension. */ XULSchoolChrome.BrowserOverlay = { /** * Says 'Hello' to the user. */ sayHello : function(aEvent) { let stringBundle = document.getElementById(&quot;xulschoolhello-string-bundle&quot;); let message = stringBundle.getString(&quot;xulschoolhello.greeting.label&quot;); window.alert(message); } }; browserOverlay.js Extension files content folder
  19. 19. browserOverlay.dtd <!ENTITY xulschoolhello.hello.label &quot;Hello World &quot;> <!ENTITY xulschoolhello.helloMenu.accesskey &quot;l&quot;> <!ENTITY xulschoolhello.helloItem.accesskey &quot;H&quot;> Extension files locale folder
  20. 20. browserOverlay.properties xulschoolhello.greeting.label = Hello! Extension files locale folder
  21. 21. Extension files skin folder Here we put the CSS file for styling the the xul file
  22. 22. Tools for development <ul><li>Komodo Edit </li></ul><ul><li>Web developer </li></ul><ul><li>DOM Inspector </li></ul><ul><li>JavaScript Debugger </li></ul>
  23. 23. Developing google chrome extension
  24. 24. Folder structure / manifest.json popup.html file_name.js * Any file* * optional files
  25. 25. Now, let's see a simple exemple
  26. 26. { &quot;name&quot;: &quot;My First Extension&quot;, &quot;version&quot;: &quot;1.0&quot;, &quot;description&quot;: &quot;The first extension that I made.&quot;, &quot;browser_action&quot;: { &quot;default_icon&quot;: &quot;icon.png&quot;, &quot;popup&quot; : &quot;popup.html&quot; }, &quot;permissions&quot;: [ &quot;http://api.flickr.com/&quot; ] } manifest.json
  27. 27. <style> body { min-width:357px; overflow-x:hidden; } img { margin:5px; border:2px solid black; vertical-align:middle; width:75px; height:75px; } </style> ... popup.html
  28. 28. <script> var req = new XMLHttpRequest(); req.open( &quot;GET&quot;, &quot;http://api.flickr.com/services/rest/?&quot; + &quot;method=flickr.photos.search&&quot; + &quot;api_key=90485e931f687a9b9c2a66bf58a3861a&&quot; + &quot;text=hello%20world&&quot; + &quot;safe_search=1&&quot; + // 1 is &quot;safe&quot; &quot;content_type=1&&quot; + // 1 is &quot;photos only&quot; &quot;sort=relevance&&quot; + // another good one is &quot;interestingness-desc&quot; &quot;per_page=20&quot;, true); req.onload = showPhotos; req.send(null); … </script> popup.html
  29. 29. <script> ... function showPhotos() { var photos = req.responseXML.getElementsByTagName(&quot;photo&quot;); for (var i = 0, photo; photo = photos[i]; i++) { var img = document.createElement(&quot;image&quot;); img.src = constructImageURL(photo); document.body.appendChild(img); } } // See: http://www.flickr.com/services/api/misc.urls.html function constructImageURL(photo) { return &quot;http://farm&quot; + photo.getAttribute(&quot;farm&quot;) + &quot;.static.flickr.com/&quot; + photo.getAttribute(&quot;server&quot;) + &quot;/&quot; + photo.getAttribute(&quot;id&quot;) + &quot;_&quot; + photo.getAttribute(&quot;secret&quot;) + &quot;_s.jpg&quot;; } </script> popup.html
  30. 30. We can load our extension uppacked or zipped in a .crx file manifes.json .js .html .css .png CRX
  31. 31. And what's next ?
  32. 32. Publish your firefox extension https://addons.mozilla.org/en-US/firefox/extensions/
  33. 33. Publish your chrome extension https://chrome.google.com/extensions/developer/dashboard
  34. 34. Bibliography http://code.google.com/chrome/extensions/getstarted.html https://developer.mozilla.org/en/Building_an_Extension
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×