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
Let’s look at specific example from Meteor Spotting.
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:
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 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
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