1-3 hours

_

Add-ons provide a safe, simple, and powerful way to personalize your browsing experience. With WebExtensions APIs, it’s easier than ever to create extensions that can be easily ported to Firefox, Chrome, Edge, and Opera. Through this activity you’ll help connect new developers with an opportunity to create add-ons to solve real problems and make their lives and the web better.

Firefox is an open-source web browser that cares about user control and privacy, and add-ons 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 add-ons for Firefox with WebExtensions. 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.

Through this activity you’ll help connect new developers with an opportunity to create add-ons to solve real problems and make their lives and the web better.

Impact and Metrics

Add-ons provide a safe, simple, and powerful way to personalize your browsing experience. With WebExtensions APIs, it’s easier than ever to create extensions that can be easily ported to Firefox, Chrome, Edge, and Opera. Throwing a workshop helps more people learn how to develop add-ons and help ensure that Firefox remains the most customizable browser.

Campaign Goals

Impact:

  • 125 developers are introduced to and building WebExtensions either online or at regional events.
  • 50 add-ons tagged with mozactivate17 in addons.mozilla.org.
  • 50 social media posts (Twitter, Facebook, blogs, etc.) about WebExtensions add-ons referencing #MozActivate

Strength:

  • 25 Mozillians organize Build Your Own WebExtension workshops

Goals for Your Workshop

  • Workshop is attended by five or more people
  • 100% of attendees successfully complete Part II of the activity
  • 10% or more of attendees go on to complete Part III of the activity
  • 100% of attendees receive the event follow-up email

Finding Participants

Your audience for this event should be people who have written HTML and JavaScript code in the past.

People with more JavaScript experience are encouraged to help beginners get started. If you have experience developing WebExtensions, you may skip the “Build Your First WebExtension” exercise and focus the activities listed in Part III.

Planning Your Workshop

Help contribute to the open web by running a WebExtensions workshop. This activity can also be run solo.

  1. Put an event team together
  2. Choose a date and secure a venue
  3. Choose whether this will be self-facilitated or co-facilitated with someone who has experience developing WebExtensions
  4. Set up the event on the Reps Portal (instructions). Please make sure the initiative is set to “MozActivate” and the functional area indicates “Add-ons”.
  5. Get the word out! Invite your community to the event. If this activity is run together with a Campus Club, they can customize a flyer with your event information for print or electronic distribution.
  6. 2 - 3 days before the event, ask participants to complete the Pre-Event section on their own.

Duration: For duration, we recommend 1 - 3 hours with 5+ attendees. However you may choose to run the workshop as a series over a shorter time but multiple days.

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

You can make a copy and customize the Build Your Own WebExtension Add-on template presentation for your workshop.

There are two options for facilitation:

  1. Self-facilitate without a mentor.
    • If questions arise or if help is needed during the event, feel free to join the IRC channels #extdev and #webextensions to ask the community for support.
  2. Ask a person with experience building WebExtensions to provide guidance to attendees.
    • Need help finding an experienced mentor? Send an email to cneiman [at] mozilla [dot] com with the link to your Reps event page and anticipated number of attendees.
    • Depending on location and availability, Mozilla might be able to send a staff member or volunteer expert to co-facilitate.

Event Flow

Pre-Event

  1. Make sure you are using the most recent version of Firefox Developer Edition. Download copies of Firefox (Windows, Linux, Mac OS X) before the event to make sure participants don’t need to spend too much time installing them.
  2. In Firefox, go to addons.mozilla.org and browse Featured Extensions and other categories that look interesting.
    • Install 1 - 2 extensions, test how they work, and leave a review.
    • Think about the extensions that were discovered and what you liked or didn’t like about the extensions you installed.

Part I

  • Give a quick introduction to attendees about what we are doing and why it is important.
    • “Welcome to the [name of event]! I am [name]. Today, we are going to customize our Firefox browsers by developing our own add-ons 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 attendees to tweet about their attendance. Here is a suggested message:
    • I’m customizing @Firefox by building my own #WebExtensions! #MozActivate
  • Ask participants if they already use add-ons. If they do, ask them to share what add-ons they use and how they are used.

Part II

  1. Now it’s your turn. Using the tutorial on the Mozilla Developer Network, build your first WebExtension.
  2. After creating your first WebExtension, move on to Step 5 or follow the tutorial to build a more complex WebExtension.
  3. Once everyone in the group has made a WebExtension, take a few minutes to debrief. While you debrief, you can learn more about the anatomy of a WebExtension, explore more WebExtension examples, continue to Part III, or conclude the event.

Part III (Bonus!)

  1. As a group, brainstorm ideas for the kind of add-on you want to build using WebExtensions. You can find samples of add-ons users have requested here.
    • The list of currently supported JavaScript APIs and WebExtensions examples can provide inspiration.
    • Ask Chrome users to check if their favorite extensions are available in Firefox. If the extensions aren’t available, participants can try to build one for Firefox.
    • Build a WebExtension that solves any of your real-world problems, or that customizes the browser in a way that benefits you personally.
  2. Publish your WebExtension to addons.mozilla.org.
    • Once you have submitted your add-on, hover on Tools, then select “Manage My Submissions.”
    • From the actions menu, select “Edit Information.”
    • Then click the “Edit” button on the Basic Information section.
    • Add the tag mozactivate17 to your submission.
    • Click the “Save Changes” button.
  3. Once your add-on has been approved (which might take a while), tweet a link to your published WebExtension! Here is a suggested message:
    • I made an add-on using @MozWebExt for @mozamo! Check it out here: #MozActivate
  4. Encourage attendees to continue the conversation by following @MozWebExt on Twitter, joining the mailing list dev-addons@mozilla.org, joining the IRC channels #addons and #extdev, joining the Telegram group @addons, and joining the Add-ons Discourse Forum.

Event Follow-Up

The day after the event, send a follow-up email to the attendees. Here is a template that you can customize to best reflect your event:

Thanks for attending [name of event]! I hope you had a great time learning how to create add-ons for Firefox using WebExtensions APIs.

We want to hear your thoughts about the event!

Please take a few minutes to fill out the survey here.

Would you like a copy of the slides from the event?

You can get a copy here. (NOTE: Please update the link to your customized presentation.)

Want to join the Mozilla add-on developer community?

If you enjoyed creating your own addon, the dev-addons@mozilla.org mailing list, IRC channels #addons, #webextensions and #extdev, Telegram group @addons, and Add-ons Discourse Forum are full of people just like you! Join these channels to ask questions, brainstorm ideas, and stay informed.

Also, keep your eyes on the Add-ons Blog to learn more about what’s going on in the world of add-ons.

Are you interested in exploring other ways to contribute to the add-ons community?

Visit our wiki to learn more.

Thanks again! We look forward to seeing you next time.

Output

  • Fill out the post-event metrics on the event page you set up on the Reps portal.
  • Tell us about your event. This can be before or after. 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!
    • The Discourse thread can be found here

Other Resources

Tutorials