為什麼我的 Chrome 擴充功能的選項卡資訊顯示為空且沒有斷點？

非同步函數呼叫：了解檢索Chrome 選項卡資訊時的延遲

在開發Chrome 擴充程式時，您遇到了一個問題，即透過chrome.tabs. query 取得的結果是當程式碼在沒有斷點的情況下運行時不可用。為了分析這個問題，我們將深入研究 chrome.tabs.query 函數的非同步性質。

非同步函數呼叫

非同步函數，如 chrome.tabs.query，在下列位置執行其程式碼：稍後的時間點，獨立於主執行流程。在您的程式碼片段中：

// Initialize an empty array
var fourmTabs = new Array();
// Initiate asynchronous `chrome.tabs.query` call
chrome.tabs.query({}, function (tabs) {
    // Iterate over returned tabs
    for (var i = 0; i < tabs.length; i++) {
        // Store tabs in array
        fourmTabs[i] = tabs[i];
    }
});

當此程式碼執行時，chrome.tabs.query 呼叫將執行並啟動請求，但 JavaScript 執行會繼續到下一行。作為 chrome.tabs.query 的第二個參數提供的回呼函數不會立即呼叫。

// Print tab URLs (before callback has been called)
for (var i = 0; i < fourmTabs.length; i++) {
    if (fourmTabs[i] != null)
        window.console.log(fourmTabs[i].url);
    else {
        window.console.log("??" + i);
    }
}

在上面的程式碼中，當循環執行時，fourmTabs 陣列仍然為空，因為回調函數有尚未被呼叫。因此，控制台會輸出“??”對於每個選項卡。

使用斷點，程式碼的執行會暫停，允許回呼函數執行並更新 fourmTabs 陣列。這確保第二個循環可以存取更新的選項卡資訊並正確列印 URL。

解決問題

要解決此問題並確保在程式碼執行時間標籤可用斷點，將第二個循環移至 chrome.tabs.query 的回呼函數內。這確保了循環在呼叫回調後執行：

// Initialize an empty array
var fourmTabs = new Array();
// Initiate asynchronous `chrome.tabs.query` call
chrome.tabs.query({}, function (tabs) {
    // Update `fourmTabs` array
    for (var i = 0; i < tabs.length; i++) {
        fourmTabs[i] = tabs[i];
    }
    // Print tab URLs (after callback has been called)
    for (var i = 0; i < fourmTabs.length; i++) {
        if (fourmTabs[i] != null)
            window.console.log(fourmTabs[i].url);
        else {
            window.console.log("??" + i);
        }
    }
});

透過此修改，程式碼將正確運行，而不需要斷點，因為第二個循環僅在fourmTabs 數組之後執行已透過回調函數更新。

以上是為什麼我的 Chrome 擴充功能的選項卡資訊顯示為空且沒有斷點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！