資訊專欄INFORMATION COLUMN
摘要：于是，又接著搜索，發現了這個倉庫。在正式進入開發之前，我們再來體驗下的調用。再發幾次請求會發現，一直在持續減少。。。其中明確提到，它會根據來限制調用的頻次。對于未授權的訪問，一小時最多次而授權的訪問，一小時最多次。
1. 前言
這天，在逛github（就是劃水）的時候，突然想看看某個倉庫的star走勢，但是在star列表中翻了半天愣是沒找到相應的功能。于是乎，谷歌一搜，發現有個叫Star History的谷歌插件，然而竟然要收費。。。
于是，又接著搜索，發現了這個倉庫。好巧的是，這個倉庫就是那個插件的源碼。稍微瞅了下源碼，感覺我也能行？
由于之前就想學學怎么寫chrome插件，本著學習的態度和好奇心驅使（都是劃水，沒有什么不同），于是也做了一個可以查看倉庫Star趨勢的插件。效果如下：
2. 準備工作 2.1 chrome插件簡單入門由于也是第一次寫Chrome插件，作為小白，就先搜搜大家都是怎么寫chrome插件的吧。果然，一搜一大堆。。。不過，最終還是選擇了官方文檔，畢竟是第一手資料，雖然是英文，但寫得還算通俗易懂，閱讀起來沒啥問題。
這里推薦看Getting Started，非常友好，一步步教你完成一個最簡單的修改網頁背景顏色的Chrome插件。跟著教程完成之后你就會發現，原來Chrome插件就像完成一個web項目一樣。
manifest.json是項目的配置文件（類似于package.json），插件所需要的一些能力（例如Storage）就在這個文件中聲明。剩下的工作，無非就是根據Chrome插件提供的API實現你想要的功能即可。
我們來看下要創建的項目目錄和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"]
}
]
}
這里需要解釋一點，根據最一開始我們看到的效果圖，可以發現我們正在瀏覽的頁面上多了一個Star Trend按鈕。所以我們要完成的插件需要能夠往頁面注入一個按鈕，而這正是通過manifest.json中的content_scripts字段實現的。它允許我們往matches字段匹配的網頁中注入js字段中的腳本文件。
因此，上面的配置意思很簡單，就是在匹配到url是https://github.com/* 的網頁時，注入我們dist目錄下的bundle.js文件。而bundle.js其實是我們為了在項目中用上ES6而采用webpack編譯得到的，源碼就是src/injected.js。接下來的工作就是在我們的src目錄下開發就行了（都是寫js，沒什么不同）。
2.2 Github API在正式進入開發之前，我們再來體驗下Github的API調用。官方文檔在這兒，概覽看完之后，經過一番搜索，終于找到我們的主角Starring APi。
根據這個API，我們可以拿到某個倉庫的Star列表。仔細看文檔，能夠看到有這么一條：
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時間嗎？趕緊打開postman測試一把：
果然，我們順利拿到了star倉庫的時間。不過這里有一個問題，這個請求每次返回的個數只有30條，也就是說假如像react這樣十幾萬star的倉庫豈不是要請求3k+次。。。而且，還有另外一個重要的問題，那就是Github API對調用的頻率也有限制。。。
在上面的圖片中，Response Header中告訴我們limit是60次，remaning還有59次。再發幾次請求會發現，remaning一直在持續減少。。。在翻閱了一番文檔之后，我找到了這個。
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.
其中明確提到，它會根據ip來限制API調用的頻次。對于未授權的訪問，一小時最多60次；而授權的訪問，一小時最多5000次。所以，為了盡可能避免的訪問頻次帶來的問題，我們在請求中需要帶上access_token。有關access_token，你可以在這里申請。
3. 開工經過前期的一番調研，事實證明想法確實可以實現。我們再來簡單理下思路：
根據頁面的dom結構，找到注入Star Trend按鈕的位置（injected.js）
給Star Trend按鈕綁定點擊事件，發起獲取Star時間的請求，收集數據（fetchHistoryData.js）
根據返回的數據，利用echart.js繪制趨勢圖（createChart.js）
3.1 injected.js利用chrome的元素審查功能，我們可以很輕松地找到要注入按鈕的位置，并給它綁定上相應的點擊事件。
/**
* star趨勢按鈕點擊事件
*/
function onClickStarTrend() {
// todo: 發起請求
console.log("u click star trend");
}
/**
* 創建star趨勢按鈕
*/
const createStarTrendBtn = () => {
const starTrendBtn = document.createElement("button");
starTrendBtn.setAttribute("class", "btn btn-sm");
starTrendBtn.innerHTML = `Star Trend`;
starTrendBtn.addEventListener("click", onClickStarTrend);
return starTrendBtn;
};
/**
* 注入star趨勢按鈕
*/
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();
}());
如果你已經安裝了本地的這個插件，這個時候刷新頁面你會發現多了一個Star Trend的按鈕，點擊的時候會在控制臺打印出u click star trend的字樣。
3.2 fetchHistoryData.js獲取數據首先要解決的就是構造請求url，根據文檔所示，我們需要當前的倉庫信息。這個倒是簡單，直接上正則從當前的location.href中匹配出來即可：
const repoRegRet = location.href.match(/https?://github.com/([^/]+/[^/]+)/?.*/);
然后是請求參數：
const requestConfig = {headers: {Accept: "application/vnd.github.v3.star+json"}};
這樣，我們就可以用axios發起一次請求：
const url = `https://api.github.com/repos/${repoRegRet[1]}/stargazers`;
axios.get(url, requestConfig).then(firstResponse => console.log(firstResponse));
查看log，我們成功地獲取到了一個倉庫第一頁的star列表。不過，這里有幾個問題需要解決：
如何獲取第2頁，第3頁，第N頁的star列表？
如何知道一個倉庫有多少頁star（即N是多少）？
當一個倉庫的star數多到要發送幾百次，甚至上千次請求時，如何決策？
第一個問題很好解決，在上面的url后面，跟上?page=n就表示請求第n頁的star數據。
第二個問題有兩種解法。一種是知道該倉庫有多少star，然后除以30（一頁返回30條數據）就可以知道有多少頁了；還有一種方法其實API文檔已經告訴我們了，第一次請求返回的數據已經告訴我們有多少頁了，只不過這個數據被放在了response的headers中。其中有一個link字段：
