Полезная информация

Многие проблемы быстрее решаются поиском по форуму и чтением FAQ, чем созданием новой темы и томительным ожиданием ответа.
  • Форумы
  •  » Разработка
  •  » Как создать двусторонний обмен данными: расширения с кодом инъекции?

№114-11-2012 12:44:35

kodnik
Участник
 
Группа: Members
Зарегистрирован: 12-02-2012
Сообщений: 6
UA: Chrome 25.0

Как создать двусторонний обмен данными: расширения с кодом инъекции?

Имеется расширение для Firefox, которое делает инъекцию кода JS в страницы.
Код для XUL:

Выделить код

Код:

window.addEventListener("load", function load(event){
document.addEventListener("TestEvnt", function (e) {
    var info = e.detail;
    if(info.cmd=='account_list') {
        consoleLog('... event account_list');
    }
}, false, true);
document.addEventListener("DOMContentLoaded", function (e) {
  var window = e.originalTarget.defaultView.wrappedJSObject;
  var inject = window.document.createElement('script');
  inject.type = 'text/javascript';
  inject.setAttribute('src','resource://apptab-notify/injscr.js');
  window.document.getElementsByTagName('head')[0].appendChild(inject);
}, false);
},false);

Код injscr.js:

Выделить код

Код:

var additionalInfo = {
        "cmd": 'account_list',
        "url": document.location.href
    };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent('TestEvnt', true, false, additionalInfo);
document.dispatchEvent(evt);

Как обеспечить двунаправленный обмен данными, что-бы код инъекции слушал события от расширения? Но не средствами Addon SDK!

Уже рассматривал вот такой вариант:

регистрировал обработчик событий в 'injscr.js'

Выделить код

Код:

window.addEventListener("TestEvnt2", function(event)
{
  var info = event.detail;
  consoleLog('... event OK!');
}, false);

А в коде хром будет генерироваться событие:

Выделить код

Код:

var event = document.createEvent("CustomEvent");
event.initCustomEvent("TextEvnt2", false, false, {'cmd':'test-cmd'});
gBrowser.contentWindow.dispatchEvent(event);

В результате - не срабатывает событие (нет ни каких сообщений об ошибках).

Отсутствует

 

№215-11-2012 15:13:14

SunnyDay
Участник
 
Группа: Members
Зарегистрирован: 09-07-2009
Сообщений: 44
UA: Firefox 16.0

Re: Как создать двусторонний обмен данными: расширения с кодом инъекции?

Есть много способов, первый - WJO:

Выделить код

Код:

//в JS расширения
alert(content.document.defaultView.wrappedJSObject.some_target_JS_var);//читаем внешнюю переменную
content.document.defaultView.wrappedJSObject.some_target_JS_var = 'afk';//записываем внешнюю переменную
content.document.defaultView.wrappedJSObject.some_target_JS_func('fukfuk');//выполняем внешнюю функцию

второй более архитектурный(observer) - свои события:

Выделить код

Код:

//в JS target-документа
...
MyEvent = document.createEvent("Events")
MyEvent.initEvent("MyEvent", true, false);
...
MyEvent.someparam = someval;
SomeDomElement.dispatchEvent(MyEvent);

//в JS расширения
content.document.getElementById('SomeDomElement').addEventListener('MyEvent',  some_dispatch_function);
var some_dispatch_function = function(event){
 alert(event.target.getAttribute('id'));
 alert(event.someparam);
}

Отредактировано SunnyDay (15-11-2012 15:25:03)

Отсутствует

 

№315-11-2012 15:27:31

kodnik
Участник
 
Группа: Members
Зарегистрирован: 12-02-2012
Сообщений: 6
UA: Chrome 25.0

Re: Как создать двусторонний обмен данными: расширения с кодом инъекции?

Всем спасибо! Проблема решена. Помогла статья MDN

Вот моя реализация
В файле инъекции:

Выделить код

Код:

var additionalInfo = {
        "cmd": 'account_list',
        "url": document.location.href
    };

    var request = document.createTextNode(JSON.stringify(additionalInfo));
    request.addEventListener("something-response", function(event) {
        console.log('... something-response');
        var info=JSON.parse(event.target.nodeValue);
        $('body').css('background-color', info.color);
    }, false);
    document.head.appendChild(request);
    var event = document.createEvent("HTMLEvents");
    event.initEvent("something-query", true, false);
    request.dispatchEvent(event);

В js файле для XUL:

Выделить код

Код:

window.addEventListener(
    'load', function(event) {
document.addEventListener("something-query", function(event) {
        consoleLog('... something-query');
        var node = event.target;
        if (!node || node.nodeType != Node.TEXT_NODE) return;
        var info = JSON.parse(node.nodeValue);
        var doc = node.ownerDocument;
        
        if (info.cmd == 'account_list') {
            consoleLog('... event account_list');
            var event = doc.createEvent("HTMLEvents");
            event.initEvent("something-response", true, false);
            node.nodeValue = JSON.stringify({
                'color': '#999'
            });
            node.dispatchEvent(event);
        } else if (info.cmd == 'page_options') {
            consoleLog('page_options');
        }
    }, false, true);
}, false);

Отредактировано kodnik (15-11-2012 15:28:21)

Отсутствует

 
  • Форумы
  •  » Разработка
  •  » Как создать двусторонний обмен данными: расширения с кодом инъекции?

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]