Did you ever wonder why there’s no push notifications functionality for GitHub? Well, that is not necessary. But, this feature could make it easier for you to track important changes in real time. So that was Stacy Goh was thinking about creating the Chrome extension for push notifications for GitHub.
When somebody creates a pull request or issue on your repositories you receive email notifications, but there are no notifications for stars/forks. And the author of this article decided to build a Chrome extension that pushes real-time notifications whenever someone interacts with one or more of her GitHub repositories. You can find the extension on the Google Chrome store as GitHub Notifier.
GitHub notifier creates 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
Let’s explore how she built it. For the application she used:
- GitHub Apps
- Express and NodeJS
- Google Cloud Messaging
- Chrome extension
For creating real-time notifications, we need to use a webhook to ping whenever there is any user interaction. The payload will contain information, such as:
- the person who interacted with your repository,
- the action was taken (was it a star or a fork),
- and the name of the repository.
To do that, you have to register for a GitHub App which will allow you to choose what webhook events your GitHub App will detect.
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, you will need to create a separate project for this. Create a POST endpoint in your Express and NodeJS project, which will handle the webhook.
For webhooks, the author used ngrok — a free tool (with a cap of 30 users), which creates a publicly accessible URL to configure the webhook service.
After installing ngrok, you can use it to tunnel to an application running on, say, port 3000. It is as easy as typing
ngrok http 3000
It generates a URL in both
https. Use these to fill in your webhook url in GitHub Apps temporarily until you host them.
Then you have to create a separate project for your Chrome extension (which is quite easy):
- Create a
manifest.jsonfile that contains properties like the extension’s name, description, version number, and so on
- Add the
popup.htmlfile, which shows a popup when someone downloads and clicks on your Chrome extension. The popup prompts users to fill in their GitHub username
- Connect your GitHub username to a computer that will receive the notifications. The author did it with both Google Cloud Messaging and Firebase.
On the illustration above, whenever someone interacts with the GitHub repository, the following happens:
- A payload will be sent from GitHub Apps to your Express and NodeJS server.
- The server receives the payload and extracts the GitHub username from the payload.
- Query Firebase for the associated registrationID from the GitHub username.
- Google Cloud Messaging is used to send a message from the server to the Chrome extension based on the registrationID.
- Once the Chrome extension receives the message from Google Cloud Messaging, it creates a Chrome notification and pushes it to the user.
That’s all! You can check the original article by the link we provided at the beginning.
Stay tuned and subscribe to our weekly newsletter!