This post documents our experience building Meteor Spotting, a Meteor based Chrome extension to crowd source finding projects that use Meteor. The extension detects sites running on Meteor and reports this data to the server which aggregates the data and presents it on the Meteor Spotting Page. We keep track of spotters and let them compete with each other.
Chrome extensions 101
Extensions are essentially web applications running within Chrome. They are built using Javascript, HTML and CSS. There are a few points that are very Chrome specicif which mostly has to do with how your extension integrates with Chrome and how different parts of it communicate between each other. You can get more details and all the relevant documentation here.
Let’s look at specific example from Meteor Spotting.
Content scripts
Chrome lets you inject scripts and styles into web pages. You configure this in the content_scripts section of the manifest file for your extension (manifest.json). Here’s what it looks like for Meteor Spotting:
Content scripts run in a special sandbox environment. What this means is that javascript you inject cannot mess with the scripts running on the page. You can, however, access (and modify) DOM and also communicate with the background scripts.
We grab all script tags from the head of the page and look for the ones containig inline scripts. The content of these inline scripts is then transferred to the background page for further investigations - specifically looking for Meteor traces.
Background page
Background page is the heart of your Chrome extension. Here’s what it looks like in Meteor spotting
It assembles all the scripts the extension needs. In our case background.js is where most of the magic happens. Let’s take a look.
Background script is responsible for a few things:
- receiving and processing ‘reports’ from the content script
- contacting the application server to report a spotting
- adjusting UI elements within Chrome to indicate wether a Meteor is detected using PageAction API
Background script is completely event driven
Talking to Meteor
Probably the most interesting bit for all the Meteor savyy readers is how to access Meteor application server from the extension. In other words, how does one expose an API of a Meteorjs based application? Easy-peasy, as it turns out.
Say hello to DDP
The way your client javascript talks to your server javascript in Meteor is through DDP (Distributed Data Protocol) - as JSON based message protocol. Arunoda has written a great introduction about DDP which you can find here. Because DDP is an open protocol, one can write clients for it so that you can connect to your Meteorjs server application from anywhere, for example a Chrome extension. Or some other crazy places.
DDP client
For our particular case, I grabbed this javascript DDP client created by folks from Mondora
Micro Meteor
For Meteor Spotting, all we were interested in was the ability to talk to the Meteor based server side and remotely invoke Meteor methods. So within the extension, we’ve added a tiny Meteor API mimicking actual Meteor.call API method you are all familiar with
With this simple setup, we can now talk to the Meteorjs application server the same way we usually do
Before you run away to build your own extension
If you are not yet spotting Meteors with all the rest, you should jump in. If you have any questions/comments, please do reach out on Twitter. Happy coding!