Paris js extensions

  • 1,527 views
Uploaded on

Presentation at Paris JS, November 2011

Presentation at Paris JS, November 2011

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,527
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • * Javascript : dans les pages, dans les serveurs, mais pas seulement !\n
  • * Etendre les fonctionalites du navigateur (Google Gears), fonctionalités de niche (Chrome to Phone)\n* Fonctionalités transversales sur toutes les pages\n* Exemple de Spellbound: correction orthographique dans Firefox\n
  • * Mozilla 1.0 bloated => Firefox 1.0 minimaliste mais avec extensions\n* Forte influence de Mozilla - visionnaire a l’epoque du Javascript “etoiles qui suivent le curseur”\n* Extensions Chrome = Aaron Boodman de Greasemonkey\n
  • * Firefox se base sur la meme plate-forme de développement que les extensions (Firefox lui-meme est écrit en Javascript !)\n* Google Chrome a ete developpe principalement par des gens qui viennent du monde Mozilla et ont tire profit de l’experience de Firefox\n
  • * Chrome: points d’extension clairement definis par une API, seuls points d’intégration\n* Empeche des developpeurs de faire n’importe quoi (stabilite, performances)\n
  • 100% technos web - très facile d’accès pour les développeurs web\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • * Firefox: liberté totale !\n* API et points d’extension existent, mais pas d’obligation de se limiter a cela\n* Reecriture de pans entiers du navigateur, desactivation de fonctionalités\n* Problemes de compatibilite avec les nouvelles version de Firefox\n
  • * Juste javascript, HTML, CSS pour les choses simples\n* XUL langage de balises XML pour décrire les interfaces graphiques, nécessaire pour étendre l’interface graphique de Firefox\n* XPCOM pour aller encore plus loin et ajouter des composants natifs\n
  • \n
  • \n
  • * Projet qui existe depuis pres de 3 ans mais reste a l’etat de prototype\n* Apporte a Firefox la simplicité de developpement et les extensions installables sans redemarrage\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • * API Javascript pour ajouter un lien vers un site, avec notifications\n* Positif : fait progresser l’interaction application web / desktop\n => point d’evolution majeur des navigateurs aujourd’hui\n* IE = gros progres au niveau du support des standards depuis IE8, IE9, IE10\n => ajoutez un support d’extensions en Javascript !\n
  • \n
  • * Les extensions sont commodes mais ont des inconvéniants: installation, mise a jour, depend du navigateur\n* Utilisez du pur web quand c’est possible, extensions seulement quand necessaire\n
  • \n

Transcript

  • 1. Browser Extensions Erwan Loisant <elo@zenexity.com> @erwan
  • 2. Why?• Integrate deeply with a service• Add new features to the browser• Implement a recent spec in a lagging browser• Anything you can think of!
  • 3. History• 20th Century: plugins, native addons• 2002: Mozilla 1.0 written in XUL and Javascript• 2004: Firefox 1.0 with a focus on extensions• 2007: FUEL (Firefox User Extension Library)• 2009: Jetpack, Chrome Extensions
  • 4. POWER vsEASE OF DEV
  • 5. local storage Javascript JSONCSS HTML
  • 6. { "name": "Telify", "version": "0.1", "description": "Click to call", "background_page": "background.html", "page_action": { "default_icon": "icons/tel.gif", "default_popup": "popup.html" }, "content_scripts" : [{ "matches" : ["http://*/*"], "js" : ["contentScript.js"] }], "permissions": [ "http://cdnjs.cloudflare.com" ]} manifest.json
  • 7. var phoneRe = /^s*((d{2}s?){5})s*$/;var texts = document.evaluate(".//text()[normalize-space(.)!=]", document.body, null, 6, null);var phones = [];for (var i = 0; i < texts.snapshotLength; i++) { var textNode = texts.snapshotItem(i); var text = textNode.textContent; var m = phoneRe.exec(text); if (m != null) { var newText = document.createElement("a"); newText.setAttribute("href", "callto:" + m[1]); newText.appendChild(document.createTextNode(m[0])); textNode.parentNode.replaceChild(newText, textNode); phones.push(m[1]); }}if (phones.length > 0) { chrome.extension.sendRequest( {"phones": phones}, function(response) {});} contentScript.js
  • 8. <script>// Global variable accessed by the popupvar telList;chrome.extension.onRequest.addListener(function(request,sender, sendResponse) { telList = request["phones"]; chrome.pageAction.show(sender.tab.id); sendResponse({});});</script> background.html
  • 9. <!DOCTYPE html><html> <style> body { width: 200px; } </style> <script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/0.7/zepto.min.js"></script> <script> $(document).ready(function(){ var telList =chrome.extension.getBackgroundPage().telList; if (telList && telList.length > 0) { for (i in telList) $("ul").append("<li><a href=callto:" +telList[i] + ">" + telList[i] + "</a></li>"); } }); </script> <body><ul></ul></body></html> popup.html
  • 10. XPCOM XUL Javascript XBLCSS HTML
  • 11. <?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?><!DOCTYPE overlay ><overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script type="application/javascript" src="chrome://custombutton/content/button.js"/><!-- Firefox --><toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette><!-- button details --><toolbarbutton id="custom-button-1" label="Custom" tooltiptext="My custom toolbar button" oncommand="CustomButton()" class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" /></overlay> overlay.xul
  • 12. function installButton(toolbarId, id, afterId) { if (!document.getElementById(id)) { var toolbar = document.getElementById(toolbarId); var before = toolbar.firstChild; if (afterId) { let elem = document.getElementById(afterId); if (elem && elem.parentNode == toolbar) before = elem.nextElementSibling; } toolbar.insertItem(id, before); toolbar.setAttribute("currentset", toolbar.currentSet); document.persist(toolbar.id, "currentset"); if (toolbarId == "addon-bar") toolbar.collapsed = false; }}if (firstRun) { installButton("nav-bar", "my-extension-navbar-button", "urlbar"); installButton("addon-bar", "my-extension-addon-bar-button");} overlay.xul
  • 13. AKA:“The Chrome way applied to Firefox”
  • 14. { "name": "weather-example", "license": "MPL 1.1/GPL 2.0/LGPL 2.1", "author": "Alexandre Poirot", "version": "1.0", "fullName": "Weather example", "id": "weather-example", "description": "a basic add-on that display aweather widget"} package.json
  • 15. const data = require("self").data;const ss = require("simple-storage");const Request = require("request").Request;const timer = require("timer");const panel = require("panel").Panel({ width: 240, height: 180, contentURL: data.url("panel.html"), contentScriptFile: [data.url("panel.js")], onShow: function () { this.port.emit("show"); }});[...] lib/main.js
  • 16. COM C#C++ ActiveX Windows API
  • 17. STDMETHODIMP CExplorerBar::SetSite(IUnknown *punkSite) { //If a site is being held, release it. if(m_pSite) { m_pSite->Release(); m_pSite = NULL; } //If punkSite is not NULL, a new site is being set. if (punkSite) { //Get the parent window. IOleWindow *pOleWindow; m_hwndParent = NULL; if(SUCCEEDED(punkSite->QueryInterface(IID_IOleWindow, (LPVOID*)&pOleWindow))) { pOleWindow->GetWindow(&m_hwndParent); pOleWindow->Release(); } if(!m_hwndParent) return E_FAIL; if(!RegisterAndCreateWindow()) return E_FAIL; //Get and keep the IInputObjectSite pointer. if(SUCCEEDED(punkSite->QueryInterface(IID_IInputObjectSite, (LPVOID*)&m_pSite))) { return S_OK; } return E_FAIL; } return S_OK;}
  • 18. Fortunately, there’s more...
  • 19. Accelerators (IE8+)
  • 20. Pinning API (IE9+)window.external.msSiteModeClearIconOverlay()window.external.msSiteModeSetIconOverlay()window.external.msSiteModeActivate()window.external.msIsSiteMode()
  • 21. Do we really need extensions?
  • 22. Do we really need extensions?
  • 23. last word: don’t abuse extensions!
  • 24. Questions? @erwanelo@zenexity.com