Authenticating a Meteor.js App Using A Chrome Extension

I’m currently working on a project in which I require a presentation to control a meteor app that pushes content to subscribers whenever slides change. This required the creator of the slide deck to sync their deck to the content they created in my app. Simple enough?

But doesn’t have a public API, so there is no direct way to accomplish this. I decided to create a Chrome extension that allows the author of the slide deck to authenticate their credentials with my Meteor application and sync their slide deck to the app. Check out my public GitHub repo for the full extension code.

Step 1: Create a RESTful API for your app.

This sounds daunting. But, like a lot of things you want to do with Meteor, there is a package for that. The one I decided to use was Simple:Rest. In short, this package gives you an automatic JSON HTTP API for all of your publications and methods. More on how to actually use this later.

Step 2: Um, Build a Chrome Extension.

This also sounds daunting, but I promise it isn’t. Here is how the extension should work:

  1. Setup your manifest.json file and configure permissions, etc.
  2. Build a popup that renders when you click the page action icon. This popup should contain a form for a username, password, along with any other fields you’d like to sync.
  3. On form submission, use your shiny new API and authenticate the user using a server-side method (more on that below).
  4. After authentication has passed, DO STUFF AND PROSPER

The Manifest.json File

This is where setup your extension’s permissions, page actions, browser actions, background script, and content scripts. This is what mine looks like:

Permissions: allow users access to certain chrome things. Read all about them. Specifically, I need access to tabs,, and localhost (for development testing) and then my production URLs.

Background: here we set up an event page that handles what happens after authentication. The details of this file fall outside the scope of this article, but I felt it required a brief explanation. Read all about event pages.

Page Action: as I mentioned, the page action will show up in the browser bar on any tag/page that contains a URL. Clicking the page icon will throw a popup. I’m also pointing to a couple of icons so it looks pretty.    

The Popup

The popup consists of a popup.html file and a popup.js file. The HTML file is pretty straight forward. It just contains a simple form element to capture the fields. The popup.js file captures the form submission and does stuff.

There is a good amount of stuff going on here, but I want to point you to line 29. Thanks to the Simple:Rest package, my meteor methods are available through HTTP. I’m making a simple HTTP request, passing in the username and password as a JSON object to a method called ‘loginFromExtension’, and then handling the response.

Also note the URL is currently pointing to localhost:3000?—?that’s the port my meteor app is running on locally. In production, it would be the URL of your application.

Authentication using our new Meteor API

Let’s take a look at the loginFromExtension Meteor method. It should be noted that Meteor’s built in login methods are only available client side, so I decided to use another Meteor package that enables server-side authentication called miktam:api-password.

Simply, we pass in the username and password from the popup form. If it passes authentication, it simply returns true. If authentication fails, it returns with an error message.

Looking at line 36 of popup.js, we see that if authentication passes, we send a message to the background.js file using chrome.runtime.sendMessage. The message is simple that “hey yo, we’re ready to start” and then it does a bunch of fancy stuff.

That’s it. Pretty easy. You can take a look at this Github repo to see the whole extension full fleshed out.

Comments are closed.

Related Posts
Integrating WordPress with iMIS

Integrating WordPress with iMIS Association Management System: Strategies and Techniques In today’s digital age, it’s essential for associations and non-profit organizations to have an online presence that not only showcases their activities and initiatives but also provides a platform for members to interact and engage with each other. This is where integrating WordPress with iMIS […]

Digital Cartography: Making Maps in The Age Of the Internet

Have you ever wanted to build a map on the web? Learn how to using Leaflet.js

Game On: Using Gamification To Build Engagement

The American Society for Microbiology asked us to use our creative panache to add intrigue and dynamism to their annual conference. We responded by creating a game for the conference attendees: one that would introduce friendly competition, online engagement, and an underlying sense of urgency to the event.