Extraire des informations pertinentes sur les extensions Chrome

Question

J'essaie de créer une extension Chrome qui regroupe les informations d'une gamme de sites Web lorsqu'un utilisateur visite le site Web 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);
  });

Lorsque j'imprime totalViolations, j'obtiens NULL. J'ai donc imprimé le code HTML récupéré et j'ai réalisé que j'obtenais du code JavaScript complètement différent du code HTML que j'avais vu directement sur le site Web. Je soupçonne que le site utilise un masquage JavaScript ou que je n'obtiens pas le code HTML correctement.

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

Ma question est de savoir comment extraire correctement le HTML afin de pouvoir analyser le DOM et obtenir toutes les informations du site Web que je souhaite mettre sur l'extension. Merci.

Answer 1

Preuve du fait que vous obtenez Javascript en réponse :

• La demande est correcte
• Vous avez reçu une réponse

Cela signifie que vous devez charger la page avec les outils de développement de votre navigateur ouverts et étudier attentivement la demande envoyée. En fonction de votre description, lorsque vous visitez la page, la première requête envoyée peut charger un code Javascript, qui est ensuite traité et d'autres requêtes sont envoyées au serveur. Étudiez attentivement les demandes, y compris leurs URL, leurs en-têtes et charges utiles, ainsi que leurs réponses.

Vous devez copier la demande envoyée et analyser la réponse. Si la réponse finit par être du HTML, vous pouvez l'analyser comme vous l'avez déjà essayé (les changements sont où et comment la demande est envoyée), sinon, si la réponse n'est pas HTML, mais autre chose, comme JSON, examinez ensuite de plus près le code HTML cible affiché sur le site Web et implémentez un code qui convertit la réponse brute du serveur en code de type HTML.