VUE制作谷歌浏览器多类型截屏、抓取信息的插件

提到VUE大家都很熟悉，VUE可以做很多东西，包括SPA单页面应用，WEBAPP应用，小程序应用等等，但是你们有没有考虑过过，使用VUE来制作一款抓取网页数据（文字+截屏）的扩展呢？敢想就要敢做，Let's Go !

1. 开发目标：完成一款在POPUP窗口登陆后，在当前网页加载出一个可以获取网页文字信息，以及可以多类型截图的工具，截完图可以下载，最终操作完成后可以直接提交

2. 开发工具：vue、jquery、chrome extension api 、es6 、bootstrap

3. 具体功能：

（1）信息抓取：标题、副标题、内容

（2）截屏：当前窗口截屏、当前整个网页截屏、自定义区域截屏4.

4. 最终效果预览：

5. 代码架构逻辑：

（1）页面层：content-script注入当前页面，生成功能框，监听鼠标事件，筛选文字信息，动态改变数据，通过vue动态渲染dom，在发出截屏信息后获取backgroud层发送过来的图片信息

（2）背景层：监听message信息，根据传递过来的值类型，进行多类型截屏，然后将图片数据返回给页面层

6. content-script.js 页面代码逻辑：

（1）抓取页面文字信息

getAllTags(){var elems = $('#plugin-body').get(0).getElementsByTagName('*');$('a').removeAttr("href");for(var i=0;i<elems.length;i++){elems[i].addEventListener('mousedown',(e)=>{if(this.focusInputIndex)this.inputData[this.focusInputIndex] = e.target.innerText;e.stopPropagation();e.cancelBubble = true;})elems[i].addEventListener('mouseup',(e)=>{this.cancelText();e.stopPropagation();e.cancelBubble = true;})elems[i].index = i;elems[i].onmouseover = function(e){// 插件边框for(var j=0;j<elems.length;j++){if(elems[j] == this){continue;}elems[j].classList.remove('pluginRedBorder');}// 添加样式this.classList.add('pluginRedBorder');e.stopPropagation();e.cancelBubble = true;};}
}

（2）窗口截屏核心代码：

//content-script.js 发出截屏通知windowCapture(){this.isShow = false;setTimeout(()=>{chrome.runtime.sendMessage({event:'windowCapture',value:''},(data)=>{this.defaultImage = data;this.isShow = true;});},200);
}//background.js 收到通知并且做出截屏操作chrome.tabs.captureVisibleTab({ format: 'png', quality: 100},(dataUrl)=>{callback(dataUrl);
});

（3）当前网页全屏截图

//content-script.js 发出全网页截图通知，切传递过去当前的网页信息webCapture(){this.isShow = false;var pageSize = {scrollHeight: document.body.scrollHeight,scrollWidth: document.body.scrollWidth,clientWidth: document.documentElement.clientWidth,clientHeight: document.documentElement.clientHeight};//接收移动页面通知chrome.runtime.onMessage.addListener(function(message, sender, resCallback){switch(message.event){case 'scrollBy':window.scrollBy(message.value.x,message.value.y);break;case 'scrollTo':window.scrollTo(message.value.x,message.value.y);default:break;}resCallback({status:true});})//发送捕获setTimeout(()=>{chrome.runtime.sendMessage({event:'webCapture',value:pageSize},(data)=>{this.defaultImage = data;var image = new Image();image.src = data;image.onload = function(){$('body').append(this);}this.isShow = true;});},200);
}// background.js 收到通知后分步骤全网页截图new WebCapture(request.value,callback);/* 全页面捕捉 */function WebCapture(v,callback){this.currentY = 0;this.canvas = document.createElement('canvas');this.ctx = this.canvas.getContext('2d');this.sw = v.scrollWidth;this.sh = v.scrollHeight;this.cw = v.clientWidth;this.ch = v.clientHeight;this.tabId = 0;this.screenData = '';this.captureImgData = '';this.callback = callback;//初始化相关函数this.init();
}WebCapture.prototype = {constructor: WebCapture,//初始化方法init(){//1. 初始化获取tabIdthis.getTabId();//2. 获取当前tab页面的宽高且初始化canvas的宽高this.initWH();},//获取tabIdgetTabId(){chrome.tabs.getSelected((tab)=>{this.tabId = tab.id;//3. 初始化页面位置移动到顶部this.initPagePosition();})},//初始化canvas的宽高initWH(){this.canvas.width = this.sw;this.canvas.height = this.sh;},//初始化页面位置移动到顶部initPagePosition(){this.scrollPage('scrollTo',0,0);},//向Tab页面发出跳转通知scrollPage(event,x,y){chrome.tabs.sendMessage(this.tabId,{event,value:{x,y}},(res)=>{if(res.status){//执行绘制setTimeout(()=>{this.captureWebPage();},1000);}})},//将当前窗口内容转换成 image DatacaptureWebPage(){chrome.tabs.captureVisibleTab((data)=>{this.screenData = data;//分阶段绘制canvasthis.drawImage();})},//往Canvas中填充图片drawImage(){let img = new Image();img.src = this.screenData;img.onload = ()=>{//绘制到最底部if(this.currentY + this.ch >= this.sh){let lastHeight = this.ch - this.sh % this.ch;let y = 0;if(this.currentY == 0){y = 0;}else{y = this.currentY - lastHeight;}this.ctx.drawImage(img,0,0,this.cw,this.ch,0,y,this.cw,this.ch);this.getImage();}else{ //还没有绘制到最底部this.ctx.drawImage(img,0,0,this.cw,this.ch,0,this.currentY,this.cw,this.ch);this.currentY += this.ch;this.scrollPage('scrollBy',0,this.currentY);}   };},//获取到最终的图片getImage(){this.captureImgData = this.canvas.toDataURL('image/png');this.callback(this.captureImgData);}
}

（4）自定义区域拖拽截屏

//content-script.js 发出自定义区域截屏通知，切传递过去当前的网页信息//区域截屏
areaCapture(){var that = this;this.isShow = false;var pageSize = {clientWidth: document.documentElement.clientWidth,clientHeight: document.documentElement.clientHeight,x:0,y:0,width:0,height:0};var xmlns = 'http://www.w3.org/2000/svg';var dom = document.createElementNS(xmlns,'svg');var rect = document.createElementNS(xmlns,'rect');dom.setAttribute('class','captureScreenBox');dom.setAttribute('width',pageSize.clientWidth);dom.setAttribute('height',pageSize.clientHeight);dom.setAttribute('viewBox',`0 0 ${pageSize.clientWidth} ${pageSize.clientHeight}`);dom.setAttribute('xmlns',xmlns);$(dom).append(rect);//点击拖拽自定义选区$(dom).on('mousedown',(e)=>{var x1 = e.clientX;var y1 = e.clientY;var x2 = 0;var y2 = 0;rect.setAttribute('x',x1);rect.setAttribute('y',y1);$(dom).on('mousemove',(e)=>{x2 = e.clientX;y2 = e.clientY;rect.setAttribute('width',Math.abs(x1-x2));rect.setAttribute('height',Math.abs(y1-y2));pageSize = Object.assign({},pageSize,{x:x1,y:y1,width:Math.abs(x1-x2),height:Math.abs(y1-y2)})});$(dom).on('mouseup',(e)=>{sendMessage();$(dom).hide();$(dom).off();})});//发出生成图片的通知function sendMessage(){chrome.runtime.sendMessage({event:'areaCapture',value:pageSize},(data)=>{that.defaultImage = data;var image = new Image();image.src = data;image.onload = function(){$('body').append(this);}that.isShow = true;});}$('body').append(dom);
}// background.js 收到通知后进行自定义区域截屏new AreaCapture(request.value,callback);function AreaCapture(v,callback){this.canvas = document.createElement('canvas');this.ctx = this.canvas.getContext('2d');this.cw = v.clientWidth;this.ch = v.clientHeight;this.vw = v.width;this.vh = v.height;this.offsetX = v.x;this.offsetY = v.y; this.tabId = 0;this.screenData = '';this.captureImgData = '';this.callback = callback;//初始化相关函数this.init();
}AreaCapture.prototype = {constructor: AreaCapture,//初始化方法init(){//1. 初始化获取tabIdthis.getTabId();//2. 获取当前tab页面的宽高且初始化canvas的宽高this.initWH();},//获取tabIdgetTabId(){chrome.tabs.getSelected((tab)=>{this.tabId = tab.id;this.captureWebPage();})},//初始化canvas的宽高initWH(){this.canvas.width = this.vw;this.canvas.height = this.vh;},//将当前窗口内容转换成 image DatacaptureWebPage(){chrome.tabs.captureVisibleTab((data)=>{this.screenData = data;//分阶段绘制canvasthis.drawImage();})},//往Canvas中填充图片drawImage(){let img = new Image();img.src = this.screenData;img.onload = ()=>{this.ctx.drawImage(img,this.offsetX,this.offsetY,this.vw,this.vh,0,0,this.vw,this.vh);this.getImage();};},//获取到最终的图片getImage(){this.captureImgData = this.canvas.toDataURL('image/png');this.callback(this.captureImgData);}
}

7. manifest.json核心配置：

{"name": "抓取网页内容、对网页进行多类型截屏","description": "","version": "1.0","permissions": ["activeTab","*://*/*","unlimitedStorage","storage","pageCapture","tabs","<all_urls>"],"background": {"scripts": ["scripts/background.js"],"persistent": false},"content_scripts": [{"matches": ["*://*.baidu.com/*"], "js": ["scripts/vue.js","scripts/jquery.js","scripts/content-script.js"],"css" : ["css/bootstrap.min.css"]}],"browser_action": {"default_title": "Set this page's color.","default_icon": "icon.png","default_popup": "popup.html"},"manifest_version": 2
}

8. 扩展文件目录：

  |— catch_web_page_content|— css|— bootstrap.min.css|— images|— scripts|— background.js|— content-script.js|— jquery.js|— popup.js|— vue.js|— icon.png|— manifest.json|— popup.html

7. github地址：

GITHUB源代码直通车 >>

VUE制作谷歌浏览器多类型截屏、抓取信息的插件相关推荐

网页怎么算切屏_十种切屏抓取方法(图形)
屏幕截取招招看!教你十种屏幕抓取方法(图形) 说起屏幕截图,相信大家都不会陌生:随意翻翻每期的<电脑报> ,哪篇不是图文并茂 ? 但是对于刚刚接触电脑的朋友来说, 对如何进行抓图还摸不着 ...
用HyperSnap实现滚屏抓取多屏网页
用HyperSnap实现滚屏抓取多屏网页你完全不必耐心的看完所有内容,这里想说明的无非是以下2点: 1. 滚屏内容抓取:在HyperSnap的Active Window(ctrl+shift+w)抓 ...
关于网页抓取信息 Jsoup 和 HttpUnit 的使用
之前看了看洪祥的csdn app 制作,里面有从网页抓取数据的. 之前对这块操作没有接触过,所以网上差了一些资料,现在整理下相关的内容. 首先是关于Jsoup , Jsoup 是网页抓取的首选.但是 ...
《精通Wireshark》—第1章1.5节抓取信息的方式
本节书摘来自异步社区<精通Wireshark>一书中的第1章1.5节抓取信息的方式,作者[印度]Charit Mishra(夏里特米什拉),更多章节内容可以访问云栖社区"异步社 ...
PHP PDF内容识别抓取信息方法
PHP PDF内容识别抓取信息方法 PDF Parser 使用 PDF Parser 参考:http://www.pdfparser.org/ (注意:composer.json 更新 pdfpa ...
截屏快捷键（windows）自带截屏,不需要安装任何插件
截屏快捷键(windows)自带截屏,不需要安装任何插件方案一:电脑自带截屏,不需要QQ Shift+win+s即可截图(推荐使用) 方案二:搜狗输入法下载自带:Ctrl+Shift+x poste ...
QQ截屏抓级联菜单、下拉菜单及右键弹出菜单图
QQ方便的截屏功能大家都已经玩过了,又给聊天增添了不少乐趣.只要在浏览网页时发现什么值得共享的东东,单击捕捉屏幕按钮即可搞定.这对那些被QQ尾巴整怕了,看到链接就会浑身发抖的人来说,可以长舒一口气了. ...
Vue 实现页面一键截屏功能
1,安装所需要的包: npm i html2canvas --save //将页面内容区域转化为图片格式 2,在你的页面引入html2canvas 组件 import html2canvas from ...
python统计自己微信好友并抓取信息
前几天统计自己好友性别,看看男女比例,发现竟然还有分类不是男女的,很好奇都是谁,所以空闲下来抓取所有好友看一下. 这边使用了itchat库,网上资料很多.不多说,直接上代码 import itchat ...

VUE制作谷歌浏览器多类型截屏、抓取信息的插件

VUE制作谷歌浏览器多类型截屏、抓取信息的插件相关推荐

最新文章

热门文章