0
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• Any...
History• 20th Century: plugins, native addons• 2002: Mozilla 1.0 written in XUL and Javascript• 2004: Firefox 1.0 with a f...
POWER     vsEASE OF DEV
local storage                   Javascript            JSONCSS                     HTML
{    "name": "Telify",    "version": "0.1",    "description": "Click to call",    "background_page": "background.html",   ...
var phoneRe = /^s*((d{2}s?){5})s*$/;var texts = document.evaluate(".//text()[normalize-space(.)!=]", document.body, null, ...
<script>// Global variable accessed by the popupvar telList;chrome.extension.onRequest.addListener(function(request,sender...
<!DOCTYPE html><html>  <style> body { width: 200px; } </style>  <script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/0...
XPCOM      XUL                  Javascript            XBLCSS                        HTML
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/css"  href="chrome://custombutton/content/button.css"?><...
function installButton(toolbarId, id, afterId) {    if (!document.getElementById(id)) {        var toolbar = document.getE...
AKA:“The Chrome way applied to Firefox”
{    "name": "weather-example",    "license": "MPL 1.1/GPL 2.0/LGPL 2.1",    "author": "Alexandre Poirot",    "version": "...
const   data = require("self").data;const   ss = require("simple-storage");const   Request = require("request").Request;co...
COM            C#C++                 ActiveX      Windows API
STDMETHODIMP CExplorerBar::SetSite(IUnknown *punkSite) {    //If a site is being held, release it.    if(m_pSite) {       ...
Fortunately, there’s more...
Accelerators (IE8+)
Pinning API (IE9+)window.external.msSiteModeClearIconOverlay()window.external.msSiteModeSetIconOverlay()window.external.ms...
Do we really need  extensions?
Do we really need  extensions?
last word: don’t abuse      extensions!
Questions?    @erwanelo@zenexity.com
Paris js extensions
Paris js extensions
Paris js extensions
Paris js extensions
Paris js extensions
Paris js extensions
Upcoming SlideShare
Loading in...5
×

Paris js extensions

1,640

Published on

Presentation at Paris JS, November 2011

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,640
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • * Javascript : dans les pages, dans les serveurs, mais pas seulement !\n
  • * Etendre les fonctionalites du navigateur (Google Gears), fonctionalit&amp;#xE9;s de niche (Chrome to Phone)\n* Fonctionalit&amp;#xE9;s transversales sur toutes les pages\n* Exemple de Spellbound: correction orthographique dans Firefox\n
  • * Mozilla 1.0 bloated =&gt; Firefox 1.0 minimaliste mais avec extensions\n* Forte influence de Mozilla - visionnaire a l&amp;#x2019;epoque du Javascript &amp;#x201C;etoiles qui suivent le curseur&amp;#x201D;\n* Extensions Chrome = Aaron Boodman de Greasemonkey\n
  • * Firefox se base sur la meme plate-forme de d&amp;#xE9;veloppement que les extensions (Firefox lui-meme est &amp;#xE9;crit en Javascript !)\n* Google Chrome a ete developpe principalement par des gens qui viennent du monde Mozilla et ont tire profit de l&amp;#x2019;experience de Firefox\n
  • * Chrome: points d&amp;#x2019;extension clairement definis par une API, seuls points d&amp;#x2019;int&amp;#xE9;gration\n* Empeche des developpeurs de faire n&amp;#x2019;importe quoi (stabilite, performances)\n
  • 100% technos web - tr&amp;#xE8;s facile d&amp;#x2019;acc&amp;#xE8;s pour les d&amp;#xE9;veloppeurs web\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • * Firefox: libert&amp;#xE9; totale !\n* API et points d&amp;#x2019;extension existent, mais pas d&amp;#x2019;obligation de se limiter a cela\n* Reecriture de pans entiers du navigateur, desactivation de fonctionalit&amp;#xE9;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&amp;#xE9;crire les interfaces graphiques, n&amp;#xE9;cessaire pour &amp;#xE9;tendre l&amp;#x2019;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&amp;#x2019;etat de prototype\n* Apporte a Firefox la simplicit&amp;#xE9; 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&amp;#x2019;interaction application web / desktop\n =&gt; point d&amp;#x2019;evolution majeur des navigateurs aujourd&amp;#x2019;hui\n* IE = gros progres au niveau du support des standards depuis IE8, IE9, IE10\n =&gt; ajoutez un support d&amp;#x2019;extensions en Javascript !\n
  • \n
  • * Les extensions sont commodes mais ont des inconv&amp;#xE9;niants: installation, mise a jour, depend du navigateur\n* Utilisez du pur web quand c&amp;#x2019;est possible, extensions seulement quand necessaire\n
  • \n
  • Transcript of "Paris js extensions"

    1. 1. Browser Extensions Erwan Loisant <elo@zenexity.com> @erwan
    2. 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. 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. 4. POWER vsEASE OF DEV
    5. 5. local storage Javascript JSONCSS HTML
    6. 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. 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. 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. 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. 10. XPCOM XUL Javascript XBLCSS HTML
    11. 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. 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. 13. AKA:“The Chrome way applied to Firefox”
    14. 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. 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. 16. COM C#C++ ActiveX Windows API
    17. 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. 18. Fortunately, there’s more...
    19. 19. Accelerators (IE8+)
    20. 20. Pinning API (IE9+)window.external.msSiteModeClearIconOverlay()window.external.msSiteModeSetIconOverlay()window.external.msSiteModeActivate()window.external.msIsSiteMode()
    21. 21. Do we really need extensions?
    22. 22. Do we really need extensions?
    23. 23. last word: don’t abuse extensions!
    24. 24. Questions? @erwanelo@zenexity.com
    1. A particular slide catching your eye?

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

    ×