• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Paris js extensions
 

Paris js extensions

on

  • 1,694 views

Presentation at Paris JS, November 2011

Presentation at Paris JS, November 2011

Statistics

Views

Total Views
1,694
Views on SlideShare
1,690
Embed Views
4

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 4

http://a0.twimg.com 4

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • * 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

Paris js extensions Paris js extensions Presentation Transcript

  • Browser Extensions Erwan Loisant <elo@zenexity.com> @erwan
  • 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!
  • 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
  • POWER vsEASE OF DEV
  • local storage Javascript JSONCSS HTML
  • { "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
  • 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
  • <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
  • <!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
  • XPCOM XUL Javascript XBLCSS HTML
  • <?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
  • 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
  • AKA:“The Chrome way applied to Firefox”
  • { "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
  • 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
  • COM C#C++ ActiveX Windows API
  • 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;}
  • Fortunately, there’s more...
  • Accelerators (IE8+)
  • Pinning API (IE9+)window.external.msSiteModeClearIconOverlay()window.external.msSiteModeSetIconOverlay()window.external.msSiteModeActivate()window.external.msIsSiteMode()
  • Do we really need extensions?
  • Do we really need extensions?
  • last word: don’t abuse extensions!
  • Questions? @erwanelo@zenexity.com