Web开发

注册

 

发新话题 回复该主题

edge浏览器的,截图文字识别扩展的分析 [复制链接]

1#
北京治疗白癜风哪间医院效果好 http://pf.39.net/bdfyy/bjzkbdfyy/

MicrosoftEdge浏览器有个扩展,谢叫兽图片文字复制工具截图版。

然后通过百度搜索浏览器扩展安装位置,找到这个扩展,

来查看这个扩展的源代码,看他是什么实现抓图识别文字的。

找到此扩展,并且复制出来

必须首先看一下manifest.json文件

然后用webstorm之类的工具打开里面的js文件,查看内容。

一,showmessage.min.js就是显示一下“复制成功”之类的字样,然后消失。

二,popup.js文件,使用来实现按下按钮抓图的。

三,在manifest.json中指定content_scripts是hotkey.min.js,在document_start的时候运行。

四,hotkey.min.js,内容脚本,就是在Alt+A的时候能抓图,而不用去点击按钮了。他又是怎么实现的呢

此函数chrome.runtime.sendMessage是内容脚本,向后台脚本发送消息的。

五,bg.min.js后台脚本

可以看到,contentcmd跟按钮是一个功能。这就要开始截图了。

六,按下按钮以后做了什么呢?我们知道那就是开始截图了,但是截图是那个页面的事儿,所以就要把自己的代码注入到页面中。当然,注入这件事,在我按下截图按钮之前就已经发生了。否则按下截图按钮,页面也不会有响应。

上图,有些部分不是汉字,通过在线的工具,把Unicode转换为汉字。

varbaseurl="aHR0cDovL3d3dy54aGJ4b29rLnRvcDo4ODgvb2NyCiA=";

类似这种通过base64加密的字符串

可以通过开发者工具的控制台,通过atob解密出来

atob("aHR0cDovL3d3dy54aGJ4b29rLnRvcDo4ODgvb2NyCiA=");

解密数据是个网址,百度说是我给人家广告了,大家自己解试试。

七,那么content.min.js干了什么呢?他向后台脚本发送了一个消息。并执行了一段代码

消息参数都是abc,这到底是什么意思?webstorm也不给个提示?

我们安装一下chrome的类型提示,顺便把typescript给安装了。

若是始终失败,可以安装一下nodejs,然后再去安装库里的chrome,他就会用npm安装,而不是去github下载了。

安装后,就能知道各种函数参数的意思了。就有帮助提示了。

八,bg.min.js里可以用chrome.tabs.captureVisibleTab抓tab的所见部分为img。然后,根据鼠标,画出区域,然后再把区域,画入canvas,然后再去canvas的toDataURL,导出为图的base64,再然后切割数据后,然后再把这个数据通过fetchserver发送给网站。

九,网站得到图片数据后,返回图片的文字内容。

越研究越偏了,搞起chrome的扩展来了。

总之是通过把图片数据发送给服务器,服务器返回的图片中的识别出的文字的。

那其实通过fiddler抓包可以知道他给谁发的什么数据。

重点就是,人家的文本识别服务器怎么建立的?

可以用百度的paddleOCR来做的。

下回我来做个试试。

这篇文章折腾了一天。不过也很有收获。

分享 转发
TOP
发新话题 回复该主题