GitHub 实时通知 | Chrome 插件

697 阅读2分钟

You’ll see one of the above notifications whenever someone does any of the following:

  • Creates an issue or comments on an issue
  • Creates a pull request
  • Forks your repository
  • Stars your repository
  • Pushes code to your repository

How I built it

Initially, I thought it would be really simple to build. I thought I could get it up in one day since I had experience building Chrome apps.

But as always, the devil is in the details. Here are the tools, frameworks, and whatever else I used to get it up and running:

  • GitHub Apps
  • Express and NodeJS
  • Firebase
  • Google Cloud Messaging
  • Chrome extension

GitHub Apps

To send notifications to a user in real time, we need to use a webhook to ping them whenever there is any user interaction. The payload will contain information, such as the person who interacted with your repository, the action taken (was it a star or a fork), and the name of the repository.

To do that, register for a GitHub App. It will allow you to choose what webhook events your GitHub App will detect.

Permissions for GitHub apps

Fill in your webhook URL, which I will cover later.

Further reading: GitHub Apps

Express and NodeJS

After defining the events the webhook triggers, you need a server to receive and process the payload. Since standalone Chrome extensions cannot launch a server, we will need to create a separate project for this.

Create a POST endpoint in your Express and NodeJS project, which will handle the webhook.

app.post(‘/watch’, function(req, res, next) {
.....
});

For webhooks, I love to use ngrok — a free tool (with a cap of 30 users), which creates a publicly accessible URL to configure the webhook service.

Once you have ngrok installed, you can use it to tunnel to an application running on, say, port 3000. It is as easy as typing

ngrok http 3000

ngrok then generates a url in both http and https . You can use these to fill in your webhook url in GitHub Apps temporarily until you host them.

Further reading: ngrok

The Chrome extension

Next, create a separate project for your Chrome extension. A Chrome extension by itself is easy to build. First, create a manifest.json file that contains properties like the extension's name, description, version number, and so on.

We will also need a popup.html file, which shows a popup when someone downloads and clicks on your Chrome extension. The popup prompts users to fill in their GitHub username, as shown below:

popup.html

After you save your GitHub username, connect your GitHub username to a computer that will receive the notifications.

We do that with both Google Cloud Messaging and Firebase.

Further reading: Getting Started: Building a Chrome Extension

Google Cloud Messaging and Firebase

Google Cloud Messaging (GCM) is a mobile notification service that enables developers to send messages between servers and client apps.

Firebase is a real-time, cloud-hosted database developed by Google. I chose Firebase for this case because it’s easy and quick to setup.

In your Chrome extension, create a popup.js file. This will make use of both GCM and Firebase. After you save your username in the popup, use GCM to generate a registrationID to identify your browser. Think of registrationID as an ID to differentiate your computer from other users.

The registrationID and the GitHub username will be saved as an entry in Firebase.

Further reading: Firebase and Google Cloud Messaging

How does it all work?