Расширения Chrome: преодоление разрыва между слоями

Теперь пример (наконец-то)!

Я создал простое расширение для симпатичных страниц, которое я называю iHeart (вы можете найти исходный код на моем github ).

Это простая кнопка с сердцем на левой стороне экрана. При нажатии пользователь может добавить комментарий и сохранить его. Сохраненные страницы будут перечислены во всплывающей кнопке расширения:

Песчаные детали

Каждый слой имеет свои собственные методы говорения и прослушивания :

Фон

запечатленное

 _this.tell = function (message, data){

    var data = data || {};

    chrome.tabs.getSelected(null, function (tab){

        if (!tab) return;

        chrome.tabs.sendMessage(tab.id, {

            message   : message,

            data : data

        });

    });

};

Listening

 function onPostMessage (request, sender, sendResponse){

    if (!request.message) return;

    if (request.data.view){

        _this.tell(request.message, request.data);

        return;

    }

    processMessage(request);

};

ContentScript

запечатленное

 function tell (message, data){

    var data = data || {};

    // send a message to "background.js"

    chrome.extension.sendRequest({

        message : message,

        data : data

    });

};

Listening

 // messages coming from iframes and the current webpage

function dom_onMessage (event){

    if (!event.data.message) return;

    // tell another iframe a message
    if (event.data.view){
        tell(event.data);

    }else{

        processMessage(event.data);

    }

};

// messages coming from "background.js"

function background_onMessage (request, sender, sendResponse){

    if (request.data.view) return;

    processMessage(request);

};

Iframe

запечатленное

 _this.tell = function (message, data){

var data = data || {};

data.source = _view;

window.parent.postMessage({

        message   : message,

        data : data

    }, '*');

};

Listening

 function background_onMessage (request, sender, sendResponse){

    // make sure the message was for this view (you can use the "*" wildcard to target all views)

    if (

        !request.message ||

        !request.data.view ||

        (request.data.view != _view && request.data.view != '*')

    ) return;

    // call the listener callback

    if (_listener) _listener(request);

};

Процесс общения довольно прост. Когда вы посещаете веб-страницу и вам нравится то, что вы видите (это может быть что угодно, это то, что вам нравится, я не буду судить), вы затем нажимаете кнопку iHeart . Затем кнопка говорит, чтобы открыть комментарий iframe.

JS / Iframe / heart.js

 function heart_onClick (event){

    $('.heart').addClass('active');

    _iframe.tell('heart-clicked');

};

Затем он обрабатывает сообщение в ContentScript и открывает всплывающее окно комментария.

JS / inspect.js

 function processMessage (request){

if (!request.message) return;

    switch (request.message){

        case 'iframe-loaded':

            message_onIframeLoaded(request.data);

            break;

        case 'heart-clicked':

            message_onHeartClicked(request.data);

            break;

        case 'save-iheart':

            message_onSaved(request.data);

            break;

    }

};

...

function message_onHeartClicked (data){

    var comment = getView('comment');

    comment.iframe.show();

    tell('open-comment', {

        view:'comment',

        url:window.location.href,

        title:document.title

    });

};

Появится всплывающее окно с комментарием, которое отображает заголовок текущей веб-страницы под полем для комментариев

JS / Iframe / comment.js

 function onMessage (request){

    switch (request.message){

        case 'open-comment':

            message_onOpenComment(request.data);

            break;

        case 'website-is-hearted':

            message_onIsHearted(request.data);

            break;

    }

};

...

function message_onOpenComment (data){

    $('.page-title').html(data.title);

};

Когда кнопка сохранения нажата, iframe комментария отправляет информацию обратно в ContentScript.

JS / Iframe / comment.js

 function save_onClick (event){

    var comment = $('#comment').val() || '';

    _iframe.tell('save-iheart', {

         comment   : comment

    });

};

ContentScript скрывает комментарий iframe и указывает фону сохранить все это.

JS / inject.js

 function message_onSaved (data){

    var comment = getView('comment');

    comment.iframe.hide();

    tell('save-iheart', {

        url:window.location.href,

        title:document.title,

        comment:data.comment

    });

};

И, наконец, Background завершает все детали, сохраняя сайт в массиве.

JS / background.js

 function onPostMessage (request, sender, sendResponse){

    if (!request.message) return;

    if (request.data.view){

        _this.tell(request.message, request.data);

        return;

    }

    switch (request.message){

        case 'save-iheart':

        message_onSaved(request.data);

        break;

    case 'all-iframes-loaded':

        message_allIframesLoaded(request.data);

        break;

    }

};

…

function message_onSaved (data){

    _websites.push({

        url           : data.url,

        title         : data.title,

        comment       : data.comment

    });

};

И … администраторы сделали свою работу

Вот и все. Это мое решение проблемы связи между несколькими типами слоев, и это было не слишком сложно …

Теперь, если бы я мог так же легко решить проблемы общения в моих личных отношениях, это было бы здорово, спасибо: P

Этот пример можно было бы сделать намного дальше, рассматривая проверки данных, сохраняя любимые веб-страницы в базе данных, динамически изменяя размер содержимого iframes , добавляя анимацию в расширение, чтобы сделать его более увлекательным в использовании. Все это прекрасно и уже выполнимо, но выходит за рамки этой статьи.