相信各位程序員對github已經不陌生了。不知道各位有沒有注意到GitHub沒有推送通知這個功能。當有人在我的存儲庫中創建了一個提取請求/問題時，我可以收到電子郵件通知，但當有人stars/forks的時候卻沒沒有通知。

 

此外，我已經收到了12253封電子郵件通知。。。。。。。。。。這件事好像不是那么酷了。

 

看，我不是在開玩笑！

 

作為一個專業的開發人員，這尼瑪的就忍不了啊，必須自己上手解決好嗎！我決定建立一個Chrome擴展程序，只要有人與我的GitHub存儲庫進行交互，即可實時發送通知。這是Google Chrome商店中的GitHub通知程序。你也可以在這里找到更多的信息。

實時Chrome通知

 

當有人執行以下任何操作時，你會看到上述通知之一：

 

• 在問題上創建問題或意見
• 創建拉請求
• 為你的repository點forks
• 為你的repository 點stars
• 將代碼推送到你的存儲庫

 

如何實現

 

最初，我以為建立起來真的很簡單。在我的印象中這簡直就是小兒科嘛，畢竟姐可是有建立Chrome apps的經驗喲。

 

但是一如往常，魔鬼在細節上。這里是工具，框架，以及我用來獲取和運行的其他東西：

 

• GitHub應用程式
• Express和NodeJS
• Firebase
• Google Cloud Messaging
• Chrome擴展程序

GitHub Apps

 

要實時向用戶發送通知，只要有任何用戶交互，我們就需要使用webhook來ping通。有效載荷將包含信息，例如與你的存儲庫進行交互的人員，采取的操作（是star還是fork）以及存儲庫的名稱。

 

為此，請注冊一個GitHub應用程序。它將允許你選擇你的GitHub應用程序將檢測哪些webhook事件。

GitHub應用程式的權限

 

填寫你的webhook URL，稍后我將介紹。

 

進一步閱讀：GitHub應用程序

 

Express和NodeJS

 

在定義webhook觸發器的事件之后，你需要一個服務器來接收和處理有效負載。由于獨立的Chrome擴展程序無法啟動服務器，因此我們需要為此創建一個單獨的項目。

 

在Express和NodeJS項目中創建一個POST端點，它將處理webhook。

app.post（'/ watch'，function（req，res，next）{
.....
}）;

 

對于webhook，我喜歡使用ngrok?- 一個免費的工具（擁有30個用戶的上限），它創建一個可公開訪問的URL來配置webhook服務。

 

一旦你已經安裝了ngrok，你可以用它為應用程序選擇運行的通道，比如，端口3000。這將和打字一樣簡單

 

ngrok http 3000

 

ngrok然后產生兩種一個URL http和https 。您可以使用它們臨時填寫GitHub應用程序中的webhook URL，直到您托管它們。

進一步閱讀：ngrok

 

Chrome擴展程序

 

接下來，為不的Chrome擴展程序創建一個單獨的項目。Chrome擴展本身很容易構建。首先，創建一個manifest.json包含擴展名，描述，版本號等屬性的文件。

 

我們還需要一個popup.html文件，當有人下載??并點擊你的Chrome擴展程序時，該文件顯示彈出式窗口。彈出窗口提示用戶填寫他們的GitHub用戶名，如下所示：

popup.html

 

保存你的GitHub用戶名后，將你的GitHub用戶名連接到將收到通知的計算機。

 

我們同時使用Google Cloud Messaging和Firebase。

 

進一步閱讀：入門：構建Chrome擴展

 

Google Cloud Messaging和Firebase

 

Google Cloud Messaging（GCM）是一項移動通知服務，可讓開發人員在服務器和客戶端應用之間發送消息。

 

Firebase是由Google開發的實時云端托管數據庫。我選擇了Firebase，因為它很容易設置。

 

在Chrome擴展程序中，創建一個popup.js文件。這將使用GCM和Firebase。將你的用戶名保存在彈出窗口后，使用GCM生成一個注冊ID來標識你的瀏覽器。將registrationID作為ID來區分你的計算機與其他用戶。

 

注冊ID和GitHub用戶名將被保存為Firebase中的條目。

 

進一步閱讀：Firebase和Google Cloud Messaging

 

這一切如何工作？

 

 

Github通知程序如何構建的總結圖

 

總結上圖，每當有人與GitHub存儲庫進行交互時，都會發生以下情況：

 

• 有效載荷將從GitHub Apps發送到Express和NodeJS服務器。
• 服務器接收有效載荷，并從有效載荷中提取GitHub用戶名。
• 從GitHub用戶名查詢關聯的registrationID的Firebase。
• Google Cloud Messaging用于根據注冊ID將服務器的消息發送到Chrome擴展。
• Chrome擴展程序收到Google Cloud Messaging的郵件后，會創建一個Chrome通知并將其推送給用戶。

 

然后當當當！這就可以收到GitHub的實時Chrome通知辣！

 

非常感謝你能閱讀到這里！真心希望以上內容可以幫助到你~~~