Отправка данных из всплывающего окна в extension.js не работает

Я работаю над расширением браузера, используя crossrider. Мне нужно отправить некоторые данные из всплывающего окна в extension.js

Мой код всплывающего окна

<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script type="text/javascript">
/************************************************************************************
  This is your Popup Code. The crossriderMain() code block will be run
  every time the popup is opened.

  For more information, see:
  http://docs.crossrider.com/#!/api/appAPI.browserAction-method-setPopup
*************************************************************************************/

function crossriderMain($) {
  // var to store active tab's URL
  var activeTabUrl = null;

  // Message listener for response from active tab
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'active-tab-url') activeTabUrl = msg.url;
  });

  // Request URL from active tab
  appAPI.message.toActiveTab({type: 'active-tab-url'});

    alert(activeTabUrl);
  // THE REST OF YOUR CODE
}
</script>

</head>
<body>

Hello World

</body>
</html>

Код Extension.js

appAPI.ready(function($) {
  // Message listener
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'active-tab-url')
      // Send active tab's URL to popup
      appAPI.message.toPopup({
        type: 'active-tab-url',
        url:encodeURIComponent(location.href)
      });
  });

  // THE REST OF YOUR CODE
});

Значение activeTabUrl не обновляется. Это дает значение NULL. PS: я могу общаться между background.js и всплывающим окном. Но по какой-то причине функция appAPI.message.toActiveTab у меня не работает. Где я делаю ошибку?

Background.js (Изменить)

var tabUrl='';
 /* appAPI.tabs.getActive(function(tabInfo) {
        tabUrl = tabInfo.tabUrl;
        }); */
 appAPI.message.addListener(function(msg) {
        appAPI.tabs.getActive(function(tabInfo) {
        tabUrl = tabInfo.tabUrl;
        });
       var dataString = '{"url":"'+tabUrl+'","access":"'+msg.access+'","toread":"'+msg.toread+'","comment":"'+msg.comment+'"}';
     alert(dataString);
     appAPI.request.post({
        url: 'REST API URL',
        postData: dataString,
        onSuccess: function(response, additionalInfo) {
            var details = {};
            details.response = response;
            appAPI.message.toPopup({
            response:response
        });

        },
        onFailure: function(httpCode) {
        //  alert('POST:: Request failed. HTTP Code: ' + httpCode);
        }
    });
  });

Рабочий код Background.js

appAPI.message.addListener(function(msg) {
    appAPI.tabs.getActive(function(tabInfo) {     
       var dataString = '{"url":"'+tabInfo.tabUrl+'","access":"'+msg.access+'","toread":"'+msg.toread+'","comment":"'+msg.comment+'"}';
    // alert(dataString);
     appAPI.request.post({
        url: 'http://fostergem.com/api/bookmark',
        postData: dataString,
        onSuccess: function(response, additionalInfo) {
            var details = {};
            details.response = response;
            appAPI.message.toPopup({
            response:response
        });

        },
        onFailure: function(httpCode) {
        //  alert('POST:: Request failed. HTTP Code: ' + httpCode);
        }
    });
    });
  });

javascript browser-extension crossrider
person Neel Kamal    schedule 10.01.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В этом примере кода переменная activeTabUrl устанавливается только после получения ответа от файла extension.js, так как обмен сообщениями по своей природе асинхронен. Следовательно, при вызове alert(activeTabUrl); в коде сообщение еще не было получено из кода extension.js, поэтому значение по-прежнему равно нулю, поскольку оно было инициализировано.

Чтобы использовать переменную activeTabUrl, вы должны дождаться сообщения из файла extension.js и, следовательно, вы должны поместить код, использующий переменную, в обратный вызов прослушивателя сообщений, желательно как функция. Также обратите внимание, что использование предупреждения в коде всплывающего окна приводит к закрытию всплывающего окна и, следовательно, не должно использоваться в области действия всплывающего окна.

Я протестировал следующий код всплывающего окна, который избавился от переменной, чтобы избежать путаницы, и передает URL-адрес активной вкладки в качестве параметра функции, вызываемой в прослушивателе сообщений, и он работал, как и ожидалось:

function crossriderMain($) {
  // Message listener for response from active tab
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'active-tab-url') ShowPageUrl(msg.url);
  });

  function ShowPageUrl(url) {
    $('#page-url').html('<b>Page URL</b>: ' + url);
  }

  // Request URL from active tab
  appAPI.message.toActiveTab({type: 'active-tab-url'});

    //alert(activeTabUrl);
  // THE REST OF YOUR CODE
}

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

person Shlomo    schedule 12.01.2014
comment
Это сработало. Но я думаю, что есть несколько ошибок, так как отправка сообщения из всплывающего окна и получение ответа занимает много времени. На некоторых вкладках даже после ожидания более 2 минут это не сработало. Поэтому его нельзя использовать в производстве. Но поскольку мне нужно отправить данные формы вместе с URL-адресом на мой сервер, поэтому при отправке формы я отправляю данные формы в extension.js, а оттуда я отправляю данные на свой сервер. Но опять же, он работает только для нескольких вкладок. Затем я попытался отправить данные формы в background.js, а оттуда на свой сервер. Но поскольку background.js загружается только один раз, он не может получить текущий URL-адрес вкладки. - person Neel Kamal; 13.01.2014
comment
В моем тестировании время отклика было очень быстрым ... менее секунды, как и следовало ожидать для небольшого объема данных, передаваемых через обмен сообщениями. Что касается URL-адреса, доступного в фоновом режиме, вы можете использовать appAPI. tabs.getActive в браузерах, в которых он поддерживается, или метод обмена сообщениями, аналогичный упомянутому в ответе, когда страница всегда отправляет сообщение в фоновую область с текущим URL-адресом при активации. - person Shlomo; 13.01.2014
comment
Я использовал appAPI.tabs.getActive. Но он не дает активный URL-адрес вкладки. Раньше я думал, что он дает URL-адрес вкладки, которая загружается первой. Но, протестировав его несколько раз, я обнаружил, что он дает URL-адрес предыдущей загруженной вкладки. Я добавил код в вопрос. - person Neel Kamal; 13.01.2014
comment
Допустим, в браузере открыто 10 вкладок. Я установил расширение и отправил форму в расширении с сайта crossrider.com. Затем я переключился, скажем, на stackoverflow и отправил форму. Но все же он дает URL-адрес crossrider.com. Затем, скажем, я перешел на другую вкладку (google.com). Теперь он даст URL-адрес переполнения стека. По этому шаблону он фактически дает URL-адрес предыдущей вкладки, а не активной вкладки, откуда я отправил форму в расширении :( - person Neel Kamal; 13.01.2014
comment
Теперь я нашел проблему в моем коде. Когда данные публикуются, tabUrl по-прежнему не обновляется. Но поскольку это глобальная переменная, она по-прежнему сохраняет предыдущий URL-адрес. Я сделал некоторые изменения в своем коде, и он отлично работает. :) - person Neel Kamal; 15.01.2014