Блог

Главная - Вопросы по программированию - Объединение двух вызовов XHR с использованием chrome.runtime.SendMessage

Объединение двух вызовов XHR с использованием chrome.runtime.SendMessage

#javascript #reactjs #google-chrome-extension

#javascript #reactjs #google-chrome-расширение

Вопрос:

У меня есть расширение Chrome, и я рефакторингую свои вызовы XHR в фоновый скрипт для доступа через обмен сообщениями в соответствии с новыми требованиями Chrome 73 и выше для предоставления данных XHR для сценариев содержимого. У меня есть два вызова XHR — первый захватывает данные, а второй вызов XHR использует значение, возвращенное из первого, как часть его запроса.

 // background.js
// First Call
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    if (request.contentScriptQuery === 'getProductData') {
      let dataUrl = C.API(request.term);
      $.ajax({
        url: dataUrl,
        type: 'get',
        mode: 'no-cors',
        dataType: 'json',
      }).then(response => response)
        .then(text => sendResponse(text))
        .catch(err => console.log(err));
      return true;
    }
  });

// Second Call
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    if (request.contentScriptQuery === 'getProductGroupData') {
      const dataUrl = C.PRODUCT_GROUPS_API(request.term);
      $.ajax({
        url: dataUrl,
        type: 'get',
        mode: 'no-cors',
        dataType: 'json',
      })
        .then(response => response)
        .then(text => sendResponse(text))
        .catch((err) => {
          console.log(err);
        });
      return true;
    }
  });

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

 // Content Script
// React component. fetchData() called from inside componentDidMount()
fetchData() {
    chrome.runtime.sendMessage(
      { contentScriptQuery: 'getProductData', type, term: searchTerm },
      text =>
        this.setState({
          // assign values from returned data
          superCategoryId: text.content[0].productGroupHierarchy.superCategoryId,          
        }),
    );
  
    chrome.runtime.sendMessage(
      { contentScriptQuery: 'getProductGroupData', term: this.state.superCategoryId },
      text =>
        this.setState({
            // assign values from returned data
        }),
    );
}

Существует ли какое-либо ограничение на отправку нескольких сообщений сообщения слушателю в фоновом скрипте? Первый вызов XHR и сообщение возвращает данные, второй, похоже, вообще не выполняется (я заменил сообщение return сообщением console, и оно тоже не возвращается.

Комментарии:

1. Нет такого ограничения AFAIK. Это то, что нужно отлаживать в devtools. Установите точку останова в скрипте содержимого и в фоновом прослушивателе скриптов, запустите код, выполните его построчно и проверьте переменные, посмотрите, что происходит на обоих концах.

2. С другой стороны, я никогда не видел, чтобы для onMessage использовалось несколько прослушивателей, поэтому может быть ограничение — в конце концов, это упрощенный одноразовый обмен сообщениями — или даже ошибка.