从 URL 获取外部页面的源 DOM/HTML

Question

我想从 Chrome 扩展中的 url 下载页面的源代码。

我有这样的东西。但不知道如何将文本格式化为html。 或者如果这种格式有效，如何在控制台中显示源代码。

fetch('https://www.transfermarkt.com/robert-lewandowski/profil/spieler/38253').then(r => r.text()).then(result => {
  // Result now contains the response text, do what you want...
  console.log("Fetch result: " + result);
  var parser = new DOMParser();
  var source_code = parser.parseFromString(result, "text/html");
  console.log("Source code: " + source_code);
});

例如，我想从跨度“dataValue”中获取文本。 我怎样才能做到这一点？

Answer 1

下面的第一个console.log是文本表示。

第二个是 DOM 对象，您可以在其中显示要显示的内容。

fetch('https://www.transfermarkt.com/robert-lewandowski/profil/spieler/38253').then(r => r.text()).then(result => {
  // Result now contains the response text, do what you want...
  // console.log("Source code: " + result); // textual representation
  var parser = new DOMParser();
  var DomObject = parser.parseFromString(result, "text/html");
  console.log("Name: " + DomObject.querySelector("title").textContent);
  [...DomObject.querySelectorAll(".dataItem")].forEach(item => {
    if (item.textContent.trim() === "Joined:") {
      console.log("Joined:",item.nextElementSibling.textContent);
    }
  });
})

附：不要忘记在 manifest.json 中添加站点（或 "<all_urls>"）：

• ManifestV2："permissions": ["*://*.transfermarkt.com/"]
• ManifestV3："host_permissions": ["*://*.transfermarkt.com/"]