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

Question

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

Я получаю ошибку Uncaught (in promise) SyntaxError: Unexpected end of JSON input

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

Однако он полностью работает в моем браузере Brave.

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

Answer 1

Выборки из разных источников (CORS) больше не разрешены в Chrome Web Extensions (скрипты содержимого). Запрос будет выполнен, но тело ответа всегда будет пустым, поэтому вы получаете сообщение об ошибке при попытке выполнить синтаксический анализ в 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.
    }
  });