資訊專欄INFORMATION COLUMN
摘要：于是，又接著搜索，發(fā)現(xiàn)了這個(gè)倉(cāng)庫(kù)。在正式進(jìn)入開(kāi)發(fā)之前，我們?cè)賮?lái)體驗(yàn)下的調(diào)用。再發(fā)幾次請(qǐng)求會(huì)發(fā)現(xiàn)，一直在持續(xù)減少。。。其中明確提到，它會(huì)根據(jù)來(lái)限制調(diào)用的頻次。對(duì)于未授權(quán)的訪問(wèn)，一小時(shí)最多次而授權(quán)的訪問(wèn)，一小時(shí)最多次。
1. 前言
這天，在逛github（就是劃水）的時(shí)候，突然想看看某個(gè)倉(cāng)庫(kù)的star走勢(shì)，但是在star列表中翻了半天愣是沒(méi)找到相應(yīng)的功能。于是乎，谷歌一搜，發(fā)現(xiàn)有個(gè)叫Star History的谷歌插件，然而竟然要收費(fèi)。。。
于是，又接著搜索，發(fā)現(xiàn)了這個(gè)倉(cāng)庫(kù)。好巧的是，這個(gè)倉(cāng)庫(kù)就是那個(gè)插件的源碼。稍微瞅了下源碼，感覺(jué)我也能行？
由于之前就想學(xué)學(xué)怎么寫(xiě)chrome插件，本著學(xué)習(xí)的態(tài)度和好奇心驅(qū)使（都是劃水，沒(méi)有什么不同），于是也做了一個(gè)可以查看倉(cāng)庫(kù)Star趨勢(shì)的插件。效果如下：
2. 準(zhǔn)備工作 2.1 chrome插件簡(jiǎn)單入門由于也是第一次寫(xiě)Chrome插件，作為小白，就先搜搜大家都是怎么寫(xiě)chrome插件的吧。果然，一搜一大堆。。。不過(guò)，最終還是選擇了官方文檔，畢竟是第一手資料，雖然是英文，但寫(xiě)得還算通俗易懂，閱讀起來(lái)沒(méi)啥問(wèn)題。
這里推薦看Getting Started，非常友好，一步步教你完成一個(gè)最簡(jiǎn)單的修改網(wǎng)頁(yè)背景顏色的Chrome插件。跟著教程完成之后你就會(huì)發(fā)現(xiàn)，原來(lái)Chrome插件就像完成一個(gè)web項(xiàng)目一樣。
manifest.json是項(xiàng)目的配置文件（類似于package.json），插件所需要的一些能力（例如Storage）就在這個(gè)文件中聲明。剩下的工作，無(wú)非就是根據(jù)Chrome插件提供的API實(shí)現(xiàn)你想要的功能即可。
我們來(lái)看下要?jiǎng)?chuàng)建的項(xiàng)目目錄和manifest.json配置文件：
├── README.md ├── dist │?? └── bundle.js ├── images │?? ├── trending128.png │?? ├── trending16.png │?? ├── trending32.png │?? └── trending48.png ├── manifest.json ├── package.json ├── src │?? └── injected.js └── webpack.config.js
{
"name": "Github-Star-Trend",
"version": "1.0",
"manifest_version": 2,
"description": "Generates a star trend graph for a github repository",
"icons": {
"16": "images/trending16.png",
"32": "images/trending32.png",
"48": "images/trending48.png",
"128": "images/trending128.png"
},
"content_scripts": [
{
"matches": ["https://github.com/*"],
"js": ["dist/bundle.js"]
}
]
}
這里需要解釋一點(diǎn)，根據(jù)最一開(kāi)始我們看到的效果圖，可以發(fā)現(xiàn)我們正在瀏覽的頁(yè)面上多了一個(gè)Star Trend按鈕。所以我們要完成的插件需要能夠往頁(yè)面注入一個(gè)按鈕，而這正是通過(guò)manifest.json中的content_scripts字段實(shí)現(xiàn)的。它允許我們往matches字段匹配的網(wǎng)頁(yè)中注入js字段中的腳本文件。
因此，上面的配置意思很簡(jiǎn)單，就是在匹配到url是https://github.com/* 的網(wǎng)頁(yè)時(shí)，注入我們dist目錄下的bundle.js文件。而bundle.js其實(shí)是我們?yōu)榱嗽陧?xiàng)目中用上ES6而采用webpack編譯得到的，源碼就是src/injected.js。接下來(lái)的工作就是在我們的src目錄下開(kāi)發(fā)就行了（都是寫(xiě)js，沒(méi)什么不同）。
2.2 Github API在正式進(jìn)入開(kāi)發(fā)之前，我們?cè)賮?lái)體驗(yàn)下Github的API調(diào)用。官方文檔在這兒，概覽看完之后，經(jīng)過(guò)一番搜索，終于找到我們的主角Starring APi。
根據(jù)這個(gè)API，我們可以拿到某個(gè)倉(cāng)庫(kù)的Star列表。仔細(xì)看文檔，能夠看到有這么一條：
You can also find out when stars were created by passing the following custom media type via the Accept header:
Accept: application/vnd.github.v3.star+json
太棒了，這不正是我們所需的star時(shí)間嗎？趕緊打開(kāi)postman測(cè)試一把：
果然，我們順利拿到了star倉(cāng)庫(kù)的時(shí)間。不過(guò)這里有一個(gè)問(wèn)題，這個(gè)請(qǐng)求每次返回的個(gè)數(shù)只有30條，也就是說(shuō)假如像react這樣十幾萬(wàn)star的倉(cāng)庫(kù)豈不是要請(qǐng)求3k+次。。。而且，還有另外一個(gè)重要的問(wèn)題，那就是Github API對(duì)調(diào)用的頻率也有限制。。。
在上面的圖片中，Response Header中告訴我們limit是60次，remaning還有59次。再發(fā)幾次請(qǐng)求會(huì)發(fā)現(xiàn)，remaning一直在持續(xù)減少。。。在翻閱了一番文檔之后，我找到了這個(gè)。
For API requests using Basic Authentication or OAuth, you can make up to 5000 requests per hour. For unauthenticated requests, the rate limit allows for up to 60 requests per hour. Unauthenticated requests are associated with the originating IP address, and not the user making requests.
其中明確提到，它會(huì)根據(jù)ip來(lái)限制API調(diào)用的頻次。對(duì)于未授權(quán)的訪問(wèn)，一小時(shí)最多60次；而授權(quán)的訪問(wèn)，一小時(shí)最多5000次。所以，為了盡可能避免的訪問(wèn)頻次帶來(lái)的問(wèn)題，我們?cè)谡?qǐng)求中需要帶上access_token。有關(guān)access_token，你可以在這里申請(qǐng)。
3. 開(kāi)工經(jīng)過(guò)前期的一番調(diào)研，事實(shí)證明想法確實(shí)可以實(shí)現(xiàn)。我們?cè)賮?lái)簡(jiǎn)單理下思路：
根據(jù)頁(yè)面的dom結(jié)構(gòu)，找到注入Star Trend按鈕的位置（injected.js）
給Star Trend按鈕綁定點(diǎn)擊事件，發(fā)起獲取Star時(shí)間的請(qǐng)求，收集數(shù)據(jù)（fetchHistoryData.js）
根據(jù)返回的數(shù)據(jù)，利用echart.js繪制趨勢(shì)圖（createChart.js）
3.1 injected.js利用chrome的元素審查功能，我們可以很輕松地找到要注入按鈕的位置，并給它綁定上相應(yīng)的點(diǎn)擊事件。
/**
* star趨勢(shì)按鈕點(diǎn)擊事件
*/
function onClickStarTrend() {
// todo: 發(fā)起請(qǐng)求
console.log("u click star trend");
}
/**
* 創(chuàng)建star趨勢(shì)按鈕
*/
const createStarTrendBtn = () => {
const starTrendBtn = document.createElement("button");
starTrendBtn.setAttribute("class", "btn btn-sm");
starTrendBtn.innerHTML = `Star Trend`;
starTrendBtn.addEventListener("click", onClickStarTrend);
return starTrendBtn;
};
/**
* 注入star趨勢(shì)按鈕
*/
const injectStarTrendBtn = () => {
var newNode = document.createElement("li");
newNode.appendChild(createStarTrendBtn());
var firstBtn = document.querySelector(".pagehead-actions > li");
if(firstBtn && firstBtn.parentNode) {
firstBtn.parentNode.insertBefore(newNode, firstBtn);
}
};
(function run() {
injectStarTrendBtn();
}());
如果你已經(jīng)安裝了本地的這個(gè)插件，這個(gè)時(shí)候刷新頁(yè)面你會(huì)發(fā)現(xiàn)多了一個(gè)Star Trend的按鈕，點(diǎn)擊的時(shí)候會(huì)在控制臺(tái)打印出u click star trend的字樣。
3.2 fetchHistoryData.js獲取數(shù)據(jù)首先要解決的就是構(gòu)造請(qǐng)求url，根據(jù)文檔所示，我們需要當(dāng)前的倉(cāng)庫(kù)信息。這個(gè)倒是簡(jiǎn)單，直接上正則從當(dāng)前的location.href中匹配出來(lái)即可：
const repoRegRet = location.href.match(/https?://github.com/([^/]+/[^/]+)/?.*/);
然后是請(qǐng)求參數(shù)：
const requestConfig = {headers: {Accept: "application/vnd.github.v3.star+json"}};
這樣，我們就可以用axios發(fā)起一次請(qǐng)求：
const url = `https://api.github.com/repos/${repoRegRet[1]}/stargazers`;
axios.get(url, requestConfig).then(firstResponse => console.log(firstResponse));
查看log，我們成功地獲取到了一個(gè)倉(cāng)庫(kù)第一頁(yè)的star列表。不過(guò)，這里有幾個(gè)問(wèn)題需要解決：
如何獲取第2頁(yè)，第3頁(yè)，第N頁(yè)的star列表？
如何知道一個(gè)倉(cāng)庫(kù)有多少頁(yè)star（即N是多少）？
當(dāng)一個(gè)倉(cāng)庫(kù)的star數(shù)多到要發(fā)送幾百次，甚至上千次請(qǐng)求時(shí)，如何決策？
第一個(gè)問(wèn)題很好解決，在上面的url后面，跟上?page=n就表示請(qǐng)求第n頁(yè)的star數(shù)據(jù)。
第二個(gè)問(wèn)題有兩種解法。一種是知道該倉(cāng)庫(kù)有多少star，然后除以30（一頁(yè)返回30條數(shù)據(jù)）就可以知道有多少頁(yè)了；還有一種方法其實(shí)API文檔已經(jīng)告訴我們了，第一次請(qǐng)求返回的數(shù)據(jù)已經(jīng)告訴我們有多少頁(yè)了，只不過(guò)這個(gè)數(shù)據(jù)被放在了response的headers中。其中有一個(gè)link字段：
