Variables globales et fonctions de rappel asynchrones

Question

Comment stocker l'URL d'un onglet en cours dans une variable afin de pouvoir y accéder plus tard? J'ai fait quelques recherches mais je ne comprends pas très bien les fonctions de rappel asynchrones.

var currentTab;
chrome.tabs.getSelected(null, function(tab) { currentTab = tab.url; });
console.log(currentTab);

Answer 1

Toutes les méthodes Chrome sont asynchrones, ce qui signifie qu'ils viennent faire la queue le code à appeler plus tard.

Notez également que tabs.getSelectedhas been deprecated, donc j'utilise tabs.query({active: true}... à la place.

Les feux de rappel sur l'ordre, après tout le reste a fini:

var currentTab;     // 1 

chrome.tabs.query({active: true}, // 2, queues up callback and continues 
    function(tabs) { 
     currentTab = tabs[0].url; // 4, last, after everything else 
    }); 

console.log(currentTab);   // 3 callback hasn't fired yet, so undefined 

Bienvenue sur ce qui est parfois appelé « l'enfer de rappel ». La méthode la plus simple consiste à utiliser une bibliothèque d'encapsulation asynchrone ou promesse, telle que chrome-extension-async. Cela vous permet de recourir async/await syntaxe:

async function yourCode() { 
    try { 
     const currentTabs = await chrome.tabs.query({active: true}); 
     const currentTab = currentTabs[0]; 
     console.log(currentTab); 
    } 
    catch(err) { 
     // Log errors etc 
    } 
} 

Vous êtes toujours faire un code de rappel et l'exécution après c'est fini, mais maintenant vous pouvez facilement utiliser des variables avant et après la await. J'ai récemment blogged about that in a lot more detail than will fit here.