Hack and Remix the Web with Web Extensions

[mozfest-bot]

[ ID ] ad29d9b4-6293-4b7a-a4e3-0f62b08ec47b

[ Submitter's Name ] Kumar McMillan [ Submitter's Affiliated Organisation ] Mozilla [ Submitter's Twitter ] @kumar303

[ Space ] demystify [ Secondary Space ] movement

[ Format ] learning-lab, hands-on

Description

WebExtensions let you customize your web browser in many ways, such as alter content from any website, augment the toolbar, manage windows and tabs, intercept network requests, and much more. Join us for a hands on workshop where we will build our own WebExtensions after a quick introduction to the tools and concepts. WebExtensions are zipped folders comprised of HTML, CSS, and JavaScript. With today’s WebExtension API, it’s possible to create a single extension that will run in Firefox, Chrome, and Opera. No advanced knowledge of WebExtensions is required but experience building a standard web page is recommended.

Prerequisites

• A computer with a keyboard (such as a laptop)
• The following applications are required. Installers will be provided at the workshop but pre-installation is recommended.
  • Firefox Developer Edition
  • NodeJS, version 4.0.0 or higher
  • The web-ext command line tool

    Agenda

• Introduction with projected slides
  • This will be very short, 10 minutes max.
  • This will be optimized to let people zone out and begin hacking as soon as possible -- i.e. the first slide will contain links to docs for self-starters.
  • Instructor will explain how to install the pre-requisites.
  • Helpers will pass around USB drives with installers.
  • Instructor will demo how to develop WebExtensions with the web-ext tool.
  • Instructor will show some examples of fully built WebExtensions.
  • Instructor will present ideas for what to build but will encourage building anything.
• Workshop
  • Instructor will encourage participants to work by themselves or in teams.
  • Multiple WebExtension experts will be available to help participants with specific questions if they are stuck.
• Show and tell
  • If there is time, show off what we built!

    Participants

There will be two instructors who already know how to build WebExtensions but we will recruit more experts to help out if possible. If there are 3 participants, we can work one on one with each participant. If there are 15 or more we will break participants into teams of 3-4 so that they can work together on building an extension. One or more instructors / helpers can make themselves available to each team to answer questions and help them solve problems.

Outcome

Most importantly, everyone will learn how enhance the web browsing experience in powerful ways. Many participants will build a working WebExtension to completion during the workshop. They can use the extension in their own browser or distribute it for others to use. At the very least, each participant would learn the skills needed to continue building their WebExtension on their own time.

[kumar303]

@rpl (Luca Greco) will be co-facilitating this workshop