browser extensions in mozilla firefox & google chrome

kenneth.ioBrowser extensions at Community Day 2010 @auchenberg

Browser extensions.Kenneth Auchenberg


Friday, May 28, 2010

kenneth.ioBrowser extensions at Community Day 2010 @auchenberg kenneth.ioBrowser extensions at Community Day 2010 @auchenberg

Twitter Blog

Browser extensions.Kenneth Auchenberg



Browsers



Extensions



What can I use this for?




ProductivityStylish, Greasemonkey



PrintingJS Print Setup

https://addons.mozilla.org/en-US/firefox/addon/8966/





MailMail redirection

https://developer.mozilla.org/en/Web-based_protocol_handlers





Developer ToolsCSS Reloader, Firebug, Proxies



ContactsW3C Contacts spec

http://mozillalabs.com/blog/2010/03/contacts-in-the-browser/





AdBlock Plus Delicious



.css.png

.xul.js

Install.rdfChrome.manifest

XPI



.css.png

.xul.js

Install.rdfChrome.manifest

XPI

Huh?



/chrome

Install.rdf

crome.manifest

cssreloader.js

cssreloader.xul

skinlocalecontent

Folder Structure



XUL

Text

http://www.csie.ntu.edu.tw/~piaip/docs/CreateMozApp/mozilla-chp-1.html





XML-based User-Interface Language

<overlay xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script type="application/x-javascript" src="chrome://cssreloader/content/cssreloader.js" />

<menupopup id="menu_viewPopup"> <menuitem id="menu_viewpopup_cssreloader" insertbefore="viewFullZoomMenu" label="Reload CSS" /> </menupopup> <menupopup id="contentAreaContextMenu"> <menuitem id="menu_contextmenu_cssreloader" insertafter="context-reload" label="Reload CSS" /> </menupopup> <keyset id="mainKeyset"> <key id="cssReloaderActivate" keycode="VK_F9" oncommand="CSSreloader.reload();" /> </keyset>

</overlay>


http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml

http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul





Architecture

Extension

Firefox Extension

Extension



APIʼs

Text

fuelIBookmark.*

fuelIBrowserTab.*

extIApplication.*

extIConsole.*

extIPreference.*

(XPCOM)

Standard JavaScript

DOM API’s

XMLHttpRequest

HTML5 API’s


<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>[email protected]</em:id> <em:name>CSS Reloader</em:name> <em:version>1.0.2</em:version> <em:description>Reload your CSS without reloading the page. Use F9, o... </em:description> <em:creator>Kenneth Auchenberg</em:creator> <em:homepageURL>http://kenneth.io/</em:homepageURL>

 <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.5</em:minVersion> <em:maxVersion>3.6.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF> Install.rdf

(metadata)


http://www.w3.org/1999/02/22-rdf-syntax-ns#

http://www.w3.org/1999/02/22-rdf-syntax-ns#

http://www.mozilla.org/2004/em-rdf#

http://www.mozilla.org/2004/em-rdf#

mailto:[email protected]

mailto:[email protected]

http://kenneth.io

http://kenneth.io


content cssreloader chrome/content/

overlay chrome://browser/content/browser.xul chrome://cssreloader/content/cssreloader.xul

locale cssreloader en-US chrome://cssreloader/locale/en-US

style chrome://browser/content/browser.xul chrome://cssreloader/skin/style.css

chrome.manifest(file references)



Frameworks



CSSreloader = function() {

function reload() { var elements = window.content.document.querySelectorAll('link[rel=stylesheet][href]'); elements.forEach(function(element, index, array) { var h = element.href.replace(/[?&]cssReloader=([^&$]*)/,''); element.href = h + (h.indexOf('?')>=0?'&':'?') + 'cssReloader=' + (new Date().valueOf()); }); } return { reload : reload }

}();

JavaScript(crazy stuff)



JavaScript(crazy stuff)

Yup, that’s all


function reload() { var elements = window.content.document.querySelectorAll('link[rel=stylesheet][href]'); elements.forEach(function(element, index, array) { var h = element.href.replace(/[?&]cssReloader=([^&$]*)/,''); element.href = h + (h.indexOf('?')>=0?'&':'?') + 'cssReloader=' + (new Date().valueOf()); }); } return { reload : reload }

}();



.css.png

.htm.js

manifest.json

CRX



/

manifest.json cssreloader.js_locales

Folder Structure

en fr de

messages.json



Architecture

http://code.google.com/chrome/extensions/overview.html





APIʼs

Text

chrome.extension.*

chrome.browserAction.*

chrome.pageAction.*

chrome.bookmarks.*

chrome.tabs.*

chrome.windows.*

Standard JavaScript

DOM API’s

XMLHttpRequest

WebSockets

HTML5 API’s

Webkit API’s



{ "name": "CSS Reloader", "version": "1.0", "description": "CSS Reloader is an extension that allows you to reload all the .... ", "permissions": [ "http://*/*", "https://*/*" ], "icons": { "48": "cssreloader_icon_48.png", "128": "cssreloader_icon_128.png" }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["cssreloader.js"] } ]} manifest.json

(metadata)



Content Script(here it goes)


function initialize() { document.addEventListener("keyup", onWindowKeyUp, false); } function reload() { var elements = document.querySelectorAll('link[rel=stylesheet][href]'); for (var i = 0, element; element = elements[i]; i++) { var href = element.href.replace(/[?&]cssReloader=([^&$]*)/,''); element.href = href + (href.indexOf('?')>=0?'&':'?') + 'cssReloader=' + (new Date().valueOf()); } } function onWindowKeyUp(event) { if(event.keyCode == 120) { reload(); } } return { reload : reload, initialize: initialize }

}();

CSSreloader.initialize();



Chrome vs. Firefox




XUL vs. HTML

Chrome vs. Content



navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", "Example Mail");

Protocol handler (mailto links)(Firefox)


http://livepage.apple.com/

http://livepage.apple.com/


// Content Scriptsfunction rewriteMailtosOnPage() { // Find all the A mailto links. var result = document.evaluate( '//a[contains(@href, "mailto:")]', document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); rewriteMailtos(result); // Find all the AREA mailto links. var result = document.evaluate( '//area[contains(@href, "mailto:")]', document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); rewriteMailtos(result);}

function rewriteMailtos(allofthem) { var item; var nodes = []; // cannot change the NODE_ITERATOR nodes' attributes in this loop itself // since iterateNext will invalidate the state; Need to store temporarily. while (item = allofthem.iterateNext()) { nodes.push(item); } for (var i = 0; i < nodes.length; i++) { var mailtoStr = nodes[i].getAttribute('href'); mailtoStr = rewriteMailtoToGMailUrl(mailtoStr); nodes[i].setAttribute('href', mailtoStr); nodes[i].setAttribute('target', "_blank"); nodes[i].setAttribute('rel', 'noreferrer'); }}

Protocol handler (mailto links)(Chrome)

http://github.com/Jacopo/chrome-gmail-no-button/





Community




addons.mozilla.org



Statistics



chrome.google.com/extensions



298 weekly installs526 users

7. january 2010!



Browser as a platform.




CSS3 HTML5

WebSocketsWebGL



Site Specific BrowsersSSBʼs

CSS3CSS3



Google Chrome AppsDemo

CSS3CSS3



{ "name": "Community Day 2010", "version": "3", "icons": { "24": "24.png", "128": "128.png" }, "launch": { "web_url": "http://communityday.in/copenhagen" }, "permissions": ["geolocation"], "web_content": { "enabled": true, "origin": "http://communityday.in", "paths": [ "/copenhagen/" ] }}

manifest.json(web app metadata)


http://communityday.in/copenhagen

http://communityday.in/copenhagen

http://communityday.in

http://communityday.in


Music“Jotify” Spotify client

http://jotify.felixbruns.de//





Getting started




addons.mozilla.org/en-US/developers

code.google.com/chrome/extensions

github.com/auchenberg/css-reloader



Be the cool kid




Thanks


browser extensions in mozilla firefox & google chrome

Technology

auchenberg kenneth

community day

extensions browser extensions

metadata browser extensions

frameworks browser extensions

proxies browser extensions

references browser extensions

browsers browser extensions