WebExtensions：您可以访问网页获取的 JSON 对象吗

Question

有没有办法在网页加载后访问网页获取的 JSON 对象？

我知道我可以使用

webRequest api 来获取 JSON 资源的 url 并再次获取它，但我想知道是否有一种方法可以在不重新下载的情况下访问它？

我可以连接到页面 javascript 还是有更好的方法？

这似乎没有必要，因为我可以重新下载，但这对我来说感觉不太优雅。

我用谷歌搜索了一段时间，但找不到太多。如果能指引正确的方向，我们将不胜感激。

Answer 1

在我的场景中，我希望访问的 JSON 数据由

xmlhttprequest 加载

使用 Firefox 可以简单地捕获此类 JSON 资源，方法是使用

browser.webRequest.onBeforeRequest.addListener 捕获 http 响应，然后使用 browser.webRequest.filterResponseData 在侦听器中过滤响应

鉴于 JSON 文件可能非常大，以下是基于

此处找到的通用示例构建的最小示例。

背景.js

function listener(details) {
    const filter = browser.webRequest.filterResponseData(details.requestId);
    const decoder = new TextDecoder("utf-8");
    const encoder = new TextEncoder();
  
    const data = [];
    filter.ondata = (event) => {
      data.push(event.data);
    };
  
    filter.onstop = (event) => {
      let JSONStr = "";
      
      if (data.length === 1) {
        JSONStr = decoder.decode(data[0]);
      } else {
        for (let i = 0; i < data.length; i++) {
          const stream = i !== data.length - 1;
          JSONStr += decoder.decode(data[i], { stream });
        }
      }
      
      // build json object from string.
      jsonObject = JSON.parse(JSONStr);

      filter.write(encoder.encode(JSONStr));
      filter.close();
    };
  }
  
  browser.webRequest.onBeforeRequest.addListener(
    listener,
    { urls: ["https://example.com/jsonresource/*"], types: ["xmlhttprequest"] },
    ["blocking"],
  );