Как я могу манипулировать всплывающими окнами DOM в Crossrider?

У меня есть приложение crossrider, в котором я создал html-файл в папке «Ресурсы». В background.js я сделал это:

Таким образом, html-файл открывается, если я нажимаю кнопку. Моя цель состоит в том, чтобы в зависимости от того, какой URL-адрес открыл пользователь, сервер доставлял некоторые данные в формате JSON, которые я хочу включить во всплывающий файл html. Код для запроса сервера находится в extension.js и работает. Но когда я пытаюсь манипулировать чем-либо во всплывающем html с помощью jquery из extension.js, это просто не работает.

Я также пытался манипулировать DOM html из background.js, но это тоже не работает. Также пытался использовать API обмена сообщениями, включив это в событие onClick background.js.

appAPI.message.toPopup({action:'savetos'});

и это в файл html:

appAPI.ready(function ($) {
    appAPI.browserAction.onClick(function () {
        appAPI.browserAction.setPopup({
            resourcePath: 'terms.html',
            width: 455,
            height: 930
        });
    });
});

var lid = appAPI.message.addListener(function (msg) {
    if (msg.action == 'savetos') {
        alert("Hallo");
    }
});

Тоже не работает. My Extension ID:48616

Спасибо!


html jquery dom crossrider
person user2448801    schedule 24.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вступительное примечание: я проверил предоставленный идентификатор расширения, и файл background.js пуст, поэтому я предполагаю, что вы работаете локально и не загрузили свой последний код. Следовательно, я отвечаю на основе кода, представленного в этой теме, и в целом с точки зрения того, как работают всплывающие окна.

Сначала позвольте мне обобщить то, что я понимаю из вашего вопроса:

  1. Вы хотите добавить в расширение кнопку, при нажатии которой открывается всплывающее окно с HTML из ваших ресурсов.
  2. Вы хотите использовать jQuery для настройки всплывающего HTML с удаленным содержимым в зависимости от URL-адреса активной вкладки.

Для реализации этого сценария необходимо работать в 3 областях (страница расширения, фон, и всплывающее окно) и используйте обмен сообщениями между ними. Таким образом, вы можете достичь своей цели следующим образом:

1) В фоновом режиме настройте кнопку браузера, чтобы открыть всплывающее окно. [ПРИМЕЧАНИЕ: вы не можете настроить кнопку так, чтобы она одновременно использовала обработчик onClick и всплывающее окно. Для получения дополнительной информации см. примечания в appAPI.browserAction]

background.js:

appAPI.ready(function ($){
    // Create popup browser button
    appAPI.browserAction.setResourceIcon('icon.png');
    appAPI.browserAction.setPopup({
        resourcePath: 'terms.html',
        height: 930,
        width: 455
    });
});

2) В области всплывающего окна отправьте сообщение в область расширения, чтобы получить URL-адрес страницы, и когда ответ будет получен, сделайте запрос на удаленный контент и вставьте его в HTML через jQuery. ПРИМЕЧАНИЕ. Вы можете напрямую изменять HTML-код всплывающего окна только в области действия всплывающего окна.

terms.html:

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script type="text/javascript">
        function crossriderMain($) {
            // Listen for response from active tab
            appAPI.message.addListener(function(msg) {
                // If response is the page URL
                if (msg.type === 'setPageUrl') {
                    // make request to remote server for content with the page URL as a param
                    appAPI.request.get({
                        url: 'http://example.com?url=' + msg.url,
                        onSuccess: function (response, additionalInfo){
                            // Convert received JSON string to object
                            var responseObj = appAPI.JSON.parse(response);
                            // Clear loading message
                            $('#remote-content').text('');
                            // add content to popup HTML
                            $(responseObj.html).prependTo('#remote-content');
                        }
                    });
                }
            });
            // Request page URL from active tab
            appAPI.message.toActiveTab({type: 'getPageUrl'});
        }
        </script>
    </head>
    <body>
        <div id='remote-content'>Loading ...</div>
    </body>
</html>

3) В области расширения обрабатывать запросы на URL-адрес страницы.

расширение.js:

appAPI.ready(function ($){
    // Listen for request for page URL
    appAPI.message.addListener(function(msg) {
        // Send page URL to popup
        appAPI.message.toPopup({
            type: 'setPageUrl',
            url: encodeURIComponent(location.href)
        });
    });
});

Если у вас есть какие-либо конкретные запросы, которые вы хотите сохранить в тайне, пожалуйста, не стесняйтесь обращаться в службу поддержки Crossrider ([email protected]).

[Отказ от ответственности: я сотрудник Crossrider]

person Shlomo    schedule 24.12.2013
comment
Спасибо! Это очень помогло! - person user2448801; 19.01.2014