chrome 插件 页面请求转发_巧用Chrome插件二三事

作为程序员,在日常工作中往往会遇到一些影响工作效率的事情,比如:配套工具不趁手,开发环境难以搭建,代码调试困难等。这些问题由于并不直接与产品相关,所以往往受到忽视,但它们却又无时无刻不在,确确实实地影响着开发效率。这时,如果能通过技术手段来加以改善,那感觉想必是极好的。今天,我就跟大家分享两个我在实际工作中,通过开发Chrome插件来提升效率的小案例,其中并不会涉及太多代码细节,只是跟大家分享一下思路。

自动解析复杂HTTP请求

大家都知道微策略的报表很强大,支持插入各式图表,文字图片,页面章节等。由于功能复杂,再加上一些历史原因,导致现在这个数据结构的层级特别深,所以当我们需要在Chrome Dev Tool的Network中查看请求中某个图表的数据是否正确时,就只能逐层点开嵌套的JSON结构(如下图),日复一日,年复一年。

71ae811492f6aa9988435478fb11c405.gif

“要是能一步找到这个节点就好了!”

带着这个想法,就让咱们行动起来。首先,很容易地你就会发现这个需求的主要功能其实很简单,就是一个递归遍历JSON结构获取特定节点的函数,并且图表节点确实也有一些特殊的属性可以用来定位。虽然我并不聪明,但是花一天时间也应该能把这个函数写出来。另外,还有几个问题要解决:

  1. 怎么Hack到Network面板里的请求,以执行咱们写的函数?
  2. 怎么从面板中的所有请求中过滤出图表数据的请求?
  3. 怎么把解析的结果显示出来?

第一个问题本来应该是送命题,但现在是一道送分题,因为咱们有Chrome插件!Chrome对插件开放了分析Network面板请求的API(点击此处查看文档)。第二个问题也比较简单,可以通过请求路径,方法和参数等方式来区分。最后,Chrome插件也支持向页面注入JS代码,这样我们就可以直接在控制台显示解析后的结果了。于是,整个处理流程如下:

b0edcef3c7b105d9b60e54fb893a0812.png

核心代码部分如下:

41eed578cc82479e85da7d735ae892fd.png

代码整体上还是比较简单的,而插件的最后效果如下,每次请求图表数据的时候都会在console中自动打印出响应数据。

b8835060e6a953b859f4abfb79d49152.png

魔改GitHub的PR界面

在微策略,代码管理大都基于GitHub工作流,而其中最重要的一环恐怕就是提PR了,我们通过诸如PR模板、Code Review等一系列手段来提高PR的质量。不过,依然有一些可以改善的地方。例如,在每次创建PR的时候,GitHub会自动把commit信息填充到Title中,但是当commit信息稍长一些的时候,就会莫名被强制截断并添加到Description中。于是,我每次都要从Description中剪切出那段commit信息,再粘贴回Title中。

3061a64a8a9f2f68ce736b3e269bbbb8.png

“要是能自动把完整的commit信息重新覆写回Title就好了!”

上面提到Chrome插件可以向当前页面插入JS代码,于是,我很快想到了以下方案:

d3bfa80fafce2a321a270d0762d4f715.png

我翻看整个页面,终于在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!咱们来看下最后的效果图:

7261791e5e95e8cff013a127083cd9a8.png

结尾

从以上两个案例可以看出,在Chrome插件API的强大助力之下,只需要写一些简单的代码,就可以让我们的工作变得更加美好,关键就看你是否有心罢了。

我们会每周推送商业智能、数据分析资讯、技术干货和程序员日常生活,欢迎关注我们的知乎公众号“微策略中国”或微信公众号“微策略 商业智能"。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/294809.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JDeveloper中文乱码问题

刚开始学习ADF,JDeveloper就碰到中文乱码问题,设置了编码还是不能解决,显示效果如下 其实是代码编辑器字体不支持中文导致,在代码编辑器右键选择Preferences->Code Editor->Fonts,选择一种支持中文的字体&#x…

这几张图告诉你化学到底有多神奇!看完瞬间觉得智商都提高了!

▲ 点击查看提到化学,大家脑子里都会想到什么呢?枯燥的化学式?还是难背的元素周期表?还是让人头疼的化学考试题?在由NHK,NHK Educational Corp、西南德国广播(SWR)、卡塔尔半岛电视台…

Android之可以做的两件坏事---破解锁屏密码和获取Wifi密码

转载:http://blog.csdn.net/jiangwei0910410003/article/details/41800409 之前的文章一直在介绍OC,最近也是在找急忙慌的学习IOS,所以Android方面的知识分享就有点中断了,但是我现在还是要靠Android吃饭,所以不能And…

使用Vue构建中(大)型应用

想做SPA就快上车! init 首先要起一个项目,推荐用vue-cli安装 $ npm install -g vue-cli $ vue init webpack demo $ cd demo $ npm install demo是这个示例项目的名字 现在看到目录结构如下 下面来稍微介绍下 build目录是一些webpack的文件,配…

php连接mysql并读取数据

<?php $server_name"localhost:3306"; //数据库服务器名称 $username"root"; // 连接数据库用户名 $password"rootpass"; // 连接数据库密码 $mysql_database"dbname"; // 数据库的名字 // 连接到数据库 $connmysql_connect…

计算机服务器折旧方法,新开的企业,属于IT行业,买的电脑,服务器,办公桌椅等产品归入固定资产分别怎么计提折旧?主要是折旧年限?谢谢...

企业选择的折旧年限一经确定&#xff0c;不能随意变更。企业所得税法和实施细则也对缩短年限的条件作了明确&#xff0c;只要不出现细则规定的两条&#xff0c;是不能变更的&#xff1b;即使需要变更&#xff0c;也要到主管税务备案批准。1.会计方面企业会计准则第4号——固定资…

System.Drawing.Common workaround in .NET6

System.Drawing.Common workaround in .NET6Intro最近有不少小伙伴在升级 .NET 6 时遇到了 System.Drawing.Common 的问题&#xff0c;同时很多库的依赖还都是 System.Drawing.Common &#xff0c;而 .NET 6 默认情况下只在 Windows 上支持使用&#xff0c;Linux 上默认不支持这…

sqlyog怎么设置默认值_物联网卡三网APN设置

下面以移动卡APN设置为例&#xff0c;电信卡&#xff0c;联通卡APN设置只需要按照操作把对应的APN添加即可。安卓手机设置方法: 设置→移动网络→接入点名称&#xff08;apn&#xff09;→新建一个apn(并开启漫游)苹果手机设置方法:①设置→通用→关于本机→名称②设置→蜂窝移…

mysql在linux下修改存储路径

通过下面几步即可修改路径&#xff0c;这里的路径都是测试的路径&#xff0c;一般默认安装路径在/var/lib/mysql下&#xff0c;真正配置按照真实路径配置。 1、修改/etc/sysconfig/selinux文件&#xff1a;#SELINUXenforcingSELINUXdisabled重启服务器可以通过sestatus命令查看…

Android之动画精讲一:从setTranslationX谈属性动画和view动画的区别

转载&#xff1a;http://blog.csdn.net/yanzi1225627/article/details/47850471 最近又用到了动画&#xff0c;决定把几次项目里用到的动画走过的弯路总结一下&#xff0c;顺便梳理下android的动画体系。众所周知&#xff0c;android动画分三类&#xff1a;一是View 动画&…

现在的娃娃有多智能?

1 我的12月&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼2 抱歉啊女儿...&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 一看就很厉害的名字▼4 突然的潮流&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼5 上下班的表情管理&#xff08;素…

Nats的消息通信模型

版权声明&#xff1a;本文为博主chszs的原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/50996679 Nats的消息通信模型 作者&#xff1a;chszs&#xff0c;未经博主允许不得转载。经许可的转载需注明作者和博客主页&#xff1a;http:…

c#将http调用返回额json中的有关中文的unicode转换为中文

中文转Unicode&#xff1a;HttpUtility.UrlEncodeUnicode(string str);转换后中文格式&#xff1a;"%uxxxx" 举例&#xff1a;"柳_abc123" 转换结果是&#xff1a;"%u67f3_abc123" Unicode转中文1&#xff1a;HttpUtility.UrlDecode(string st…

计算机常用英文句子,英文简历常用句子

思想成熟上进心强并具极丰富的人际关系技巧&#xff0c;有良好的管理艺术和组织能力&#xff0c;职场秘籍为个人简历添彩经典句子&#xff0c;思想成熟上进心强并具极丰富的人际关系技巧&#xff0c;有很高的领导艺术和很强的集体精神。英文简历常用句子2017-07-04 04:57:40 | …

.NET6之MiniAPI(一):开始Mini API

Mini API之前的官方.net web框架&#xff0c;都是偏重的&#xff0c;不像其他语言&#xff0c;如go&#xff0c;python&#xff0c;或基于c#的nancy&#xff0c;都是简洁方式来开启web之旅的。所以有小伙伴就吐槽.net基于web的不友好性&#xff0c;这不&#xff0c;.net6中官方…

超线程_超线程加核显 i310100+梅捷H410超值爆款组合

酷睿i3-10100是一颗4核心8线程&#xff0c;三级缓存6MB&#xff0c;主频3.6-4.3GHz&#xff0c;集成核显UHD 630 350-1100MHz&#xff0c;热设计功耗65W。对比上代酷睿i3-9100&#xff0c;它增加了超线程技术&#xff0c;加速频率高了100MHz&#xff0c;其他不变。为什么在短短…

JSTL(fn函数)

JSTL&#xff08;fn函数&#xff09; 首先&#xff0c;我们要在页面的最上方引用&#xff1a; <% taglib prefix"fn" uri"http://java.sun.com/jsp/jstl/functions" %> 下面是JSTL中自带的方法列表以及其描述&#xff1a; fn:contains(string, sub…

Hibernate之悲观锁与乐观锁

http://blog.csdn.net/a19881029/article/details/20665663 如果需要保证数据访问的排它性&#xff0c;则需对目标数据加“锁”&#xff0c;使其无法被其它程序修改 一&#xff0c;悲观锁 对数据被外界&#xff08;包括本系统当前的其它事务和来自外部系统的事务处理&#xff0…

他本硕博连跨3大专业,毕业后没多久被破格聘为985高校教授!

全世界只有3.14 % 的人关注了爆炸吧知识本文来源&#xff1a;募格学术整合自东南大学新闻网、东南大学校团委、募格课堂图片&#xff1a;网络来源&#xff1a;东南大学新闻网、东南大学校团委他从本科的计算机专业&#xff0c;到研究生的应用数学专业&#xff0c;再到博士开始研…

.Net之代码优先gRPC服务

介绍该方式适用于多个服务之前都是**.Net项目**的场景优点&#xff1a;可以在 .NET 服务器和客户端之间共享 .NET 服务和数据协定类型。无需在 .proto 文件和代码生成过程中定义协定。操作引用组件创建一个共享的类库ShareProto&#xff0c;该类库可以被服务端和客户端进行访问…