Блог

Главная - Вопросы по программированию - Отладка `Неожиданного завершения ошибки ввода JSON` в скрипте содержимого

Отладка `Неожиданного завершения ошибки ввода JSON` в скрипте содержимого

#javascript #google-chrome-extension #fetch

#javascript #google-chrome-расширение #выборка-api

Вопрос:

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

Ошибка, которую я получаю, заключается в Uncaught (in promise) SyntaxError: Unexpected end of JSON input

Я также пробовал режим инкогнито с отключенными другими расширениями, но это ничего не дало.

Тем не менее, он полностью работает в моем браузере Brave.

 const getRequest = function (url) {
  return window.fetch(url, {
    method: 'GET'
  }).then(res => res.json());
}

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

1. Я получил false @Xufox

2. нет, ничего, просто пустое

3. Тогда, похоже, ответ пустой.

4. Проверьте запрос, тело его ответа и его заголовки в devtools. Пока это звучит как ошибка в Chrome, которую вы можете проверить, попробовав в гораздо более старой переносимой версии.

5. У меня было рабочее расширение в Chrome Web Store, которое теперь выдает ту же ошибку в последней версии Chrome. Я пока понятия не имею, почему, но дам вам знать, если найду решение.

Ответ №1:

Выборки из разных источников (CORS) больше не разрешены в веб-расширениях Chrome (скрипты содержимого). Запрос будет выполнен, но тело ответа всегда будет пустым, вот почему вы получаете ошибку при попытке выполнить синтаксический анализ в формате JSON.

Для повышения безопасности в скриптах содержимого в расширениях Chrome скоро будут запрещены выборки из разных источников. Вместо этого такие запросы могут выполняться с фоновых страниц расширения и при необходимости передаваться скриптам содержимого.

Смотрите: Изменения в запросах из разных источников в скриптах содержимого расширений Chrome

Когда требуются выборки из разных источников, выполняйте их с фоновой страницы расширения, а не в скрипте содержимого. Передавайте ответ скриптам содержимого по мере необходимости (например, с использованием API-интерфейсов расширения обмена сообщениями). Например:

Старый скрипт содержимого, выполняющий выборку из разных источников:

 var itemId = 12345;
var url = "https://another-site.com/price-query?itemId="  
         encodeURIComponent(request.itemId);
fetch(url)
  .then(response => response.text())
  .then(text => parsePrice(text))
  .then(price => ...)
  .catch(error => ...)

Новый скрипт содержимого, запрашивающий его фоновую страницу для извлечения данных вместо этого:

 chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

Новая страница фона расширения, выборка с известного URL и ретрансляция данных:

 chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == "queryPrice") {
      var url = "https://another-site.com/price-query?itemId="  
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  });