From MozillaWiki
Jump to: navigation, search

Looking to join the Outreachy working on upgrading the Lightbeam extension? You've come to the right place!

We are just starting this project, so there isnt a repo to contribute to yet. But you can help us out with the prototyping for the new lightbeam add-on - either by starting to experiment with how display data or user web extensions to gather the data. Or you might consider submiting a patch to one of other similar projects listed below. Instructions for each of these is provided below.

Don’t be shy! You can get help either via by emailing me at or on IRC: this page shows you how to connect, and you'll find me on the #contentsecurity channel, under the nickname pauljt.

1. Prototype a visualization idea for Lightbeam using your own data

  1. Gather a Lightbeam.json file from lightbeam
  2. Install the Lightbeam add-on
  3. Visit several websites (might want to disable add-blockers)
  4. Save the data using the lightbeam save data feature
  5. Mockup a HTML page which visualises this static data
  6. Upload your code to github and hosted version on github pages (or somewhere of your choosing)
  7. Submit your idea for review: mail me at and we will discuss your prototype


  • The format of the JSON file is explained in this comment [1]
  • Lightbeam captures all network loads in its data, but what we want to display third party loads. For example, if you load, and this page includes an image from, we Lightbeam shows that when loading, a request to is made (i.e. perhaps is a tracker).
  • You might start with trying to replicate the directed force graph similar to lightbeam, and then explore variations. Or you might find a completely new way to visualise the data.
  • Have a look at for project motiviations, and some examples of previous mockups which might inspire
  • Submit as many times as you like - feel free to bounce your ideas of us

2. Prototype a web extension which logs network requests

  1. Read about writing web extensions on the Mozilla Developer Network
  3. Read about the Web Request API
  4. Write a basic Web Extension which logs network requests (how you store or display isn't important for now)
  5. Upload your code to github
  6. Submit your idea for review: mail me at and we will discuss your prototype


  • As an extension, you might try to filter for third-party requests only. A third-party request is a network request which is sent to a different domain to the domain which is displayed in the address bar. For example, if includes an image hosted at, this is a third-party network request.
  • You might look at the blok extension which uses the WebRequest API to block page loads.

3. Submit a patch to an existing Project

While lightbeam is only just getting started, other security related projects could use your help. You can help by working on one of the issues flagged in the following list.

  1. Find an issue that you want to work on from this list of future tasks
  2. Submit your patch for review
  3. Submit your contribution for review: mail me at and we will discuss