Pourquoi les informations de l'onglet de mon extension Chrome apparaissent-elles vides sans points d'arrêt ?

Appels de fonction asynchrones : comprendre le délai de récupération des informations de l'onglet Chrome

Lors du développement d'une extension Chrome, vous avez rencontré un problème où les résultats obtenus via chrome.tabs.query étaient non disponible lorsque le code s'exécute sans points d'arrêt. Pour analyser ce problème, nous allons approfondir la nature asynchrone de la fonction chrome.tabs.query.

Appels de fonction asynchrone

Les fonctions asynchrones, comme chrome.tabs.query, exécutent leur code à à un moment ultérieur, indépendant du flux d'exécution principal. Dans votre extrait de code :

// 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];
    }
});

Lorsque ce code s'exécute, l'appel chrome.tabs.query s'exécute et lance une requête, mais l'exécution de JavaScript continue jusqu'à la ligne suivante. La fonction de rappel fournie comme deuxième argument de chrome.tabs.query n'est pas invoquée immédiatement.

// 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);
    }
}

Dans le code ci-dessus, lorsque la boucle est exécutée, le tableau fourmTabs est toujours vide car la fonction de rappel a pas encore été appelé. Par conséquent, la console affichera « ? » pour chaque onglet.

Avec les points d'arrêt, l'exécution du code est suspendue, permettant à la fonction de rappel d'exécuter et de mettre à jour le tableau fourmTabs. Cela garantit que la deuxième boucle a accès aux informations de l'onglet mis à jour et imprime correctement les URL.

Résoudre le problème

Pour résoudre ce problème et garantir que les onglets sont disponibles lorsque le code s'exécute sans points d'arrêt, déplacez la deuxième boucle dans la fonction de rappel de chrome.tabs.query. Cela garantit que la boucle est exécutée après l'appel du rappel :

// 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);
        }
    }
});

Avec cette modification, le code s'exécutera correctement sans avoir besoin de points d'arrêt, car la deuxième boucle n'est exécutée qu'après que le tableau fourmTabs a été exécuté. été mis à jour par la fonction de rappel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!