day 3: draw it out

i’m working on a patch for adding a button that lights up if there’s a playable URL in the page.

jared sent some links and explanations, but i also needed to draw it out.



“OK, so you’ve got a content script, that runs in each web page, and your addon code, which isn’t in the page and can’t see it

So you’ll want your content script to always load on every page, and do a querySelectorAll check for the youtube href*= selectors used by the context menu code

Once the content script (loaded by pageMod) finds a hit in the page, it should send a message back to the main addon script, telling it to light up the button

We’ll also need to detect when a new page loads and un-highlight the button (hopefully you can do this from the addon, without involving a content script, but I’m not sure)”


  1. get the script in the page to send over a message, and have the addon code just console.log something when it gets the message so you can convince yourself messaging is working. I think self.port is the addon SDK wrapper around postmessage.
  2. once you’re able to send messages over, then you can have your content script look for youtube links in the page, and send over a message that says if it found a match
  3. and then you can update the addon code to toggle the button state based on whether a matching link was found


sdk guide to content scripts

port object



day 1: learn all the words

i started my internship today! many etherpads and video calls and IRC windows. here are my first tasks:

  1. review XUL school on mozilla developer network. XUL is the language/framework for developing firefox extensions.
  2. review issues on, an early prototype that i’ll be working on with a small but mighty team. start digging into issue #20, “doesn’t work for links

here’s jared telling me how to get started.

Screen Shot 2016-05-23 at 4.23.57 PM

i’m interested in the structure of a distributed project like this. seems like the smaller the team/project, the less structure is needed. as projects get bigger, github issues need to be better maintained, style guidelines more strictly adhered to, deadlines created and met, meetings guided by agendas, etc. regardless of size, it’s amazing that so much can get done with so many people sitting in their own homes, checking in via IRC, video chats, and shared checklists.

anyway. so far, i’ve found that there are lots of words and concepts i don’t know. so, glossary, compiled from various parts of mdn:

gecko – “Gecko is the name of the layout engine developed by the Mozilla Project. It was originally named NGLayout. Gecko’s function is to read web content, such as HTML, CSS, XUL, JavaScript, and render it on the user’s screen or print it.” “Gecko SDK is a collection of header files and tools used to develop general XPCOM components which add functionality to the existing platform”

XULRunner – “XULRunner is a framework which can be used to run standalone or embedded applications based on the Mozilla framework” “includes the Gecko rendering engine, the Necko networking library, and several other components that provide OS-independent file management, accessibility, and localization, among others.”

webextensions – “WebExtensions are the future of Firefox add-ons. If you can use the WebExtensions API, it’s the best choice.”

sdk – “software development kit is typically a set of software development tools that allows the creation of applications for a certain software package, software framework, hardware platform, computer system, video game console, operating system, or similar development platform.”

add-on vs. extension – all extensions are add-ons, but add-ons can also be themes, plugins, language packs

elements of an add-on

  • chrome.manifest- chrome.manifest file tells Firefox where to look for chrome files; the chrome is composed of 3 sections:
    • content,
    • locale,
    • skin
  • install.rdf- holds unique IDs of the add-on

context-menu – “Instead of manually adding items when particular contexts occur and then removing them when those contexts go away, you bind items to contexts, and the adding and removing is automatically handled for you. Items are bound to contexts in much the same way that event listeners are bound to events.”

classic menu vase who knows, who cares? CLASSIC MENU VASE

summer: outreachy, amc, dark ecologies, zine dreams

well. it’s been a helluva semester. i’m working on a longer post about what this year has been for me. but in the meantime: summer plans!

i’m soso thrilled to be an outreachy intern with mozilla this summer! outreachy “helps people from groups underrepresented in free and open source software get involved.” so a bunch of free and open source software projects offer internships, and you apply, and then you write code all summer and dream in javascript (or python or whatever). i wrote a post earlier about the bug i worked on for my application.

i’m excited to join mozilla because eitan works at mozilla! just kidding, kind of. but i really did drink the mozilla kool-aid years ago. i love their teaching tools, the fact that they fund opennews and thoughtful tech journalism r&d, that they show up at detroit’s allied media conference in a big way, that their code is open. there are ex-mozillians working on p5.js. they are for real about tech literacy and advocating for the open web. i’m looking forward to working on the test pilot project specifically because it’s about letting firefox users play with potential new features before launch. yessss playtesting!

i’m excited to join the outreachy community because it’ll put me in touch with other women, and trans and gender nonconforming folks, and black and brown folks working in tech. i’ll be looking for ways to share what i learn, via writing and workshopping and whatever else i can think of.

on a related note, i’m trying to get better at teaching/learning, which is why i’m also soso thrilled to be presenting an intro to p5.js workshop at the allied media conference this summer. that’s in june, and i’ll post presentation notes here after. description:

What’s the potential of code as a creative medium? How is code political? In this workshop, we’ll use an open source creative coding language called p5.js to make a simple project that introduces Javascript concepts like functions, variables, and loops. We’ll also touch on the politics of open source projects and software in general. Participants will leave with their project files and a million links to resources for continuing to learn.

also, dark ecologies front-end dev project with the brilliant marina, nick, and rebecca.

also, tara and i have dreams of making a zine about data.

also, hopefully i’ll finally write that effing stingray article.

stay tuned,