浏览器插件和前端埋点方案

关于Canvas的内容,近期可能会往后放一放了，近期的工作上的业务又开始多了起来，且年中总结什么的，事多且杂。

关于浏览器插件的一些新的体会

关于浏览器插件好像写过一篇这样的文章，简单介绍如何开发一款浏览器插件。

核心是这个manifest.json配置文件。

{
  "manifest_version": 2,
  "name": "邮箱助手",
  "description": "邮箱助手.",
  "version": "1.0",
  
  "devtools_page": "devtools.html",
  "browser_action": {
    "default_icon": "./imgs/logo.png",
    "default_popup": "popup.html"
  },
  
  "options_page": "pop.html",
  "content_scripts": [  
    {
      "matches": ["https://mail.**.com/*"],
      "js": ["./js/style.js"],
      "css": ["./css/style.css"],
      "run_at":"document_idle"
    }
  ]
}

昨天上级领导给安排一个任务，去写一个查询被执行人信息的插件，该插件的主要作用是可以查询某些公司，或者某些人是否上过失信黑名单，或者因为违法被法院强制执行过某些措施。

本来想着这件事很简单，找到对应的网站，看看都需要哪些接口，然后按照流程，输入公司名称，社会统一信用编码，验证码，点击查询就可以了。而且也非常快速的实现了一个这样的插件。

无需打开网站，只需点开浏览器插件，输入公司名称，社会统一信用编码，验证码，点击查询就可以查到该公司被执行信息的列表，点击也可以查看详情。

然后就这样把代码发给了领导，领导的回复原话是：

像那么回事儿，但是这样跟我直接打开网站查有什么区别呢？如果跟我打开网站去查没有区别，那么开发这个插件的意义是什么呢？。

然后重新梳理了一下需求:

1. 插件支持导入需要查询的企业的excle表格
2. 无需手动输入验证码
3. 自动识别验证码以后，遍历表格中的企业进行查询
4. 查询结果支持导出excle
5. 甚至支持导出详情

接下来就是对这些需求重新进行开发...

需求本身并不难，关键是我们需要真正理解我们正在做的事儿的意义

这个是这两天的一些看法。如果对浏览器插件开发感兴趣的，欢迎一起探讨~~

前端埋点方案

这两天也在梳理上半年做过的开发任务，其中有一个需求是在小程序中接入埋点。后来因为开发任务紧张，这个需求就荒废了。

个人理解的前端埋点其实就是一个节点信息的上报。当然了，它可以有多中任务场景，比如：收集用户信息，记录应用信息,错误日志上报,点击次数之类的信息等等。

具体实现方案可以有以下几种:

css埋点

css 埋点的原理主要是利用相关的css属性，某些属性可以包含一个url，url实质上示意请求，此时我们可以将需要上报的信息写进去进行上报，比如：

<style>
.link:active::after{
    color: red;
    content: url("http://49.233.191.228:4000/upload?name=xxx");
}
</style>
<a class="link btn">点击访问</a>

img标签

img标签进行埋点信息上报，原理也是因为img的src其实也是一个请求，比如：

<img src="http://49.233.191.228:4000/upload?name=xxx"/>;

这个图片也会向49.233.191.228发起一个请求。

手动上报埋点信息

手动上报埋点信息的方式又分两种，一种是在业务逻辑中手动添加上报信息的逻辑，比如：

const goDetail() =>{

// 上报埋点信息
uploadInfo('zhangThree')
router.go('detail')

}

另外一种是。事先将埋点方法封装为一个库，对外提供相应的API，假设Dom上设置的有埋点方法库中需要的属性，则当用户操作到这个Dom时，自动触发埋点信息上报。

// key表示埋点的唯一标识；act表示埋点触发方式
<button data-stat="{key:'detail', act: 'click'}">查看详情</button>

}

这种方式封装时比较繁琐，但是使用范围比较广，除了可以细分用户行为点击，move等，甚至可以细分到某个界面模块中某个区域的某个按钮。

只是这个库封装起来需要花点精力和时间。

后记

简单说一下前端的错误日志上报。

前端的错误日志上报主要还是用到了window.onerror这个方法，他可以输出错误日志的内容，行号等信息

结合埋点方案，封装一个专门用于上报错误日志的方法即可。