javascript - 在内容脚本上调试 `Unexpected end of JSON input Error`

我遇到了一个非常奇怪的错误，即我的提取功能不适用于我的内容脚本，但可以从弹出页面使用。

我收到的错误是Uncaught (in promise) SyntaxError: Unexpected end of JSON input
我还尝试了禁用其他扩展名的隐身模式，但这没有任何作用。

但是，它可以在我的Brave浏览器上完全运行。

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

最佳答案

Chrome Web Extensions(内容脚本)不再允许跨域提取(CORS)。该请求将通过，但是响应主体将始终为空，这就是为什么在尝试解析为JSON时会出现错误。



另请:Changes to Cross-Origin Requests in Chrome Extension Content Scripts



旧的内容脚本，进行跨域获取:

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.
    }
  });