Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Brief Introduction to the Mozilla Add-on SDK

1,312 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Brief Introduction to the Mozilla Add-on SDK

  1. 1. Mozilla Add-on SDK
  2. 2. I'm Martin aka freaktechnik ● Information Technology and Electrical Engineering student ● Euphonium player ● Nightingale Media Player developer ● Firefox Add-on developer
  3. 3. Goals ● Basic Firefox Extension Knowledge ● Tools for Development ● Add-on SDK Extension Structure and API
  4. 4. Firefox Extensions 3 Different Types
  5. 5. Traditional Overlay Add-ons ● The old style ● Restart to apply ● Add content by overlaying documents ● XPCOM
  6. 6. Bootstrapped Extensions ● Since Firefox 4 ● Restartless ● Everything is done with XPCOM
  7. 7. Add-on SDK Extensions ● Compile to bootstrapped extensions ● CommonJS environement
  8. 8. Base Knowledge ● JavaScript ● Maybe HTML and CSS ● XPCOM
  9. 9. Tools ● Firefox ● CFX or JPM ● An editor
  10. 10. JPM ● The 'compiler' apart from others ● Node based ● npm install jpm --global
  11. 11. Basic Extension Structure jpm init
  12. 12. Basic Extension Structure ● lib →main modules ● data →misc files ● test →unit test modules ● package.json →add-on metadata
  13. 13. Modules ● Where functionality is ● Prebuilt SDK modules ● 3rd party “libraries“ ● Custom modules for Add-on logic
  14. 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. 15. Custom Modules ● Main loading point module (usually main.js) ● require() to import other modules ● exports object for public symbols
  16. 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. 17. Debugging ● Firefox 31 ● Always enabled via run command ● Content-scripts can't be reached
  18. 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. 19. Future ● JPM release ● Integrated extension toolkit
  20. 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

×