Comment télécharger un cours en ligne sur ton PC 

Moi, je suis très lecture. C’est pour ça que je préfère les cours en texte aux cours en vidéo, peu importe le format — Word, PDF ou HTML — cela dit.

Je suis aussi très jaloux des formations que j’achète. J’aime les avoir bien rangées et dans le cloud pour pouvoir y accéder comme et quand je veux. C’est pourquoi, quand un cours n’existe qu’en ligne, j’essaie de télécharger le matériel et de le garder sur mon ordinateur.

C’est comme ça que j’ai un cloud Mega avec 37GB de formations. 

Parce que sinon, quand je veux revoir un cours en ligne acheté il y a quelques années — tu seras peut-être surpris que je retourne encore voir des formations achetées il y a plus de dix ans et toujours totalement valables — il faudrait que je me souvienne de qui je l’ai acheté, de l’URL, de l’identifiant et du mot de passe…

Sans compter qu’il faudrait faire confiance au fait que le cours soit encore stocké sur ce serveur et qu’il n’ait pas été supprimé ni déplacé vers un autre domaine.

Trop de variables que je ne contrôle pas.

Bref, je me sens plus tranquille avec le matériel sur mon ordinateur.

Alors, il existe plusieurs façons de le sauvegarder sur ton ordinateur :

• En téléchargeant le HTML page par page.
• En copiant le contenu des leçons et en le collant dans Word.
• Avec des extensions qui le transforment au format markdown.

Et quelques autres que je t’explique plus loin.

Il y a des cas plus simples et d’autres plus complexes. C’est pourquoi je te présente plusieurs solutions et, à la fin, la définitive pour le cas le plus compliqué, quand :

• Il y a beaucoup d’URLs.
• Un login est nécessaire.
• Les liens doivent pointer vers le contenu téléchargé et non vers le serveur actuel.

Au passage, cela s’applique aux cours dont le contenu principal est du texte et des images, avec des liens. La solution finale n’est pas valable pour les cours en vidéo.

Encore une précision : cette solution ne s’applique pas seulement aux cours. 

Un cas d’usage relativement nouveau où j’applique la même chose est quand je veux transmettre de la documentation sur n’importe quel sujet à une IA comme NotebookLM pour lui poser directement des questions. C’est beaucoup plus confortable que de fouiller soi-même dans les URLs pour chercher ce qu’il faut.  

Si tu as déjà essayé de naviguer dans la documentation Google Analytics pour développeurs ou celle de Google Cloud, tu sais de quoi je parle.

Les principaux problèmes : beaucoup de leçons, login et liens

Les cours sont souvent construits comme une collection de leçons en ligne. Chaque leçon a sa propre URL, plus ou moins avec cette structure :

https://www.ejemplo.com/view/courses/nombre-del-curso/seccion/leccion

La plateforme affiche généralement un index latéral avec les leçons, qui permet de naviguer entre elles.

Mon objectif est d’obtenir quelque chose d’identique en local:

curso/
├ index.html
├ 01-introduccion.html
├ 02-que-es-la-herramienta.html
├ 03-casos-de-uso.html
└ ...

Ou, mieux encore, un seul fichier HTML avec tout le cours, du genre curso-local.html.

Avec un index interne, des liens par ancres pour naviguer facilement et tout le contenu des leçons à la suite, comme si c’était un PDF.

Voici donc les solutions possibles.

Options pour sauvegarder le cours sur ton ordinateur

On trouve plusieurs possibilités, avec différents niveaux de complexité et adaptées à des cas différents (plus ou moins d’URLs, besoin ou non de login, sauvegarde des images ou maintien des liens vers le serveur actuel…).

Je te les explique de la plus basique à la plus complexe.

#1. “Enregistrer sous” depuis le navigateur

La première voie est la plus évidente :

Fichier > Enregistrer sous > Page web complète

Cela télécharge la page HTML et un dossier avec les ressources associées : CSS, images, scripts, polices, etc.

Le problème, c’est que cette méthode fonctionne raisonnablement bien pour des pages simples avec peu d’URLs, mais pas pour de gros cours. Parce qu’en plus du temps passé à télécharger les 80 URLs une par une, d’autres complications apparaissent :

1. Les liens internes continuent de pointer vers l’URL en ligne.
2. Chaque page génère son propre dossier de ressources.
3. Le contenu réellement utile est très faible par rapport à la taille totale du HTML.
4. La navigation locale entre les leçons n’est pas résolue (il faut ensuite passer par des scripts).
5. Il y a trop de contenu inutile : en-tête, menus, footer, scripts, pixels, styles, chat, ressources externes, etc.

Autrement dit, techniquement on pouvait sauvegarder “la page”, mais cela ne créait pas une version utile du cours.

Cette méthode sert mieux à sauvegarder des sites simples que des cours.

#2. SingleFile

Tu peux utiliser une extension du type SingleFile, qui sauvegarde une page web complète dans un seul fichier HTML. A priori, ça semble être une bonne solution, car cela évite le dossier de ressources classique créé par le navigateur.

Le résultat est souvent meilleur en apparence, mais très souvent il ne résout pas non plus le problème.

D’abord parce que le fichier généré peut peser plusieurs centaines de mégaoctets car le HTML contient des polices intégrées, d’énormes feuilles de style et beaucoup de code qui ne faisait pas partie du contenu du cours.

De plus, quand le contenu est généré dynamiquement (site fait avec des frameworks JS, comme VUE ou React) l’extension n’est pas capable de le récupérer.

Et en plus, les mêmes problèmes de fond que dans la solution précédente continuent :

• Les liens pointaient toujours vers le site en ligne.
• Une copie lourde de la page était sauvegardée.
• Aucune structure locale navigable n’était générée.
• Ce n’était pas pratique de répéter ça pour 70, 80 ou 90 leçons.

Donc, il devient clair que SingleFile sert à sauvegarder une page isolée, mais pas à transformer tout un cours en version locale propre.

#3. Utiliser une extension Markdown

L’option suivante consiste à utiliser une extension du type MarkDownload, pensée pour convertir une page web en Markdown.

L’approche a du sens si tu veux :

• Extraire uniquement le texte.
• Supprimer le design inutile.
• Générer des fichiers légers.
• Pour les réunir ensuite dans un document ou dans un HTML local.

Le problème, c’est que pour le moment l’extension n’est pas disponible dans le Chrome Web Store. 

Il existe des extensions alternatives, mais celle que j’avais utilisée auparavant était celle-ci, donc je t’explique l’idée et je te laisse chercher d’autres options similaires.

#4. Script dans la console

La voie suivante consiste à créer un petit script depuis la console du navigateur.

Il y a deux voies ; l’approche de la première est :

1. Ouvrir la page index du cours.
2. Lire tous les liens des leçons.
3. Faire fetch() pour chaque URL.
4. Extraire le contenu.
5. Générer un seul HTML local.

Si tu ne programmes pas, ChatGPT te génère le script sans problème.

Le bon côté, c’est que cela permet d’automatiser le processus une fois connecté, mais il est probable que la politique de sécurité de la page l’interdise.

Tu peux essayer une autre approche, toujours depuis la console :

1. Ouvrir une nouvelle fenêtre.
2. Naviguer vers chaque leçon comme le ferait l’utilisateur.
3. Attendre qu’elle charge.
4. Lire le DOM de cette fenêtre.
5. Extraire le contenu.

Le problème que tu peux rencontrer ici sur des pages dynamiques est que le navigateur ne permet pas toujours de bien contrôler cette fenêtre, de lire son contenu ou de détecter quand elle est réellement chargée.  

Aucune des deux formules n’est une solution robuste, mais je t’en parle parce que je les ai utilisées à certains moments et qu’elles peuvent te servir. Même si je te dirais plutôt de passer à la suivante.

#6. Tampermonkey 

A priori la plus complexe, puisqu’elle demande :

• Installer une extension.
• Générer un script.
• Le faire s’exécuter dans chaque URL.

Mais Tampermonkey facilite pas mal les choses, puisqu’il permet de charger automatiquement un script personnel lorsque tu visites certaines URLs.

Ici le navigateur lui-même entre dans chaque leçon et le script s’exécute dans la page chargée.

Le flux est le suivant :

1. Page index.
2. Tampermonkey récupère les liens.
3. Il navigue vers la leçon 1.
4. Capture le contenu visible.
5. Sauvegarde l’état dans localStorage.
6. Il navigue vers la leçon 2.
7. Capture le contenu.
8. …
9. Génère le HTML final.

Cela a beaucoup plus de chances de toujours fonctionner. 

La clé est de trouver le vrai conteneur du contenu du cours, ce qui se fait en inspectant l’URL d’une leçon pour repérer quel bloc HTML contenait le contenu utile.

C’est souvent .main-content ou #lesson-content ou quelque chose de ce genre. Tout dépend de la façon dont le site du cours est structuré.

Une fois que tu l’as détecté, tu crées un script qui fait ceci :

1. S’exécuter uniquement sur les URLs du cours.
2. Ajouter un petit panneau flottant avec des boutons (optionnel).
3. Récupérer les liens des leçons depuis l’index du cours.
4. Sauvegarder ces liens dans localStorage.
5. Naviguer automatiquement dans chaque leçon.
6. Attendre que #lesson-content existe.
7. Cloner ce bloc.
8. Nettoyer scripts, styles, boutons, iframes et attributs inutiles.
9. Convertir images et liens en URLs absolues.
10. Sauvegarder chaque leçon capturée dans localStorage.
11. À la fin, générer un seul fichier HTML téléchargeable.

Le résultat recherché était un fichier comme celui dont on parlait dans l’intro curso-local.html.

Au passage, tu n’as pas besoin de savoir programmer. Même pas HTML. Tu demandes le script à ChatGPT et il le fait pour toi (c’est comme ça que je l’ai fait).

L’important, c’est que tu connaisses la formule et comprennes son fonctionnement dans les grandes lignes ; le code lui-même, l’IA te le génère.

Pas à pas pour sauvegarder un cours en ligne sur ton ordinateur

Voici le pas à pas expliqué.

Étape 1 : installer Tampermonkey

La première chose est d’installer Tampermonkey.

Dans Chrome, avec les restrictions actuelles, il peut être nécessaire de:

1. Installer l’extension.
2. Entrer dans chrome://extensions/.
3. Activer le mode développeur (interrupteur en haut à droite).
4. Autoriser l’exécution des scripts utilisateur.
5. Donner à l’extension l’autorisation de s’exécuter sur le site du cours.

C’est important parce que, si Tampermonkey n’a pas les permissions, le panneau n’apparaît pas même si le script est bon.

Étape 2 : créer le script

Dans Tampermonkey :

Dashboard > Create a new script

On efface le contenu initial et on crée son script.

Je te laisse ici le script que ChatGPT m’a généré, au cas où tu serais développeur et voudrais y jeter un œil, l’adapter ou le tester pour ton cas. N’oublie pas de changer l’URL du cours:

Étape 3 : ouvrir la page index du cours en ligne

Il faut entrer dans la page initiale du cours. Si elle demande un login, connecte-toi d’abord et entre sur la page d’accueil.

Étape 4 : vérifier que le panneau apparaît

Si tu utilises le script que je t’ai laissé, au chargement de la page du cours un panneau noir devrait apparaître en haut à droite avec trois boutons :

• Test 3
• Todo
• Borrar estado

S’il n’apparaît pas, il faut vérifier :

• Que Tampermonkey est activé.
• Que le script est activé.
• Que le @match correspond à l’URL du cours.
• Que l’extension a des permissions pour ce site.

Étape 5 : effacer l’état avant de tester

Avant n’importe quel test, il vaut mieux appuyer sur le bouton Borrar estado.

Cela nettoie les captures précédentes stockées dans localStorage.

C’est important parce que, pendant les tests, d’anciens états peuvent rester et générer des fichiers incomplets ou dupliqués.

Étape 5 : tester avec 3 leçons

Après avoir effacé l’état, appuie sur le bouton Test 3.

Il ne faut pas lancer le scraper sur tout le cours dès le départ.

Le script parcourra trois leçons et téléchargera un fichier HTML.

Ouvre-le et vérifie :

• Que l’index contient trois leçons.
• Que les titres sont corrects.
• Que le contenu commence par le vrai texte de la leçon.
• Qu’il ne capture pas le footer.
• Qu’aucun bloc vide n’apparaît.

Étape 6 : lancer la capture complète

Si le test fonctionne, tout est prêt. Il te suffit de :

1. Rouvrir la page index en ligne.
2. Appuyer sur Borrar estado.
3. Appuyer sur Todo.
4. Laisser le navigateur naviguer tout seul.
5. Ne pas fermer l’onglet.
6. Attendre le téléchargement du HTML final.

Et tu auras généré en local un très bon fichier HTML qui compresse tout le cours en quelques kilooctets.

Cela dit, ce poids si faible a un piège. Les images sont liées au serveur original, elles n’ont pas été téléchargées sur ton PC. Cela veut dire qu’à un moment leur URL peut changer ou qu’elles peuvent être supprimées, avec pour conséquence que tu ne pourras plus les voir.

Tu pourrais les télécharger une par une et modifier l’URL dans le HTML, mais je pense que cela a peu de sens. C’est pourquoi, pour moi, il y a une étape suivante (optionnelle).

Étape 7 (optionnelle) : passer le contenu dans Word

Je parle de Word, mais tu peux le faire dans un Google Doc si tu préfères. C’est une question de flux de travail.

Dans tous les cas, cette étape est très simple, puisque tu dois seulement :

• Ouvrir le HTML avec le navigateur.
• Sélectionner tout le contenu (ctrl+a sous Windows).
• Le copier (ctrl+c).
• Le coller (ctrl+v) dans un nouveau fichier Word. Il est possible que cela prenne quelques secondes selon la taille du cours.
• L’enregistrer.

Maintenant les images auront été collées dans le fichier Word et elles seront à toi.  

La contrepartie, c’est que le fichier ne pèsera plus quelques kilooctets, mais des mégaoctets. Et peut-être beaucoup : dans mon dernier cours, 181MB. C’est qu’il fait 136 pages avec plusieurs captures d’écran. Ce n’est pas rien. 

Cela dit, il existe une solution à cela. Continue à lire.

Étape 7 (optionnelle) : passer le contenu en PDF

C’est encore plus simple que la précédente, mais il y a une astuce. Tu dois :

1. Ouvrir le fichier dans Word.
2. Cliquer sur “Enregistrer sous”.
3. Choisir PDF.
4. Dans les options qui apparaissent, sélectionner « Taille minimale (publication en ligne) » :

Voilà !

De 181MB, on passe à 2MB, franchement pas mal. 

Oui, les images perdent un peu en qualité, mais elles remplissent largement l’objectif de la formation.

Avec ça, on aura un PDF très léger, avec le cours complet, les images et les liens sur notre PC, ou dans notre cloud de formation si on préfère (et tu devrais préférer).

Limites de cette solution

Cette solution sert pour les cours ou documentations en HTML dont le contenu est surtout du texte, des images et des liens.

Elle ne sert pas à :

• Télécharger des vidéos protégées.
• Capturer des contenus servis par DRM.
• Sauvegarder des lecteurs intégrés.
• Contourner des paiements ou restrictions d’accès.
• Conserver à 100 % le design original de la plateforme.
• Télécharger des pièces jointes exigeant des permissions supplémentaires.

Si le cours inclut des vidéos intégrées dans Cloudflare Stream, Vimeo, Wistia ou d’autres lecteurs protégés, le script peut conserver l’emplacement ou le lien, mais il ne téléchargera pas la vidéo. Ce sont deux choses différentes.

Conclusion

Si tu veux ou dois sauvegarder un cours en local pour l’avoir toujours sous la main, ou une documentation complète pour la transmettre à une IA et lui poser des questions, tu as plusieurs options.

Mais si la source exige un login et compte plusieurs dizaines ou centaines d’URLs, le système avec Tampermonkey est le meilleur. 

S’il y a moins de dix URLs et que tu ne veux pas te compliquer la vie, tu peux essayer les autres solutions que je mentionne.

J’ai testé beaucoup de systèmes au cours de ma vie — automatiques et manuels — et aucun n’est aussi rapide et automatique que celui-ci. 

Au moins jusqu’à ce que les agents IA le fassent pour toi. Gratuitement, bien sûr.

Tant qu’à demander, autant demander.