Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2017-09-15T17:02:12+02:00Les derniers messages parus sur le forum de Zeste de Savoir.WebExtensions : obtenir la progression du chargement de la page, message #1624012017-09-15T17:02:12+02:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162401<p>Oui tu utilisais les deux callback qui englobait/arrivait avant et après la réponse donc c’était logique qu’elles se suivent.</p>
<p>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.</p>WebExtensions : obtenir la progression du chargement de la page, message #1623912017-09-15T13:46:36+02:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162391<p>Bien vu ! Avec <code>onBeforeRequest()</code>, j’obtiens effectivement les logs <code>Started</code> et <code>Completed</code> dans le désordre, ce qui devrait donc me permettre d’obtenir le résultat escompté <img alt=":)" src="/static/smileys/smile.png"></p>
<p>Merci !</p>WebExtensions : obtenir la progression du chargement de la page, message #1623902017-09-15T13:21:33+02:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162390<p>Il me semble que tu as d’autres étapes avant le début de la réception d’une autre page (voir ici : <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Intercept_HTTP_requests">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Intercept_HTTP_requests</a>
).</p>
<p>Il serait peut-être intéressant d’utiliser <em>berforexxxxx</em>.</p>WebExtensions : obtenir la progression du chargement de la page, message #1623892017-09-15T13:14:35+02:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162389<figure>
<blockquote>
<p>Edit 2 : Sans cache, as-tu la même chose ?</p>
</blockquote>
<figcaption><a href="https://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162387">A-312</a></figcaption>
</figure>
<p>Oui, tout à fait, mon navigateur est réglé pour ne pas utiliser le cache quand la console est ouverte</p>WebExtensions : obtenir la progression du chargement de la page, message #1623872017-09-15T12:58:31+02:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162387<p>Edit : HS.</p>
<p>Edit 2 : Sans cache, as-tu la même chose ?</p>WebExtensions : obtenir la progression du chargement de la page, message #1623842017-09-15T11:43:42+02:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162384<p>D’accord, je vais regarder de ce côté-là, merci pour ton conseil <img alt=":)" src="/static/smileys/smile.png"></p>WebExtensions : obtenir la progression du chargement de la page, message #1623832017-09-15T11:40:11+02:00viki53/@viki53https://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162383<p>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).</p>
<p>À ce moment-là tu pourras les suivre, tout simplement…</p>
<p>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.</p>WebExtensions : obtenir la progression du chargement de la page, message #1623822017-09-15T11:37:23+02:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162382<p>Après recherche, j’ai <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/webNavigation/onDOMContentLoaded">un événement à ma disposition</a> qui me permet de savoir quand le DOM est chargé. J’imagine donc que je dois aussi pouvoir accéder à ce DOM.</p>
<p>À quoi pensais-tu, du coup ? Compter les éléments <code><img /></code>, <code><script src="..." /></code> et <code><link /></code> ?</p>WebExtensions : obtenir la progression du chargement de la page, message #1623782017-09-15T11:04:52+02:00viki53/@viki53https://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162378<p>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.</p>
<p>Par défaut ce chargement se fait de façon linéaire (un fichier à la fois), sauf utilisation d’un attribut <code>async</code> ou <code>defer</code>, pour éviter d’avoir des données manquantes.</p>
<p>Donc à moins d’avoir la main sur le HTML, tu pourras pas faire grand chose…</p>WebExtensions : obtenir la progression du chargement de la page, message #1623762017-09-15T10:58:13+02:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/9329/webextensions-obtenir-la-progression-du-chargement-de-la-page/?page=1#p162376<p>Bonjour,</p>
<p>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, <code>tabs</code>, <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/TabStatus">ne fournit apparemment que deux valeurs</a> qui correspondent simplement à <em>chargement en cours</em> et <em>chargement terminé</em>.</p>
<p>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 <code>webRequest</code> pourrait peut-être me permettre d’obtenir ce que je souhaite en profitant des événements <code>onResponseStarted</code> et <code>onCompleted</code>, qui signalent respectivement qu’une requête réseau a été lancée, et qu’elle s’est terminée.</p>
<p>J’ai donc écrit le code suivant dans mon fichier principal (<code>main.js</code>) :</p>
<div class="spoiler">
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">numberOfResponses</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">numberOfCompletedResponses</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">responseStarted</span><span class="p">(</span><span class="nx">details</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Started loading "</span> <span class="o">+</span> <span class="nx">details</span><span class="p">.</span><span class="nx">url</span><span class="p">);</span>
<span class="nx">numberOfResponses</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">responseCompleted</span><span class="p">(</span><span class="nx">details</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Completed loading "</span> <span class="o">+</span> <span class="nx">details</span><span class="p">.</span><span class="nx">url</span><span class="p">);</span>
<span class="nx">numberOfCompletedResponses</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">browser</span><span class="p">.</span><span class="nx">webRequest</span><span class="p">.</span><span class="nx">onResponseStarted</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="nx">responseStarted</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">urls</span><span class="o">:</span> <span class="p">[</span><span class="s2">"<all_urls>"</span><span class="p">]</span>
<span class="p">});</span>
<span class="nx">browser</span><span class="p">.</span><span class="nx">webRequest</span><span class="p">.</span><span class="nx">onResponseStarted</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="nx">responseCompleted</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">urls</span><span class="o">:</span> <span class="p">[</span><span class="s2">"<all_urls>"</span><span class="p">]</span>
<span class="p">});</span>
</pre></div>
</td></tr></table></div>
</div>
<p>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.</p>
<p>Problème : voici ce que j’obtiens dans ma console quand je charge une page (disons, au hasard, la page d’accueil de ZdS) :</p>
<div class="spoiler">
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12</pre></div></td><td class="code"><div class="codehilite"><pre><span></span>"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"
...
</pre></div>
</td></tr></table></div>
</div>
<p>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.</p>
<p>Y a-t-il un moyen d’obtenir ce que je souhaite ?</p>
<p>Voici à tout hasard le contenu de mon manifeste :</p>
<div class="spoiler">
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="p">{</span>
<span class="nt">"manifest_version"</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span>
<span class="nt">"name"</span><span class="p">:</span> <span class="s2">"LoadProgress"</span><span class="p">,</span>
<span class="nt">"description"</span><span class="p">:</span> <span class="s2">"Displays the progression of the loading page"</span><span class="p">,</span>
<span class="nt">"version"</span><span class="p">:</span> <span class="s2">"1.0"</span><span class="p">,</span>
<span class="nt">"permissions"</span><span class="p">:</span> <span class="p">[</span>
<span class="s2">"webRequest"</span><span class="p">,</span>
<span class="s2">"<all_urls>"</span><span class="p">,</span>
<span class="p">],</span>
<span class="nt">"background"</span><span class="p">:</span> <span class="p">{</span>
<span class="nt">"scripts"</span><span class="p">:</span> <span class="p">[</span>
<span class="s2">"main.js"</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</td></tr></table></div>
</div>