如何在 Chrome 擴展中使用 setTimeout 將 jQuery 注入頁面？

Question

我已經構建了一個 chrome 擴展，其中一個功能是檢查頁面上的 jQuery，如果它不存在則將其添加到頁面。 我重新利用了舊擴展中的一些代碼，雖然它按預期工作（99% 的時間），但我想了解 setTimeout 在這種情況下的用法。

在大多數情況下， setTimeout(addjQuery)和addjQuery()似乎都工作得很好。 這是目前的代碼，就像我說的那樣，它幾乎總是有效。

已更新以提出特定問題...我正在使用以下語法將 jquery 和 myLibrary 注入頁面。 正如您在 onMyLibraryLoaded 函數中看到的那樣，我正在嘗試使用 jQuery 將模糊事件附加到所有輸入。 這幾乎總是有效...是否有原因有時會引發未定義 jQuery 的錯誤。 我唯一的解釋是，有時 myLibrary 的加載速度比 jquery 快，並且會在 jquery 准備好之前觸發？ 那正確嗎？ 我將如何解決這個問題？ 等待？

if (!window['jQuery']) {  
    setTimeout(addjQuery);    
}
if (!window['myLibrary']) {  
    setTimeout(addMyLibrary);    
}

function addjQuery() {
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';
    script.onload = onjQueryLoaded;
    document.body.appendChild(script);        
}

function addMyLibrary() {
    const script = document.createElement('script');
    script.src = 'https://jrags/myLibrary.min.js';
    script.onload = onMyLibraryLoaded;
    document.body.appendChild(script);        
}


function onMyLibraryLoaded(){
    $(document).on("blur", "#someInput", function(){
       console.log("Input blurred");
    })
}

function onjQueryLoaded(){
    console.log('jquery loaded sucessfully')
}

Answer 1

這兩個庫都需要時間通過互聯網獲取。 每次跑步的時間可能不同。 您已經通過延遲創建腳本元素的調用在下一個事件周期中啟動了加載，但這與您觀察到的內容無關緊要。 需要明確的是，您編寫的setTimeout調用是不必要的。

如果您查看瀏覽器的開發人員工具以查看發生了哪些網絡請求以及它們以何種順序完成，您會發現在失敗的情況下， https://jrags/myLibrary.min.js庫將在之前加載jQuery 庫已加載。 但是您在處理程序中使用了一個 jQuery 函數來加載您的庫（特別是script.onload = onMyLibraryLoaded;和onMyLibraryLoaded調用$(document) ，這需要加載 jQuery。）

您有幾種解決問題的方法。 一種方法是推遲加載腳本，直到加載 jQuery。 但實際上，最好盡快開始加載。 因此，一種不同的、更有效的方法是將模糊#someInput推遲到 jQuery 也已加載。

我最好的建議是使用 Promise 來加載每個庫，並在兩個 promise 都解決后執行模糊處理。

function addLibrary(src) {
  return new Promise(resolve => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    document.body.appendChild(script);        
  })
}

let p1 = addLibrary('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js')
  .then(() => console.log('jQuery loaded'));
let p2 = addLibrary('https://jrags/myLibrary.min.js')
  .then(() => console.log('myLibrary loaded'));
Promise.all([p1, p2]).then(() => {
  $(document).on("blur", "#someInput", function(){
     console.log("Input blurred");
  })
});

或await ：

let p1 = addLibrary('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js');
let p2 = addLibrary('https://jrags/myLibrary.min.js');
await p1;
await p2;
$(document).on("blur", "#someInput", function(){
     console.log("Input blurred");
  })