使用vue 开发chrome 插件

Posted BBinChina

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue 开发chrome 插件相关的知识,希望对你有一定的参考价值。

原文

项目中需要从百度图片和谷歌图片批量抓取一系列关键词的图片,而且需要是大图资源,不能是缩略图。在后端通过http请求直接拉取内容抓取,遇到下面两个问题:

有的大图地址是在前端通过脚本生成的,拉取页面内容之后无法直接得到大图地址
翻页请求并不是简单的pageindex++,拿到下一页内容。抓取第一页后边的内容也需要分析翻页请求链接组装,以及返回的数据如何解析。
这两个问题导致通过后端爬取大图列表十分困难。于是我想起了以前玩过的杂技——浏览器插件。通过javascript控制浏览器打开网页,搜索关键词,页面渲染完毕之后拿到大图地址,第一页拿完之后让页面滚动到底部,继续加载图片,and so on!直到拿到足够数量的图片。做完这个小工具,想着总结一下经验,加深点印象,免得以后某一天有需要再来做的时候一脸懵逼,于是抽时间慢慢写下这边文章记录一下我对浏览器插件的认识。

什么是chrome浏览器插件
地址栏右侧那些icon就是一个个浏览器插件。点击插件图标可以弹出插件窗口。我所理解的chrome浏览器插件功能有三大块:

弹出一个窗口,让用户执行操作,或者显示信息
向网页中注入脚本文件,执行某些功能
调用chrome提供的native api,执行浏览器tab页开关、窗口开关、文件下载等操作
如上图腾讯电脑管家的插件,就是用来提供广告过滤功能的。它的工作原理应该就是给需要过滤的网址插入一段脚本,来把页面上的广告标签干掉。

chrome插件开发
文档地址:https://developer.chrome.com/extensions/overview

代码模块
chrome插件完全由javascript、html、css开发,和上面的插件功能相对应,代码也可以分为三大模块:

popup 弹出窗口代码集合。弹窗UI通过html+css开发,弹窗中也可以引用js脚本来控制交互操作。每个弹窗都相当于一个独立的tab页,运行在其中的js脚本拥有一个独立的上下文。
inject.js。注入网页文件的脚本。需要注意的是,注入的脚本上下文也是独立的,它可以操作目标网页DOM,但是并不在目标网页脚本的上下文中。
background.js。插件后台脚本,拥有独立的上下文,且此上下文是唯一的,无论浏览器打开多少个tab页,background.js的上下文都不会变化,除非关闭浏览器。
这三块代码之间的关系我画了个图方便理解:

图中,黑色的部分代表chrome原生部分,其他的每一个方块都拥有一个独立的javascript上下文。

manifest.json
chrome插件有一个比较重要的配置文件,manifest.json,用来指定各个模块的代码文件名、插件权限、插件图标、inject脚本插入时机等

{
  "name": "imagefetcher",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "抓取图片网站大图文件",
  "background": { "scripts": ["dist/background.js"] },
  "icons": { "16": "icon.jpg",
    "48": "icon.jpg",
    "128": "icon.jpg" },
  "permissions": [
    "tabs","downloads",
    "http://*.baidu.com/",
    "http://*.google.com.hk/"
  ],
  "browser_action": {
    "default_icon": "icon.jpg" ,
    "default_title": "抓取图片",
    "default_popup": "index.html"
  },
  "content_scripts":[{
    "run_at":"document_end",
    "matches":["<all_urls>"],
    "js":["lib/jquery-2.0.0.min.js", "dist/inject.js"]
  }]
}

background指定background代码文件路径;content_scripts指定inject的脚本列表,以及注入的条件、注入时机;browser_action中的default_popup指定popup弹出的html文件路径;permissions指定能访问的网页或chrome提供的一些功能的权限;icons指定插件图标。

模块间通信
按照上面的结构,很容易可以联想到各个模块的分工:popup模块 的代码负责显示弹窗,让用户输入关键词,下发开始抓取指令;显示抓取进度;下发下载指令。inject.js负责分析网页的DOM,拿到大图资源链接,并翻页,直到获取足够数量的图片。background.js负责汇总各个网页抓取的结果,并将结果显示到弹窗中。由于这些脚本拥有各自的执行上下文,并不能通过直接调用函数的方式来通信,所以我们需要通过chrome提供的方式来进行模块间的通信。

与background的通信
在popup中或者inject中发出消息给background接收。

chrome.runtime.sendMessage({action:ACTION.START_FETCH,data:xxxx});

sendMessage函数还可以接受一个回调函数,处理收到消息之后处理的返回结果。 rome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)

在background.js中监听消息:

chrome.runtime.onMessage.addListener(function(request, sender, sendRequest){
    var data=request.data;
    var fetch;
    if(data.tab_id){
        fetch=window.FETCH_ITEMS.getByTabId(data.tab_id);
    }
    //开始抓取消息,读取抓取队列的第一个,开始抓取,抓取完成之后继续读
    if(request.action==ACTION.START_FETCH){
        __fetch_list.push(data);
        readFetchList();
    }
    else if(request.action==ACTION.FETCH_PROGTRESS){
        fetch.urls=data.urls;
    }
    //抓取完成,修改fetch_item状态,若存在弹窗,通知弹窗刷新视图
    else if(request.action==ACTION.FETCH_SUCCESS){
        fetch.status=DOWNLOAD_STATUS.SUCCESS;
        fetch.urls=data.urls;
    }
});

与inject的通信
要指挥inject的脚本执行一些操作,必须给inject发消息,而inject是注入网页中的,所以发消息第一步必须先获取tab页的tabid,然后将消息发给特定的tab页。在background中发出消息:

chrome.tabs.getSelected(function(tab){
    chrome.tabs.sendMessage(tab.id, data, function(response) {
        console.log(response);
    });
});

inject中接收消息:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    var data=request.data;
    //开始抓取
    if(request.action==ACTION.START_FETCH){
        var site=SITES.getSite(data.site);
        if(!site){
            sendResponse({err:1,message:"未实现此网页抓取"});
            return;
        }
        sendResponse({err:0});
        fetcher=require('./fetchors/'+data.site);
        fetcher(data).then(function(urls){
            data.urls=urls;
            chrome.runtime.sendMessage({action:ACTION.FETCH_SUCCESS, data:data}); //发送给background
        }).done()
    }
});

调试
不能调试还写什么代码! chrome插件的三大模块也是可以调试的,只不过都藏在各种犄角旮旯里边,下面扒一扒怎么分别给他们打断点。

background
打开chrome://extensions/点“检查视图”后边的链接,就可以打开控制台了,在source里边打上断点,调试走起

popup
在插件图标上右键——审查弹出内容,打开控制台,在source里边打上断点,调试走起

inject
按F12打开被注入的页面的控制台,点Sources,点右侧中间的Content Scripts,就可以看到这个页面被那些插件注入了脚本了,根据名称找到自己的脚本,打上断点,调试走起

使用vue开发chrome插件
vue带来的好处
干掉DOM操作
我开发的chrome插件是一个用来完成图片下载任务的插件。抓取过程中,需要显示抓取进度,并可以进行删除下载,其中涉及很多DOM操作。使用vue可以减少大量的dom操作代码,这个不细讲,参见http://vuejs.org/guide/

干掉复杂的通信
这个是我觉得用vue开发chrome插件最有价值的部分了,前边介绍了插件几大模块之间的通信,需要调用chrome提供的接口进行频繁的发送消息和监听处理。通过

chrome.extension.getBackgroundPage()

可以拿到插件background脚本的window对象,注意这个background的执行上下文是只有一个的,所以在插件运行期间我们可以用它来存储各个tab页抓取回来的数据。在popup的脚本中:

var FETCH_ITEMS=chrome.extension.getBackgroundPage().FETCH_ITEMS;
var vm=new Vue({
    el: '#wrapper',
    data: {
        FETCH_ITEMS: FETCH_ITEMS
    },
    methods:{
    }
});

这样,将从各个tab页抓取回来的数据push到background.js暴露出来的一个对象中,popup弹出的网页中就可以实时显示抓取进度了,不需要在popup和background之间编写大量的通信代码。至于各个tab页和background之间的通信,可以使用上面chrome提供的通信方式,也可以自己拿到background的window对象暴露出的变量,再进行操作。这里并没有复杂的视图更新和用户操作,所以怎么通信都无所谓了~

代码结构
按照上面理解的结构,每个模块的代码集中到一起。另外,插件中也允许根据路径直接访问插件中的资源,其路径是“chrome-extension://[extensionId]/[resourceName]” 。select目录中存放的是一个用来筛选图片的页面代码,在popup页面中直接跳转到/select.html即可打开此页面。

插件开发完成打包之后,把这些资源放到一个文件夹中然后打开chrome://extensions/选择上面的目录即可看到地址栏右侧出现插件的图标。


初次在chrome插件开发中使用vue的时候,遇到了这样一个问题:模型更新了,视图始终不更新,然后打开调试界面后运行vm.$mount("#wrapper");,视图却更新了。百思不得其解,google之,发现chrome插件中有些javascript代码写法和正常环境中有所不同,幸好vue居然贴心的为这种情况准备了一个特殊的包,不然就前功尽弃了 :(这里总结了一个经验,用前端框架开发的过程中最好不要使用.min的包,打包好的代码里边会去掉一些警告的逻辑… 把.min包替换成非压缩包之后,看到了这个错误:根据提示,在vue的项目里边找到了一个叫CSP的分支https://github.com/vuejs/vue/tree/csp/dist看文档说明,果然就是为插件开发定制的啊! 没想到那么偏门的场合他们也有关注到!

以上是关于使用vue 开发chrome 插件的主要内容,如果未能解决你的问题,请参考以下文章

chrome插件vue-devtools-master安装教程

为啥vue-devtools chrome插件安装完成了,但是控制台没有显示出来

使用Vuejs 开发chrome 插件的注意事项

vue.js 初体验— Chrome 插件开发实录

着手编写Chrome插件

Vue实战-第一天开发工具的使用