browser extensions in mozilla firefox & google chrome
TRANSCRIPT
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Browser extensions.Kenneth Auchenberg
kenneth.ioBrowser extensions at Community Day 2010 @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
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
What can I use this for?
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
ProductivityStylish, Greasemonkey
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
PrintingJS Print Setup
https://addons.mozilla.org/en-US/firefox/addon/8966/
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
MailMail redirection
https://developer.mozilla.org/en/Web-based_protocol_handlers
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Developer ToolsCSS Reloader, Firebug, Proxies
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
ContactsW3C Contacts spec
http://mozillalabs.com/blog/2010/03/contacts-in-the-browser/
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
AdBlock Plus Delicious
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
.css.png
.xul.js
Install.rdfChrome.manifest
XPI
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
.css.png
.xul.js
Install.rdfChrome.manifest
XPI
Huh?
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
/chrome
Install.rdf
crome.manifest
cssreloader.js
cssreloader.xul
skinlocalecontent
Folder Structure
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
XUL
Text
http://www.csie.ntu.edu.tw/~piaip/docs/CreateMozApp/mozilla-chp-1.html
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
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>
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Architecture
Extension
Firefox Extension
Extension
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
APIʼs
Text
fuelIBookmark.*
fuelIBrowserTab.*
extIApplication.*
extIConsole.*
extIPreference.*
(XPCOM)
Standard JavaScript
DOM API’s
XMLHttpRequest
HTML5 API’s
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
<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>
<!-- Firefox --> <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)
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
<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>
<!-- Firefox --> <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)
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
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)
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
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)
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
JavaScript(crazy stuff)
Yup, that’s all
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 }
}();
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
.css.png
.htm.js
manifest.json
CRX
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
/
manifest.json cssreloader.js_locales
Folder Structure
en fr de
messages.json
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Architecture
http://code.google.com/chrome/extensions/overview.html
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
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
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
{ "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)
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Content Script(here it goes)
CSSreloader = function() {
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();
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Chrome vs. Firefox
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
XUL vs. HTML
Chrome vs. Content
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", "Example Mail");
Protocol handler (mailto links)(Firefox)
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
// 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/
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Community
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
addons.mozilla.org
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
chrome.google.com/extensions
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
chrome.google.com/extensions
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
298 weekly installs526 users
7. january 2010!
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Browser as a platform.
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
CSS3 HTML5
WebSocketsWebGL
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Site Specific BrowsersSSBʼs
CSS3CSS3
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Site Specific BrowsersSSBʼs
CSS3CSS3
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Google Chrome AppsDemo
CSS3CSS3
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
{ "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)
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Music“Jotify” Spotify client
http://jotify.felixbruns.de//
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Getting started
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
addons.mozilla.org/en-US/developers
code.google.com/chrome/extensions
github.com/auchenberg/css-reloader
Friday, May 28, 2010
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Be the cool kid
kenneth.ioBrowser extensions at Community Day 2010 @auchenberg
Friday, May 28, 2010