Meteor Spotting - Building a Chrome Extension Using Meteor

meteorjschromeextensionmeteor spotting

Meteor spotting Chrome extension

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 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!

Subscribe to our mailing list

Every week or so we send out a little email sharing something interesting about JavaScript, React, React Native, Meteor and cakes. We'd love to have you onboard. Also, no spam (pinky swear)