WebExtensions : obtenir la progression du chargement de la page

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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"
        ]
    }
}

A graphical interface is like a joke: if you have to explain it, that’s shit.

+0 -0

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…

Mes tutos — Architecte technique : JS/Node/Angular/Mongo, PHP/MySQL — Consultant qualité, ergonomie et UX

+1 -0

Cette réponse a aidé l’auteur du sujet

Une fois le DOM chargé, les requêtes sont normalement lancées (du moins celles initiées par le HTML — s’il y en a via des imports CSS ou JS, ce sera plus difficile à détecter).

À ce moment-là tu pourras les suivre, tout simplement…

Après si tu veux détecter le poids de chaque fichier chargé, il faudra attendre le retour des headers HTTP (et encore, s’ils sont bien renseignés pour indiquer le poids de chaque ressource) par contre.

Édité par viki53

Mes tutos — Architecte technique : JS/Node/Angular/Mongo, PHP/MySQL — Consultant qualité, ergonomie et UX

+1 -0
Auteur du sujet

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 !

A graphical interface is like a joke: if you have to explain it, that’s shit.

+0 -0

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.

Édité par anonyme

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte