作為程序員，在日常工作中往往會(huì)遇到一些影響工作效率的事情，比如：配套工具不趁手，開發(fā)環(huán)境難以搭建，代碼調(diào)試?yán)щy等。這些問題由于并不直接與產(chǎn)品相關(guān)，所以往往受到忽視，但它們卻又無時(shí)無刻不在，確確實(shí)實(shí)地影響著開發(fā)效率。這時(shí)，如果能通過技術(shù)手段來加以改善，那感覺想必是極好的。今天，我就跟大家分享兩個(gè)我在實(shí)際工作中，通過開發(fā)Chrome插件來提升效率的小案例，其中并不會(huì)涉及太多代碼細(xì)節(jié)，只是跟大家分享一下思路。

自動(dòng)解析復(fù)雜HTTP請(qǐng)求

大家都知道微策略的報(bào)表很強(qiáng)大，支持插入各式圖表，文字圖片，頁面章節(jié)等。由于功能復(fù)雜，再加上一些歷史原因，導(dǎo)致現(xiàn)在這個(gè)數(shù)據(jù)結(jié)構(gòu)的層級(jí)特別深，所以當(dāng)我們需要在Chrome Dev Tool的Network中查看請(qǐng)求中某個(gè)圖表的數(shù)據(jù)是否正確時(shí)，就只能逐層點(diǎn)開嵌套的JSON結(jié)構(gòu)（如下圖），日復(fù)一日，年復(fù)一年。

“要是能一步找到這個(gè)節(jié)點(diǎn)就好了！”

帶著這個(gè)想法，就讓咱們行動(dòng)起來。首先，很容易地你就會(huì)發(fā)現(xiàn)這個(gè)需求的主要功能其實(shí)很簡(jiǎn)單，就是一個(gè)遞歸遍歷JSON結(jié)構(gòu)獲取特定節(jié)點(diǎn)的函數(shù)，并且圖表節(jié)點(diǎn)確實(shí)也有一些特殊的屬性可以用來定位。雖然我并不聰明，但是花一天時(shí)間也應(yīng)該能把這個(gè)函數(shù)寫出來。另外，還有幾個(gè)問題要解決：

怎么Hack到Network面板里的請(qǐng)求，以執(zhí)行咱們寫的函數(shù)？

怎么從面板中的所有請(qǐng)求中過濾出圖表數(shù)據(jù)的請(qǐng)求？

怎么把解析的結(jié)果顯示出來？

第一個(gè)問題本來應(yīng)該是送命題，但現(xiàn)在是一道送分題，因?yàn)樵蹅冇蠧hrome插件！Chrome對(duì)插件開放了分析Network面板請(qǐng)求的API（點(diǎn)擊此處查看文檔）。第二個(gè)問題也比較簡(jiǎn)單，可以通過請(qǐng)求路徑，方法和參數(shù)等方式來區(qū)分。最后，Chrome插件也支持向頁面注入JS代碼，這樣我們就可以直接在控制臺(tái)顯示解析后的結(jié)果了。于是，整個(gè)處理流程如下：

核心代碼部分如下：

代碼整體上還是比較簡(jiǎn)單的，而插件的最后效果如下，每次請(qǐng)求圖表數(shù)據(jù)的時(shí)候都會(huì)在console中自動(dòng)打印出響應(yīng)數(shù)據(jù)。

魔改GitHub的PR界面

在微策略，代碼管理大都基于GitHub工作流，而其中最重要的一環(huán)恐怕就是提PR了，我們通過諸如PR模板、Code Review等一系列手段來提高PR的質(zhì)量。不過，依然有一些可以改善的地方。例如，在每次創(chuàng)建PR的時(shí)候，GitHub會(huì)自動(dòng)把commit信息填充到Title中，但是當(dāng)commit信息稍長一些的時(shí)候，就會(huì)莫名被強(qiáng)制截?cái)嗖⑻砑拥紻escription中。于是，我每次都要從Description中剪切出那段commit信息，再粘貼回Title中。

“要是能自動(dòng)把完整的commit信息重新覆寫回Title就好了！”

上面提到Chrome插件可以向當(dāng)前頁面插入JS代碼，于是，我很快想到了以下方案：

我翻看整個(gè)頁面，終于在Description下方找到了完整的commit信息，用簡(jiǎn)單的DOM操作就可以很容易取到。拿到commit信息之后，改寫Title的值也屬于基本操作，所以很快就完成了。

不過，游戲還沒有結(jié)束，細(xì)心的同學(xué)可能會(huì)好奇，為什么commit信息的開頭有DE143801這樣一串看似奇怪的字符，實(shí)際上這是我司內(nèi)部進(jìn)行項(xiàng)目管理的平臺(tái)Rally針對(duì)每個(gè)issue所生成的唯一編號(hào)，通過這個(gè)id就可以在Rally上找到關(guān)于該issue的所有信息。所以一般來說，在PR的Description中，我們都會(huì)附上該issue詳情頁的URL鏈接，以便Reviewer能快速了解issue的基本情況。但是，每次都要手動(dòng)貼上去還是效率低，畢竟commit里已經(jīng)有issue的ID了。

“有什么辦法能自動(dòng)把對(duì)應(yīng)的詳情頁URL并插入到Description里呢？”

首先，單純插入一個(gè)固定的URL到Description中是簡(jiǎn)單的，只需要在PR的Template中輸入一些特殊標(biāo)記或模板語法，便可以使用正則匹配等方式來進(jìn)行字符串的替換，之后的步驟則和上面替換Title的方法一致。所以，現(xiàn)在就剩下最后一個(gè)問題，怎么通過ID找到對(duì)應(yīng)的詳情頁。巧的是，Rally本身自帶的搜索API就能做到輸入ID直接跳轉(zhuǎn)到詳情頁，這個(gè)API的URL大致是：https://rally.xxx.com/search?keyword=DE123456

我們只需要把對(duì)應(yīng)ID添加到keyword中就可以了，so easy！咱們來看下最后的效果圖：

結(jié)尾

從以上兩個(gè)案例可以看出，在Chrome插件API的強(qiáng)大助力之下，只需要寫一些簡(jiǎn)單的代碼，就可以讓我們的工作變得更加美好，關(guān)鍵就看你是否有心罷了。

我們會(huì)每周推送商業(yè)智能、數(shù)據(jù)分析資訊、技術(shù)干貨和程序員日常生活，歡迎關(guān)注我們的知乎公眾號(hào)“微策略中國”或微信公眾號(hào)“微策略 商業(yè)智能"。

總結(jié)

以上是生活随笔為你收集整理的chrome 插件 页面请求转发_巧用Chrome插件二三事的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。