提取Chrome扩展程序的相关信息

ykejflvf  于 2023-04-03  发布在  Go
关注(0)|答案(2)|浏览(105)

bounty将在3天后过期。回答此问题可获得+50声望奖励。Piyush希望引起更多人关注此问题。

我正在尝试构建一个chrome扩展,当用户访问站点A时,它可以聚合来自一组站点的信息

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

  // Function to extract the element - total violations from the HTML content
  function extractTotalViolations(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    const totalViolations = doc.querySelector(".total-violations").textContent;
    return totalViolations;
  }
  
  // The URL of the page we want to scrape
  const url = "https://whoownswhat.justfix.org/en/address/MANHATTAN/610/EAST%2020%20STREET";
  
  // Fetch the HTML content of the page and extract the total violations
  fetchHTML(url).then(html => {
    const totalViolations = extractTotalViolations(html);
    console.log(totalViolations);
  });

当我打印totalViolations时,我得到NULL。所以我打印了获取的HTML &我意识到我得到的一些javascript代码与我直接在网站上看到的HTML代码完全不同。我怀疑网站使用了一些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并从这个网站获得我想放在扩展上的所有信息。谢谢

clj7thdc

clj7thdc1#

你有JavaScript作为响应的事实证明:

  • 请求是正确
  • 你收到了回应

这意味着您需要在浏览器的开发工具打开时加载页面,并仔细研究正在发送的请求。根据您的描述,当您访问页面时发送的第一个请求可能会加载Javascript代码,然后处理并向服务器发送进一步的请求。仔细研究请求,沿着它们的URL,请求报头和有效载荷以及响应。
您需要复制请求发送,还需要解析响应。(其中改变影响请求被发送到何处以及如何被发送),否则,如果响应不是HTML,而是诸如JSON之类的其他内容,然后仔细研究最终显示在目标站点上的HTML,并实现将原始服务器响应转换为类似HTML代码的代码。

lymgl2op

lymgl2op2#

你必须更深入地研究获取资源以获得你想要的内容。有问题的URL动态加载内容,可能会使抓取内容变得不方便......但没有什么是完美的。
请求This URL时没有任何密钥或凭据,并且 * 似乎 * 包含您要查找的信息。
就像其他人说的那样,打开devTools并使用network选项卡来查看页面如何加载其资源。这将有助于您更接近您正在寻找的数据。

相关问题