Talk: Introduction to JavaScript & Firefox Add-on Development

Learning the basics of JavaScript and Firefox add-on development by building two simple Firefox add-ons.

Last Thursday (7th April) we held the second of our Thursday Night Sessions, which was the first of my software topics: A Very Basic Introduction to JavaScript and Firefox Add-on Development.

We had ~25 people show up, from kids to IT professionals – most with a laptop in hand (and Firefox installed). For many of them, this was their first time programming; for others, it was their first time using JavaScript. By the end of the night, everyone had made their first two Firefox add-ons.

The slides I started off with are available here. They act as an introduction to the talk and to basic JavaScript and programming concepts.

The rest of the talk was learn-by-example and learn-by-doing. I walked everyone through using Mozilla’s Add-on Builder – a webapp that lets you easily code and test Firefox add-ons using the new Add-ons SDK.

Add-on Builder

We built two add-ons:

  • Wikipedia Button – An extremely simple add-on that adds a button to the bar at the bottom of your browser, with the Wikipedia logo. Clicking it will open Wikipedia in a new tab.
  • Translate Selection – A less-simple add-on that adds a “Translate Selection” item to your context menu (right-click menu). When you select some text, right click, and select “Translate Selection”, the text you selected will be translated into English (using Google’s translation service).

This was a 2 hour talk, which included me walking around to talk to and help individuals/small groups. I covered a lot in this talk – so try not to get too intimidated by it. Just keep playing around, and keep learning. In my next software talk (21st April), I’ll be sticking to the basics of JavaScript – this time, we’ll be using it in a web page. And feel free to come in to the workshop on Saturdays (1pm to 5pm) – I’ll be happy to answer any questions.

Resources from this talk:

Additional resources: