Extrahieren Sie relevante Informationen zu Chrome-Erweiterungen

Question

Ich versuche, eine Chrome-Erweiterung zu erstellen, die Informationen von einer Reihe von Websites zusammenfasst, wenn ein Benutzer Website A besucht.

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

Wenn ich totalViolations ausdrucke, erhalte ich NULL. Also druckte ich den gekratzten HTML-Code aus und stellte fest, dass ich JavaScript-Code erhielt, der völlig anders aussah als der HTML-Code, den ich direkt auf der Website sah. Ich vermute, dass die Website eine JavaScript-Maskierung verwendet oder dass ich den HTML-Code nicht richtig erhalte.

<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>

Meine Frage ist, wie ich den HTML-Code richtig extrahiere, damit ich das DOM analysieren und alle Informationen von der Website erhalten kann, die ich in die Erweiterung einfügen möchte. Danke.

Answer 1

你得到的Javascript作为响应的事实证明：

• 请求是正确的
• 你收到了响应

这意味着你需要在浏览器的开发工具打开的情况下加载页面，并仔细研究发送的请求。根据你的描述，当你访问页面时，第一个发送的请求可能会加载一个Javascript代码，然后该代码会被处理并发送进一步的请求到服务器。仔细研究请求，包括它们的URL、请求头和负载以及响应。

你需要复制请求发送，并解析响应。如果响应最终是一些HTML，那么你可以按照你已经尝试过的方式进行解析（改变的是请求发送的位置和方式），否则，如果响应不是HTML，而是其他内容，比如JSON，那么仔细研究目标网站上显示的HTML，并实现一个将原始服务器响应转换为类似HTML代码的代码。