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;
        };
    }
}

ÿ