快捷键实现浏览器截屏的Chrome 插件

背景

业务上想要实现快捷截图功能，一开始想到使用热门的 第三方库去实现，引入html2canvas插件，直接调用生成图片，so easy!
但是实际应用过程中，发现有一些问题：

1. 存在性能问题，对于dom特别多的情况，截图时间2-4S，比当前手动截图耗时长，因此可能给业务带来的收益远远低于预期。
2. 要考虑ifream 嵌套问题。
   html2canvas 本身的技术实现方案，决定了性能随着DOM元素的增长逐步变差，因此对于复杂页面，难以满足业务需要，此时想要做一个简单的Chrome 插件，实现截屏功能。

技术方案

chrome 本身自带截图功能，功能强大并且性能好，但是无法直接利用前端js去调用，需要插件进行中间的桥梁连接。
最终方案：

利用谷歌Chrome 插件强大的API能力，实现快速截取浏览器屏幕，然后将图片回传到项目中，再进行上传操作。

具体流程如上图，通过在项目中，设置快捷键，触发Window.postMessage, 在插件的content.js文件，可以监听到信息，然后对信息处理后，发送到background.js文件，
background.js文件是运行在浏览器devTools环境中的，调用Chrome 截图API —chrome.tabs.captureVisibleTab，然后将图片信息发送到content.js，最后项目中监听到信息，然后进行上传操作。

兼容性调研

a. 目前在mac 和 window上进行了验证，都支持插件截图
b. 浏览器版本问题，目前浏览器59版本以上都支持目前插件的API。
c. 浏览器问题，无法运行在火狐、Safari、IE等浏览器，只能运行在谷歌浏览器。
d. 性能问题，目前从开始截图到项目中拿到图片，平均在0.6S左右，复杂场景也满足性能要求。