chrome plug 中级教程

前言：之前已经学习过chrome的入门教程(初级教程)，那这篇教程是讲如何用ecp.js进行插件开发

 

---

 【ecp是什么？】

为什么要写ECP？

1、原chrome的3个工作区之间的通信机制编写起来比较麻烦，导致可读性和维护性较差。

2、由于chrome插件的及时更新需求较强，故急需一个连通各个工作区的事件通信机制，且这种机制应该是能同时多方通信的。

3、原通信机制不能传函数作为参数，导致有过多的回调嵌套，维护性较差

基于以上种种，ecp就出现了。ecp主要也是为了解决事件通信的问题，ecp的原则是"easy chrome plug"，让写chrome插件更加简单。

 

【使用ECP作用是?】

下面用两张图来说明ecp和原生的区别

          

                                  原生通信                                                                            ECP通信   

通过上面两张图，原生的chrome通信机制，各个区是分开的，而ECP就像是把各个工作区连通起来，成为一个整体。

 

 

---

 【开始使用ECP】

首先给出3个工作区的代码，点击下载ECP

-- content --

ecp.trigger('ecp_init',function _return(data){
    var _sender = data._sender;
    console.log(_sender);

    ecp.on('start',function (data){
        console.log(data);
        return {start_1 : 'start_1'}
    });

    ecp.on('start',function (data){
        if (ecp.type(data) == 'function'){
            data();
        }else{
            console.log(data)
        }
        return {start_2 : 'start_2'}
    });

    ecp.trigger('start',"content触发");
})

-- background --

ecp.trigger('start',"background触发");

-- popup --

ecp.trigger('start',function (data){
    console.log('我是函数,从content中拿到的参数是->',data);
},function _return(data){
    console.log(data)
});

•  可以看到，3个工作区都trigger了一个'start'的事件，3个区都会分别在content触发了两次start(包括content自己)，因为在content绑定了两次。ecp_init是ecp默认的初始化事件，一般可以在content的所有代码都在ecp_init事件里执行，这样可以确保content执行之前，background肯定是已经执行了，更主要是可以获取到_sender对象，这个对象是原sender对象，这个对象有很多有用的数据。而且在每次的trigger都附带一个_sender对象。
• 如果想接收事件绑定返回的数据，则可以在trigger时带上一个名为_return的函数，即可在这个函数的第一个参数获取数据。上面代码popup工作区中，第一个参数是函数，且可以在函数中传参。
• 以上就是ecp的通信过程，每个工作区只需关注自己设定好的事件。

 

 

---

 【ECP API】

on : 事件绑定

trigger : 事件触发

off : 事件移除

extend ：对象合并

type : 对象类型判断