最近参加了个课外兴趣小组，主要是针对我们的产品，在github上编写个插件，方便开发者在check in代码的时候，能够将相关的测试job的结果和regression的结果显示在github上。方便开发人员直接在页面上看到结果。
成果图如下：
image.png
功能逻辑相对来说不是很复杂，收集跟这个PR相关的build数据，将case的执行结果和regression的结果返回页面显示。
本文主要记录在开发过程中遇到的“坑”，总结记录一下。
- chrome插件开发的一些流程可以参考这篇文章：https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
写的很详细，基本上有了这篇文章，大部分问题都能解决。 - 由于我们是在github上进行的开发插件，因此要求我们调用的服务端也需要是https。由于我们是供内部使用，专门的ssl认证需要经费。因此我们将后端先认证为https服务，自签证书。然后在前端当用户去调用后端服务时，需要用于额外点击一下服务链接，并进行信任。做了个类似于nginx的work页面。由于这部分动作是浏览器的行为，无论前端还是后端对ssl做处理都是徒劳的。当然有人建议用chrome插件中background.js，将调用的api通过Message发送。还没有尝试。
image.png
- 为什么不直接在chrome插件里面访问数据库？也做了尝试，因为发现npm下面有关于postgres的包，但是编译的时候发现，会曝出缺少lts，net,pg-native等error信息，搜索结论是pg client不能用于brower，只能作用于node。那么退而求其次选用了springboot作为服务端，毕竟boot开发后端熟悉且快。
- 由于chrome js都是采用的原生js，对dom结构直接操作，可读性不是很好。因此在打包的时候加入了eslint，具体用法可参考：https://www.jianshu.com/p/933b6b6a84c9
- 在用原生js编写弹框的时候遇到一个问题：虽然背景弱化，弹框里的背景是透明的，也就是弹框里的内容看的不清。也就是父容器半透明会导致子容器也变成半透明。因此可以给容器增加个兄弟容器，并把它设置为半透明，解决问题。
网友评论