在開發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中文網其他相關文章!