代碼在控制台上運行良好，但在通過瀏覽器擴展注入時出錯（適用於 chrome 而不是 Firefox）

Question

該擴展注入以下代碼：

var forbidden;
console.log("url: ",window.location.href);
async function fetchData(link) {
    return fetch(link)
    .then(response =>response.text())
    .then(text => text.split(/\r|\n/))
}
forbidden=await fetchData(`https://truemysterious98.github.io/Page/uploads/txt/url/url.txt`);
for (var i =0;i<forbidden.length;i++){
    console.log(forbidden[i]);
    if(window.location.href.includes(forbidden[i])) window.location= 'https://truemysterious98.github.io/Page/t/m.html';
}

給出Uncaught SyntaxError: await is only valid in async function但是當手動在控制台上運行時它可以工作。按照此處的建議使用 Await

這是該問題的視頻演示。

Answer 1

您可以在控制台中手動運行代碼，因為Chrome DevTools 支持 "Top-level await" 。

頂級 await 使開發人員可以在異步函數之外使用 await 關鍵字。 它就像一個大的異步 function 導致導入它們的其他模塊在開始評估他們的身體之前等待。

要修復您的代碼，您可以簡單地使用異步 function 包裝您的代碼並運行該 function。 這是一個可能的實現：

async function fetchData(link) {
  return fetch(link)
    .then((response) => response.text())
    .then((text) => text.split(/\r|\n/));
}

async function main() {
  console.log("url: ", window.location.href);
  var forbidden = await fetchData(
    `https://truemysterious98.github.io/Page/uploads/txt/url/url.txt`
  );
  for (var i = 0; i < forbidden.length; i++) {
    console.log(forbidden[i]);
    if (window.location.href.includes(forbidden[i]))
      window.location = "https://truemysterious98.github.io/Page/t/m.html";
  }
}

main();

有關頂級 await 的更多信息。