6. What can I use this for?
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
7. Productivity
Stylish, Greasemonkey
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
8. Printing
JS Print Setup
https://addons.mozilla.org/en-US/firefox/addon/8966/
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
9. Mail
Mail redirection
https://developer.mozilla.org/en/Web-based_protocol_handlers
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
10. Developer Tools
CSS Reloader, Firebug, Proxies
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
11. Contacts
W3C Contacts spec
http://mozillalabs.com/blog/2010/03/contacts-in-the-browser/
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
12. Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
13. AdBlock Plus Delicious
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
14. .xul
.js
Install.rdf .css
Chrome.manifest .png
XPI
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
15. Huh?
.xul
.js
Install.rdf .css
Chrome.manifest .png
XPI
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
16. cssreloader.js
cssreloader.xul
Install.rdf
content locale skin
crome.manifest
/chrome
Folder Structure
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
17. Text
XUL
http://www.csie.ntu.edu.tw/~piaip/docs/CreateMozApp/mozilla-chp-1.html
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
19. Extension
Firefox Extension
Extension
Architecture
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
20. Standard JavaScript fuelIBookmark.*
DOM API’s fuelIBrowserTab.*
XMLHttpRequest extIApplication.*
HTML5 API’s extIConsole.*
extIPreference.*
Text (XPCOM)
APIʼs
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
21. <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>cssreloader@kenneth.io</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)
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
22. <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>cssreloader@kenneth.io</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)
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
23. 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)
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
26. 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)
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
27. 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
}
Yup, that’s all
}();
JavaScript
(crazy stuff)
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
28. Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
29. .htm
.js
.css
manifest.json
.png
CRX
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
30. messages.json
en fr de
_locales
manifest.json cssreloader.js
/
Folder Structure
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
31. Architecture
http://code.google.com/chrome/extensions/overview.html
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
32. Standard JavaScript chrome.extension.*
DOM API’s chrome.browserAction.*
XMLHttpRequest chrome.pageAction.*
WebSockets chrome.bookmarks.*
HTML5 API’s chrome.tabs.*
Webkit API’s Text chrome.windows.*
APIʼs
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
33. {
"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)
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
34. 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, Content Script
initialize: initialize
} (here it goes)
}();
CSSreloader.initialize();
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
35. Chrome vs. Firefox
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
36. XUL vs. HTML
Chrome vs. Content
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
38. // Content Scripts
function 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'); Protocol handler (mailto links)
mailtoStr = rewriteMailtoToGMailUrl(mailtoStr);
nodes[i].setAttribute('href', mailtoStr); (Chrome)
nodes[i].setAttribute('target', "_blank"); http://github.com/Jacopo/chrome-gmail-no-button/
nodes[i].setAttribute('rel', 'noreferrer');
}
}
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
45. 526 users 298 weekly installs
7. january 2010!
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
46. Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
47. Browser as a platform.
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
48. CSS3 HTML5
WebGL WebSockets
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
49. CSS3
CSS3
Site Specific Browsers
SSBʼs
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
50. CSS3
CSS3
Site Specific Browsers
SSBʼs
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
51. CSS3
CSS3
Google Chrome Apps
Demo
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
52. {
"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)
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
53. Music
“Jotify” Spotify client
http://jotify.felixbruns.de//
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
54. Getting started
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
55. addons.mozilla.org/en-US/developers
code.google.com/chrome/extensions
github.com/auchenberg/css-reloader
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010
56. Be the cool kid
Browser extensions at Community Day 2010 @auchenberg kenneth.io
Friday, May 28, 2010