提取關於Chrome擴展的相關信息

Question

我正在嘗試建立一個Chrome擴展程序，當用戶訪問網站A時，從一系列網站中匯總資訊。

async function fetchHTML(url) {
    const response = await fetch(proxyUrl + url);
    const html = await response.text();
    console.log(html);
    return html;
  }

  // 从HTML内容中提取元素 - 总违规次数
  function extractTotalViolations(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    const totalViolations = doc.querySelector(".total-violations").textContent;
    return totalViolations;
  }
  
  // 我们想要抓取的页面的URL
  const url = "https://whoownswhat.justfix.org/en/address/MANHATTAN/610/EAST%2020%20STREET";
  
  // 获取页面的HTML内容并提取总违规次数
  fetchHTML(url).then(html => {
    const totalViolations = extractTotalViolations(html);
    console.log(totalViolations);
  });

當我列印totalViolations時，得到的是NULL。所以我列印了抓取到的HTML，我意識到我得到了一些看起來與我在網站上直接看到的HTML程式碼完全不同的JavaScript程式碼。我懷疑網站正在使用一些JavaScript掩碼，或者我沒有正確地獲取HTML。

<script>
!function(e){function t(t){for(var n,l,i=t[0],f=t[1],a=t[2],p=0,s=[];p<i.length;p++)l=i[p],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(t);s.length;)s.shift()();return u.push.apply(u,a||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,i=1;i<r.length;i++){var f=r[i];0!==o[f]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",
</script>

我的問題是如何正確提取HTML，以便我可以解析DOM並從該網站獲取所有我想要放在擴充功能上的資訊。謝謝。

Answer 1

你得到的Javascript作為回應的事實證明：

• 請求是正確的
• 你收到了回應

這意味著你需要在瀏覽器的開發工具打開的情況下載入頁面，並仔細研究發送的請求。根據你的描述，當你造訪頁面時，第一個發送的請求可能會載入一個Javascript程式碼，然後程式碼會被處理並發送進一步的請求到伺服器。仔細研究請求，包括它們的URL、請求頭和負載以及回應。

你需要複製請求發送，並解析回應。如果回應最終是一些HTML，那麼你可以按照你已經嘗試過的方式進行解析（改變的是請求發送的位置和方式），否則，如果回應不是HTML，而是其他內容，例如JSON，那麼仔細研究目標網站上顯示的HTML，並實作一個將原始伺服器回應轉換為類似HTML程式碼的程式碼。