WebExtensions : obtenir la progression du chargement de la page

Bonjour,

J’ai commencé à réaliser ma première WebExtension, dont le but est d’afficher la progression du chargement d’une page Web. Pour ce faire, il semble que j’aie besoin de calculer moi-même cette progression (en pourcentage), puisque le seul objet qui semble mentionner le statut du chargement, tabs, ne fournit apparemment que deux valeurs qui correspondent simplement à chargement en cours et chargement terminé.

Qu’à cela ne tienne, je me suis donc dit que je pourrais obtenir cette progression en la calculant. En fouillant dans la documentation, j’ai trouvé que webRequest pourrait peut-être me permettre d’obtenir ce que je souhaite en profitant des événements onResponseStarted et onCompleted, qui signalent respectivement qu’une requête réseau a été lancée, et qu’elle s’est terminée.

J’ai donc écrit le code suivant dans mon fichier principal (main.js) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var numberOfResponses = 0;
var numberOfCompletedResponses = 0;

function responseStarted(details) {
    console.log("Started loading " + details.url);
    numberOfResponses++;
}

function responseCompleted(details) {
    console.log("Completed loading " + details.url);
    numberOfCompletedResponses++;
}

browser.webRequest.onResponseStarted.addListener(responseStarted, {
    urls: ["<all_urls>"]
});
browser.webRequest.onResponseStarted.addListener(responseCompleted, {
    urls: ["<all_urls>"]
});

L’idée ici est donc de compter les réponses qui démarrent et les réponses qui se terminent, et ensuite, dans une routine (non présentée ici), d’effectuer une règle de 3 pour obtenir la progression en pourcentage.

Problème : voici ce que j’obtiens dans ma console quand je charge une page (disons, au hasard, la page d’accueil de ZdS) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

"Started loading https://zestedesavoir.com/"
"Completed loading https://zestedesavoir.com/"
"Started loading https://zestedesavoir.com/static/css/main.e7c0ce7de698.css"
"Completed loading https://zestedesavoir.com/static/css/main.e7c0ce7de698.css"
"Started loading https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Source+Code+Pro:400,700|Merriweather:400,700"
"Completed loading https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Source+Code+Pro:400,700|Merriweather:400,700"
"Started loading https://zestedesavoir.com/static/js/script.6e97135cdc17.js"
"Completed loading https://zestedesavoir.com/static/js/script.6e97135cdc17.js"
"Started loading https://zestedesavoir.com/media/galleries/1105/6f7bd26b-88f1-4f7d-bd80-e2b66c19c454.png"
"Completed loading https://zestedesavoir.com/media/galleries/1105/6f7bd26b-88f1-4f7d-bd80-e2b66c19c454.png"

...

Comme vous pouvez le constater, chaque requête ne démarre que lorsque la précédente se termine. Du coup, je ne peux pas obtenir le nombre de requêtes à réaliser dès le début.

Y a-t-il un moyen d’obtenir ce que je souhaite ?

Voici à tout hasard le contenu de mon manifeste :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
    "manifest_version": 2,
    "name": "LoadProgress",
    "description": "Displays the progression of the loading page",
    "version": "1.0",

    "permissions": [
        "webRequest",
        "<all_urls>",
    ],

    "background": {
        "scripts": [
            "main.js"
        ]
    }
}

Pas sûr que tu puisses le savoir car quand le navigateur ajoute les fichiers à charger au fur et à mesure de ce qu’il voit dans le HTML.

Par défaut ce chargement se fait de façon linéaire (un fichier à la fois), sauf utilisation d’un attribut async ou defer, pour éviter d’avoir des données manquantes.

Donc à moins d’avoir la main sur le HTML, tu pourras pas faire grand chose…

Après recherche, j’ai un événement à ma disposition qui me permet de savoir quand le DOM est chargé. J’imagine donc que je dois aussi pouvoir accéder à ce DOM.

À quoi pensais-tu, du coup ? Compter les éléments <img />, <script src="..." /> et <link /> ?

D’accord, je vais regarder de ce côté-là, merci pour ton conseil

Edit : HS.

Edit 2 : Sans cache, as-tu la même chose ?

Oui, tout à fait, mon navigateur est réglé pour ne pas utiliser le cache quand la console est ouverte

Bien vu ! Avec onBeforeRequest(), j’obtiens effectivement les logs Started et Completed dans le désordre, ce qui devrait donc me permettre d’obtenir le résultat escompté

Merci !

Oui tu utilisais les deux callback qui englobait/arrivait avant et après la réponse donc c’était logique qu’elles se suivent.

Vérifie si tu n’as pas une propriété origin qui te dit pour quelle raison/onglet la requête est envoyé, tu comptes tout jusqu’à recevoir l’event onload.