I’m currently working on a project in which I require a Slides.com 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 Slides.com 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:
- Setup your manifest.json file and configure permissions, etc.
- 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.
- On form submission, use your shiny new API and authenticate the user using a server-side method (more on that below).
- 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, Slides.com, 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 Slides.com 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.
