The slides to my talk, which introduced listeners to the extension concept of Firefox and especially explained how to write an Add-on SDK based extension.

1. Mozilla Add-on SDK

2. I'm Martin aka freaktechnik
● Information Technology and Electrical
Engineering student
● Euphonium player
● Nightingale Media Player developer
● Firefox Add-on developer

3. Goals
● Basic Firefox Extension Knowledge
● Tools for Development
● Add-on SDK Extension Structure and API

4. Firefox Extensions
3 Different Types

5. Traditional Overlay Add-ons
● The old style
● Restart to apply
● Add content by overlaying documents
● XPCOM

6. Bootstrapped Extensions
● Since Firefox 4
● Restartless
● Everything is done with XPCOM

7. Add-on SDK Extensions
● Compile to bootstrapped extensions
● CommonJS environement

8. Base Knowledge
● JavaScript
● Maybe HTML and CSS
● XPCOM

9. Tools
● Firefox
● CFX or JPM
● An editor

10. JPM
● The 'compiler' apart from others
● Node based
● npm install jpm --global

11. Basic Extension Structure
jpm init

12. Basic Extension Structure
● lib →main modules
● data →misc files
● test →unit test modules
● package.json →add-on metadata

13. Modules
● Where functionality is
● Prebuilt SDK modules
● 3rd party “libraries“
● Custom modules for Add-on logic

14. SDK Modules
● Split into high-level and low-level API modules
● High-level modules provide simple APIs for
things like
– Page content modification (sdk/page-mod)
– Tabs (sdk/tabs)
– Requests (sdk/request)
– Buttons and toolbars (sdk/ui)
– Panels (sdk/panel)
– Clipboard (sdk/clipboard)
– Passwords (sdk/passwords)

15. Custom Modules
● Main loading point module (usually main.js)
● require() to import other modules
● exports object for public symbols

16. Content Scripts
● Scripts that run in a browser context
● Still run in a separated sandbox
● They have access to the document's DOM
● port for communication

17. Debugging
● Firefox 31
● Always enabled via run command
● Content-scripts can't be reached

18. XPCOM with Jetpack
● const { Cu, Ci, Cr, Cc } =
require('chrome')
● Be nice to the global scope:
const { jsm } =
require('resource://some.jsm');
● You can define components

19. Future
● JPM release
● Integrated extension toolkit

20. Help!
● MDN:
https://developer.mozilla.org/en-US/Add-ons/SDK/
● Sourcecode:
https://github.com/mozilla/addon-sdk
● IRC: irc://irc.mozilla.org/jetpack
● Follow @MozillaCH on Twitter