Posted in 2017, Lightbeam, Outreachy

Lightbeam – ‘tale of 2 stores’

Thanks to Bianca, my fellow Outreachy-Lightbeam project partner for coining the above title in her blog and asking me questions to explain about the bug(PR) I recently fixed for Lightbeam. I  started explaining her last evening via quick diagrams and I already had an idea to make my next blog post colourful 😉

I have been inspired by Lin Clark’s code cartoons and Mariko Kosaka who always draw and make technical reading fun! Here is an attempt to write a post and explain Lightbeam’s store architecture via diagrams 🙂

To revamp Lightbeam into a web extension we decided to follow the following architecture:


A web extension consists of a collection of files and we employed the following directory structure to achieve the above architecture:


We were able to chalk out an MVP soon, everything behaved as expected, until we found this bug.

  • Open Lightbeam
  • Open console
  • Clear the storage manually through the console:'websites').then(()=>console.log('removed')).catch(err=>console.log(err))
  • Also set store._websites=null manually through the console
  • Refresh the page – graph disappears
  • Refresh the page again, graph appears with old values

Thanks to Jonathan for pointing out that there were two store instances created and thus began – ‘tale of 2 stores’.

Following was the code implementation to achieve the above architecture:

The problem with this approach was that store.js file was loaded from two different places and that’s how we ended up having two store instances.

In other words, this was the problem:


Now to debug the above specified bug:

  • capture.js had one store instance because of store.js loaded via background script
  • lightbeam.js had another store instance because of store.js loaded via the script tag
  • index.html page was loaded and lightbeam.js got the required websites to display via getAll() from it’s store instance
  • Next, web extension storage was manually cleared via and store._websites was explicitly set to null
    • in the first page load, there was nothing to display because the getAll() returned nothing from it’s store instance (because of the above manual deletion)
    • on second page load, capture.js had done a setFirstParty() call to it’s store instance which in turn wrote to the
      • capture.js is triggered when a tab (re)loads
      • capture.js‘s store instance had its copy of _websites already populated (when the manual store._websites=null was done, it was done on lightbeam’s store instance) and setFirstParty() used this already populated _websites value and wrote to the
  • This is how the visualisations appeared back on the second page load

To fix this bug, we now have storeChild.js which acts as an interface, or is the only point to talk to the background store.js. With the child and parent architecture, the parent will always be in charge of when the write happens and so will serialise the writes which will behave like a locking database.


The page script storeChild.js talks to the background script store.js via message passing.

Posted in 2017, Lightbeam, Outreachy

Lightbeam 2.0 – MVP

It’s been 4 weeks now, since we started working on Lightbeam 2.0. And we have an MVP!

Here are my earlier posts on Outreachy and Lightbeam:

The first milestone in this internship is this initial MVP. Every time, I and Bianca went astray from this milestone, we had our mentor Jonathan to guide and help us focus towards this direction.

Here is the summary of what’s been achieved so far:

Setup the basic web extension


The Backend

  • Setup the communication with the browser and capture the first & third party websites
  • Create the capture & viz objects and the store API
    • capture object stores into the store object
    • viz object draws to a canvas
    • The lightbeam page code reads from the store, draws with the viz to a canvas in index.html

The Frontend

  • UI
    • In this initial MVP, the goal was to replicate the old UI. CSS Grid layout is used in the new codebase
  • Visualisations
    • While visualisations will be a major part in the post-MVP, in this initial MVP we are drawing small circles using the Canvas API to show the first and the third party websites

Overall, the whole team is very happy with the work and the progress done so far.

Presenting, Lightbeam 2.0

Screen Shot 2017-06-18 at 18.46.11


Posted in 2017, Lightbeam, Outreachy

Lightbeam – Q & A

The Mozilla Learning Network rallies and connects leaders who want to advance the promise of the Internet for learning in a networked world. This is done by fuelling new approaches to digital learning through Mozilla Hives, Clubs and Gigabit cities.

As part of the Internet Health Basics learning activity, there is a module on Privacy and Security and there is a chapter on tracking cookies using Lightbeam.

The objective of this course is to:

  • Understand and explain cookies and how they track users’ Web browsing.
  • Understand and use online tools such as Lightbeam to monitor online tracking.
  • Reflect on distinguishing between appropriate and invasive uses of tracking.

My mentor at Outreachy – Lightbeam, Luke Crouch, conducts web literacy classes at the Tulsa Library. Recently, he conducted a session on Lightbeam and below is the summary of the answers from the questionnaire filled by the attendees.

Q: Have you ever used a tool like Lightbeam before?

  • Turned off the cookies button
  • OpenDNS which shows domains contacted

Q: If you had to summarise what Lightbeam does, what would you say?

  • Adds to the awareness of how little privacy we have
  • Informs users of tracking activity and who is tracking
  • Easy to view a centralised map of all cookie connections encountered during a browsing session
  • Visual display of Internet locations contacted
  • Lists your cookies in a graph
  • Visualisation tool for showing links between cookies and sites

Q: Was there anything that you found especially valuable? 

  • Graph was valuable along with link identification by colour.
  • Visual of the volume of the connection activity was interesting
  • Good to see logos
  • An eye opener

Q: Was there anything that you found especially confusing?

  • I would prefer the ability to set the graph size
  • Coloured lines were bit confusing

Q: Would you use Lightbeam again?

  • Yes
  • No
  • Maybe

Q: What habits can you develop – and what strategies and tools can you use – to prevent yourself from being followed online?

  • Use private browsing with tracking protection
  • Delete cookies
  • Clear the history
  • Incognito mode

Q: How might you learn more about online privacy? What would you search for?

  • Wouldn’t try to learn online because I don’t trust a lot of what’s out there. I learned from reading a book ‘I know who you are and know what you did
  • Search for privacy and legislative actions. Browse computer science and technology online reports and magazines.
  • Search for online privacy best practices
  • Go to the Tulsa library class 🙂

The above Q & A sheds light on how users find Lightbeam to be an eye opener in the web privacy space. This survey is also useful for us to improve the current UI/UX issues.

The existing Firefox addon will be revamped using web extensions during the course of my Outreachy internship. If you haven’t tried Lightbeam yet, you can instal this Firefox addon and leave us your feedback.

It’s time to make the Internet healthy 🙂

Posted in 2017, Lightbeam, Outreachy

Lightbeam – why & what

Lightbeam is a key tool for Mozilla to educate the public about privacy.

In this blog post, you will know why I chose Lightbeam and what does it do.

As I was browsing through the Outreachy project list, Lightbeam caught my attention for the following reasons:

  • front-end web development (all things JavaScript)
  • visualisations (D3.js)
  • a project from Mozilla (healthy, open and accessible Internet for all people)

But I was not sure about the following:

  • web privacy
  • security engineering

JavaScript topped the list and I decided to give it a try. I must say, I am now very cautious about the online third party trackers and care for web privacy and security.

The key part of this project (internship) is to convert the existing Firefox add-on to a web extension and explore simpler ways to convey complex privacy and security concepts to all  Firefox users.

Web security & privacy are vast topics  and after playing around with a few keywords, I found these two interesting papers online:

A healthy internet is secure and private. While web tracking isn’t 100% evil (personal data can make your browsing more efficient; cookies can help your favourite websites stay in business), its workings remain poorly understood. Using interactive visualisations, Lightbeam’s main goal is to show web tracking, aka, show the first and third party sites you interact with on the Web.

Your personal information is valuable and it’s your right to know what data is being collected about you – your age, income, family’s ages and income, medical history, dietary habits, favourite web sites, your birthday…the list goes on. The trick is in taking this data and shacking up with third parties to help them come up with new ways to convince you to spend money, sign up for services, and give up more information.  It would be fine if you decided to give up this information for a tangible benefit, but you may never see a benefit aside from an ad, and no one’s including you in the decision.

One key area Lightbeam can help you in making the difference is in user control – deciding who can collect your data.

Lightbeam is your guide to help you surf the web while keeping your privacy intact.




Posted in 2017, LearningItMyWay, Random

Yesterday, I launched my website! Yayyy… after months of purchasing the domain name, here it is..

It is a Hugo powered website and hosted on Github. I started with Jekyll, but ended up using Hugo. Thanks to my Groovy on Grails knowledge, it helped me with setting up and understanding Hugo.

For those of you wondering what’s Jekyll or Hugo, here is an interesting article. In short, both Jekyll & Hugo are static website generators.

To start with, I am using the Kube theme for my website. I would continue to use this space (wordpress) for blogging. For now, I intend to use to document my ‘Today I Learned’ series of articles.

Following are the (must) to-dos for my website:

  • SEO
  • Pagination for blog posts with next and previous links
  • Sort blog posts based on date
  • List all categories, tags etc for the posts
  • Logo, favicon
  • Google Analytics
  • Page to showcase my talks/presentations

I guess, I would figure out remaining things as I go. ‘Better late than never’, I now have my personal website 🙂

Happy Monday!