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.
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.
Planning Your Workshop
Help contribute to the open web by running a WebExtensions workshop. This activity can also be run solo.
- Read the event guide on how to set up an event page and how to organize an event.
- Choose whether this will be self-facilitated or co-facilitated with someone who has experience developing WebExtensions
- 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.
- 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:
- 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.
- 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.
- 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.
- 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.
- 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.
- Now it’s your turn. Using the tutorial on the Mozilla Developer Network, build your first WebExtension.
- After creating your first WebExtension, move on to Step 5 or follow the tutorial to build a more complex WebExtension.
- 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!)
- 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.
- 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.
- 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
mozactivate17to your submission.
- Click the “Save Changes” button.
- 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
- Encourage attendees to continue the conversation by following @MozWebExt on Twitter, joining the mailing list firstname.lastname@example.org, joining the IRC channels #addons and #extdev, joining the Telegram groups @addons and @addonschat, and joining the Add-ons Discourse Forum.
Directly at the end of the activity
Immediately after the event don’t forget to share the link to the impact form with your attendees:
Remember this is how you’ll know who attended your event, and if you successfully inspired them to action! We recommend adding it to your final slide AND emailing it out after the event.
Event Follow-Up (one day after)
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 this impact form 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 add-on, the email@example.com 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.
- 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
Tutorials & Other Resources
- Your first WebExtension
- Let’s Write a Web Extension by Blake Winton
- WebExtensions: An Example Add-on Repository with Test Harnesses by standard8
- Create a Simple WebExtension by David Walsh
- Building Firefox Add-ons with Web Extensions by Viswaprasath Ks