Firefox is an open-source web browser that cares about user control and privacy, and extensions provide a safe, simple, and powerful way to personalize your browsing experience. From blocking ads to organizing tabs, add-ons help make Firefox your own.

It’s very easy to create extensions for Firefox using WebExtensions APIs. This Web-based technology framework offers a powerful way to create browser extensions that can be easily ported to Chrome, Opera, and Edge, and you only need to know HTML, JavaScript and CSS to build them.

In this series of workshops, you’ll help connect new developers with an opportunity to create extensions to solve real problems and make their lives and the web better.

Planning Your Workshop

Read the event guide on how to set up an event page and how to organize an event. For this campaign, we recommend scheduling a series of 3 workshops and dedicating 1.5 - 3 hours for each workshop. Be sure to complete the actions listed in the Pre-Event section 2 - 3 days before hosting the event.

Attendees should bring their own laptops to the workshop, or the workshop should be held in a computer lab.

Interested in learning more about extension development or sharing additional information with workshop attendees? See the Resources section below.

Flow of Workshops

Pre-Event

To ensure that your participants get to focus on building extensions during the workshop

  • Ask registered participants to explore addons.mozilla.org, install a few extensions, and see how they work.

  • Make sure that computers being used for the workshop have the most recent version of Firefox Developer Edition (available for Windows, Linux, or Mac OS X). If attendees are bringing their own computers, ask them to install Firefox Developer Edition.

First Meeting: Introduction to Browser Extensions

The focus of this meeting will be to introduce a general audience to browser extensions and the WebExtensions API. You can make a copy of the presentation Introduction to Browser Extensions and customize it for your group.

We recommend the following agenda for this event:

  • Introduce participants to browser extensions and why they are important. Here is some sample language you can use:

    “Welcome to the [name of event]! I am [name]. Today, we are going to customize our Firefox browsers by developing our own extensions to solve real problems in our own lives. Add-ons are a great way to add extra features to your browser, like blocking time-wasting websites during study hours, or turning images into cat pictures. With WebExtensions APIs, it’s now easier to create add-ons that are compatible with Firefox, Chrome, and Opera. Add-ons help keep users to be in control of their online experience, so your support in building them and the community around them matter.”

  • Ask participants to share their experience using browser extensions. What are their favorite extensions and what do those extensions do?
  • Walk participants through the tutorial for building the borderify extension on MDN web docs.
  • Discuss the anatomy of an extension.
  • Have participants follow the MDN tutorial for building a more complex extension.

At the end of the session, tell attendees when the next event in the series will be held and encourage them to sign up for it in advance. See the ‘Event Followup’ section for more details about how to follow up after your event.

Second Meeting: APIs in Action, Part 1

During the second event, participants will be introduced to WebExtensions APIs that can perform basic functionalities. After reviewing the functionalities of these APIs, you will help the group put them in action to create an extension for Firefox. You can make a copy of the presentation APIs in Action, Part One, and share it with your group.

We recommend the following agenda for this meeting:

  • 1st half of the meeting: provide overviews and demonstrations of the following topics:
Topic Extension Examples Videos
Content scripts Borderify Content Script Tutorial
browserAction API Bookmark It  
pageAction API Chill Out pageAction tutorial
  Apply CSS  
  IP-Finder  
  Inshorts  
  • 2nd half of the meeting: ask attendees to put these APIs to use by creating an original extension or by building one of the examples listed in the table above.

💡 If your attendees need help coming up with an idea for building an original extension, ask them to visit the repository of extension ideas for inspiration.

⭐️ Ask attendees who build an original extension to submit it to addons.mozilla.org. Once it has been submitted, they can navigate to “Manage My Submissions” and “Edit Information” to tag their extension with ‘#mozactivate17.’ Be sure to click “Save Changes” after the tag it added!

At the end of the session, tell attendees when the next event in the series will be held and encourage them to sign up for it in advance.

Third Meeting: APIs in Action, Part 2

During the third event, participants will explore how their extensions can use the tabs, sidebarAction, and webRequest APIs to interact with the browser. You can make a copy of the presentation APIs in Action, Part Two, to customize and share with your group.

We recommend the following agenda for this meeting:

  • 1st half of the meeting: provide an overview and demonstration of the following topics:
Topic Extension Examples Videos
Tabs API Tabs Tabs Tabs Getting Started with Tabs
  Contextual Identities  
  Beastify  
sidebarAction API Annotate Page How to create a Sidebar Menu
  Context Menu Demo How to Create a Context Menu
  Facebook Messenger as a Sidebar  
webRequest API Stored Credentials  
  User Agent Rewriter  
  • 2nd half of the meeting: ask attendees to put these APIs to use by creating an original extension or by building an example from MDN web docs.

💡 If your attendees need help coming up with an idea for building an original extension, ask them to visit the repository of extension ideas for inspiration.

⭐️ Ask attendees who build an original extension to submit it to addons.mozilla.org. Once it has been submitted, they can navigate to “Manage My Submissions” and “Edit Information” to tag their extension with ‘#mozactivate.’ Be sure to click “Save Changes” after the tag it added!

Resources

Do you need help getting started with extension development or want to learn as much as possible? Check out these fantastic resources!

🎥 Building Browser Extensions by Viswaprasanth Ks Video Series

🎥 WebExtensions Tutorials by Trishul Goel Video Series

💃🏽 More Examples of APIs in Action on MDN web docs

💃🏽 Extension Examples and Walkthroughs by Viswaprasanth Ks

🔍 Let’s Write a Web Extension by Blake Winton

🔍 Create a Simple WebExtension by David Wals

👍 Browser Compatibility Table for APIs

Event Follow-Up

  • Immediately after every event, share the link to the impact form with your attendees: mzl.la/howwasit. While you’re at it, why not also send a copy of your slide deck and invite the attendees to join the Telegram group @addonchats?

  • Fill out the post-event metrics on the event page you set up on the Reps portal.

  • Tell us about your event on Discourse. We love to hear about upcoming plans, and of course love to hear about what was achieved at the event with a picture or two!

Acknowledgements

Thank you to Viswaprasanth Ks, Santosh Viswanatham, Trishul Goel, Karthic Keyan, Andre Garzia, Daniele Scasciafratte, and Michael Kohler.