chrome 插件 页面请求转发_巧用Chrome插件二三事
作為程序員，在日常工作中往往會遇到一些影響工作效率的事情，比如：配套工具不趁手，開發環境難以搭建，代碼調試困難等。這些問題由于并不直接與產品相關，所以往往受到忽視，但它們卻又無時無刻不在，確確實實地影響著開發效率。這時，如果能通過技術手段來加以改善，那感覺想必是極好的。今天，我就跟大家分享兩個我在實際工作中，通過開發Chrome插件來提升效率的小案例，其中并不會涉及太多代碼細節，只是跟大家分享一下思路。
自動解析復雜HTTP請求
大家都知道微策略的報表很強大，支持插入各式圖表，文字圖片，頁面章節等。由于功能復雜，再加上一些歷史原因，導致現在這個數據結構的層級特別深，所以當我們需要在Chrome Dev Tool的Network中查看請求中某個圖表的數據是否正確時，就只能逐層點開嵌套的JSON結構（如下圖），日復一日，年復一年。
“要是能一步找到這個節點就好了！”
帶著這個想法，就讓咱們行動起來。首先，很容易地你就會發現這個需求的主要功能其實很簡單，就是一個遞歸遍歷JSON結構獲取特定節點的函數，并且圖表節點確實也有一些特殊的屬性可以用來定位。雖然我并不聰明，但是花一天時間也應該能把這個函數寫出來。另外，還有幾個問題要解決：
第一個問題本來應該是送命題，但現在是一道送分題，因為咱們有Chrome插件！Chrome對插件開放了分析Network面板請求的API（點擊此處查看文檔）。第二個問題也比較簡單，可以通過請求路徑，方法和參數等方式來區分。最后，Chrome插件也支持向頁面注入JS代碼，這樣我們就可以直接在控制臺顯示解析后的結果了。于是，整個處理流程如下：
核心代碼部分如下：
代碼整體上還是比較簡單的，而插件的最后效果如下，每次請求圖表數據的時候都會在console中自動打印出響應數據。
魔改GitHub的PR界面
在微策略，代碼管理大都基于GitHub工作流，而其中最重要的一環恐怕就是提PR了，我們通過諸如PR模板、Code Review等一系列手段來提高PR的質量。不過，依然有一些可以改善的地方。例如，在每次創建PR的時候，GitHub會自動把commit信息填充到Title中，但是當commit信息稍長一些的時候，就會莫名被強制截斷并添加到Description中。于是，我每次都要從Description中剪切出那段commit信息，再粘貼回Title中。
“要是能自動把完整的commit信息重新覆寫回Title就好了！”
上面提到Chrome插件可以向當前頁面插入JS代碼，于是，我很快想到了以下方案：
我翻看整個頁面，終于在Description下方找到了完整的commit信息，用簡單的DOM操作就可以很容易取到。拿到commit信息之后，改寫Title的值也屬于基本操作，所以很快就完成了。
不過，游戲還沒有結束，細心的同學可能會好奇，為什么commit信息的開頭有DE143801這樣一串看似奇怪的字符，實際上這是我司內部進行項目管理的平臺Rally針對每個issue所生成的唯一編號，通過這個id就可以在Rally上找到關于該issue的所有信息。所以一般來說，在PR的Description中，我們都會附上該issue詳情頁的URL鏈接，以便Reviewer能快速了解issue的基本情況。但是，每次都要手動貼上去還是效率低，畢竟commit里已經有issue的ID了。
“有什么辦法能自動把對應的詳情頁URL并插入到Description里呢？”
首先，單純插入一個固定的URL到Description中是簡單的，只需要在PR的Template中輸入一些特殊標記或模板語法，便可以使用正則匹配等方式來進行字符串的替換，之后的步驟則和上面替換Title的方法一致。所以，現在就剩下最后一個問題，怎么通過ID找到對應的詳情頁。巧的是，Rally本身自帶的搜索API就能做到輸入ID直接跳轉到詳情頁，這個API的URL大致是：https://rally.xxx.com/search?keyword=DE123456
我們只需要把對應ID添加到keyword中就可以了，so easy！咱們來看下最后的效果圖：
結尾
從以上兩個案例可以看出，在Chrome插件API的強大助力之下，只需要寫一些簡單的代碼，就可以讓我們的工作變得更加美好，關鍵就看你是否有心罷了。
我們會每周推送商業智能、數據分析資訊、技術干貨和程序員日常生活，歡迎關注我們的知乎公眾號“微策略中國”或微信公眾號“微策略 商業智能"。
總結
以上是生活随笔為你收集整理的chrome 插件 页面请求转发_巧用Chrome插件二三事的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华夫饼为什么不松软_掌握这2个关键点，5
- 下一篇： sqlyog怎么设置默认值_物联网卡三网