Så laddar du ner en onlinekurs till din dator 

Jag är väldigt mycket för att läsa. Därför föredrar jag kurser i text framför video, formatet spelar ingen roll för mig -Word, PDF eller HTML- det gör det faktiskt inte.

Jag är också väldigt rädd om utbildningarna jag köper. Jag gillar att ha dem ordnade och i molnet så att jag kan komma åt dem hur och när jag vill. Därför försöker jag, när en kurs bara finns online, ladda ner materialet och spara det på min dator.

Så har jag ett moln i Mega med 37GB utbildning. 

För om jag inte gör så, när jag vill titta på en onlinekurs som jag köpte för några år sedan -kanske förvånar det dig att jag fortfarande går tillbaka till utbildningar jag köpte för mer än tio år sedan och som fortfarande är helt aktuella- måste jag komma ihåg vem jag köpte den av, URL:en, användaren och lösenordet…

Och dessutom lita på att kursen fortfarande ligger kvar på den servern och inte har raderats eller flyttats till en annan domän.

För många variabler som jag inte kontrollerar.

Summa summarum känner jag mig bekvämare med materialet på min egen dator.

Då finns det flera sätt att spara den på din dator:

• Ladda ner HTML sida för sida.
• Kopiera innehållet i lektionerna och klistra in det i ett Word-dokument.
• Med tillägg som omvandlar det till markdown-format.

Och något mer som jag förklarar längre fram.

Det finns enklare fall och mer komplexa. Därför går jag igenom flera lösningar och, till sist, den definitiva för det mest komplicerade fallet, när:

• Det finns många URLs.
• Inloggning krävs.
• Länkarna måste peka på det nedladdade innehållet och inte på den aktuella servern.

Förresten gäller detta kurser vars huvudinnehåll är text och bilder, med länkar. Den slutliga lösningen fungerar inte för videokurser.

En sak till: den här lösningen gäller inte bara kurser. 

Ett relativt nytt användningsfall där jag gör samma sak är när jag vill ge dokumentation om vad som helst till en AI som NotebookLM för att ställa frågor direkt. Det är otroligt mycket bekvämare än att själv rota runt bland URLs efter vad det nu är.  

Om du har försökt navigera i Google Analytics dokumentation för utvecklare eller i Google Cloud-dokumentationen vet du vad jag menar.

De viktigaste problemen: många lektioner, login och länkar

Kurser är ofta byggda som en samling onlinelektioner. Varje lektion har en egen URL, ungefär med den här strukturen:

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

Plattformen visar oftast ett sidindex med lektionerna, som gör det möjligt att navigera mellan dem.

Mitt mål är att få något likadant lokalt:

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

Eller, ännu bättre, en enda HTML-fil med hela kursen, typ curso-local.html.

Med ett internt index, ankarlänkar som låter mig navigera enkelt och allt lektionsinnehåll samlat efter varandra, som om det vore en PDF.

Här kommer de möjliga lösningarna.

Alternativ för att spara kursen på din dator

Det finns flera möjligheter, med olika grad av komplexitet och för olika situationer (fler eller färre URLs, behov av login eller inte, spara bilderna eller behålla länkarna till den aktuella servern…).

Jag förklarar dem från den mest grundläggande till den mest komplexa.

#1. “Spara som” från webbläsaren

Det första sättet är det mest självklara:

Arkiv > Spara som > Komplett webbsida

Detta laddar ner HTML-sidan och en mapp med tillhörande resurser: CSS, bilder, skript, typsnitt, osv.

Problemet är att den här metoden fungerar hyfsat bra för enkla sidor med få URLs, men inte för stora kurser. För utöver tiden det tar att ladda ner de 80 URL:erna en och en, uppstår andra komplikationer:

1. Interna länkar fortsätter att peka på online-URL:en.
2. Varje sida skapar sin egen resursmapp.
3. Det verkligt användbara innehållet är mycket litet jämfört med HTML:ens totala storlek.
4. Lokal navigering mellan lektioner blir inte löst (det kräver senare skript).
5. Det finns för mycket onödigt innehåll: header, menyer, footer, skript, pixlar, stilar, chat, externa resurser, osv.

Det vill säga: tekniskt gick det att spara “sidan”, men det skapade ingen användbar version av kursen.

Den här vägen passar bättre för att spara enkla webbplatser än kurser.

#2. SingleFile

Du kan använda ett tillägg av typen SingleFile, som sparar en komplett webbsida i en enda HTML-fil. Vid första anblick verkar det vara en bra lösning eftersom den undviker den klassiska resursmappen som webbläsaren skapar.

Resultatet ser ofta bättre ut, men många gånger löser det inte heller problemet.

Först eftersom den genererade filen kan väga flera hundra megabyte eftersom inbäddade typsnitt, enorma stilmallar och mycket kod som inte ingick i kursinnehållet sparas inuti HTML:en.

Dessutom, när innehållet genereras dynamiskt (webb byggd med JS-frameworks som Vue eller React) klarar tillägget inte att fånga upp det.

Och dessutom fortsätter samma grundproblem som i den tidigare lösningen:

• Länkarna fortsatte att peka på onlinewebben.
• En tung kopia av sidan sparades.
• Ingen lokal navigerbar struktur skapades.
• Det var inte praktiskt att upprepa det för 70, 80 eller 90 lektioner.

Då är det tydligt att SingleFile fungerar för att spara en enskild sida, men inte för att förvandla en hel kurs till en ren lokal version.

#3. Använda ett Markdown-tillägg

Nästa alternativ är att använda ett tillägg av typen MarkDownload, tänkt för att konvertera en webbsida till Markdown.

Upplägget är rimligt om du vill:

• Extrahera bara texten.
• Ta bort onödig design.
• Skapa lätta filer.
• För att senare slå ihop dem i ett dokument eller i en lokal HTML.

Problemet är att tillägget för tillfället inte finns i Chrome Web Store. 

Det finns alternativa tillägg, men det jag har använt tidigare var detta, så jag förklarar idén och låter dig undersöka andra liknande alternativ.

#4. Skript i konsolen

Nästa väg är att skapa ett litet skript från webbläsarens konsol.

Det finns två vägar; upplägget för den första är:

1. Öppna kursens indexsida.
2. Läsa alla länkar till lektionerna.
3. Göra fetch() för varje URL.
4. Extrahera innehållet.
5. Skapa en enda lokal HTML.

Om du inte programmerar genererar ChatGPT skriptet utan problem åt dig.

Det bra är att detta gör det möjligt att automatisera processen när du väl har loggat in, men det är troligt att sidans säkerhetspolicy förbjuder det.

Du kan prova ett annat upplägg, också från konsolen:

1. Öppna ett nytt fönster.
2. Navigera till varje lektion som användaren skulle göra.
3. Vänta tills den har laddat.
4. Läsa DOM:en i det fönstret.
5. Extrahera innehållet.

Det problem du kan stöta på här på dynamiska sidor är att webbläsaren inte alltid låter dig kontrollera det fönstret ordentligt, läsa dess innehåll eller upptäcka när det faktiskt var laddat.  

Ingen av de två metoderna är en robust lösning, men jag berättar om dem eftersom jag har använt dem vid vissa tillfällen och de kan vara användbara. Fast jag skulle säga att du hellre går vidare till nästa.

#6. Tampermonkey 

På förhand den mest komplexa, eftersom den kräver:

• Installera ett tillägg.
• Generera ett skript.
• Att det körs inne i varje URL.

Men Tampermonkey gör det betydligt enklare, eftersom det låter dig ladda ett eget skript automatiskt när du besöker vissa URLs.

Här går webbläsaren själv in i varje lektion och skriptet körs inne på den laddade sidan.

Flödet är:

1. Indexsida.
2. Tampermonkey samlar in länkar.
3. Navigerar till lektion 1.
4. Fångar synligt innehåll.
5. Sparar status i localStorage.
6. Navigerar till lektion 2.
7. Fångar innehåll.
8. …
9. Genererar slutlig HTML.

Detta har mycket större chans att alltid fungera. 

Nyckeln är att hitta den verkliga containern för kursinnehållet, vilket man gör genom att inspektera URL:en för en lektion för att hitta vilket HTML-block som innehöll det användbara innehållet.

Det är oftast .main-content eller #lesson-content eller något sådant. Det beror på hur kurswebben är byggd.

När du har hittat den skapar du ett skript som gör följande:

1. Körs endast på kursens URLs.
2. Lägger till en liten flytande panel med knappar (valfritt).
3. Samlar in lektionslänkarna från kursens index.
4. Sparar dessa länkar i localStorage.
5. Navigerar automatiskt genom varje lektion.
6. Väntar tills #lesson-content finns.
7. Klonar det blocket.
8. Rensar skript, stilar, knappar, iframes och onödiga attribut.
9. Gör bilder och länkar till absoluta URLs.
10. Sparar varje fångad lektion i localStorage.
11. När det är klart genererar det en enda nedladdningsbar HTML-fil.

Det önskade resultatet var en fil som den vi nämnde i introt curso-local.html.

Förresten, du behöver inte kunna programmera. Inte ens HTML. Du ber ChatGPT om skriptet och det gör det åt dig (så gjorde jag).

Det viktiga är att du känner till formeln och förstår ungefär hur den fungerar, men själva koden genererar AI:n åt dig.

Steg för steg för att spara en onlinekurs på din dator

Det här är steg-för-steg-förklaringen.

Steg 1: installera Tampermonkey

Det första är att installera Tampermonkey.

I Chrome, på grund av nuvarande begränsningar, kan det vara nödvändigt:

1. Installera tillägget.
2. Gå till chrome://extensions/.
3. Aktivera utvecklarläge (reglaget uppe till höger).
4. Tillåt körning av användarskript.
5. Ge tillägget behörighet att köras på kurswebben.

Det är viktigt eftersom, om Tampermonkey inte har behörigheter, panelen inte visas även om skriptet är korrekt.

Steg 2: skapa skriptet

I Tampermonkey:

Dashboard > Create a new script

Du raderar det ursprungliga innehållet och skapar ditt skript.

Här lämnar jag skriptet som ChatGPT genererade åt mig, om du är utvecklare och vill titta på det, anpassa det eller testa det för ditt fall. Kom ihåg att ändra kursens URL:

Steg 3: öppna indexsidan för onlinekursen

Du måste gå in på kursens startsida. Om den kräver login, logga in först och gå in på framsidan.

Steg 4: kontrollera att panelen visas

Om du använder skriptet jag lämnar här bör det, när kursens sida laddas, visas en svart panel uppe till höger med tre knappar:

• Test 3
• Todo
• Borrar estado

Om den inte visas måste du kontrollera:

• Att Tampermonkey är aktiverat.
• Att skriptet är aktiverat.
• Att @match matchar kursens URL.
• Att tillägget har behörigheter för den webben.

Steg 5: rensa status före test

Före varje test är det klokt att trycka på knappen Borrar estado.

Detta rensar tidigare fångster lagrade i localStorage.

Det är viktigt eftersom gamla tillstånd kan ligga kvar under tester och skapa ofullständiga eller dubbla filer.

Steg 5: testa med 3 lektioner

När statusen har rensats trycker du på knappen Test 3.

Det är inte lämpligt att starta scrapern för hela kursen direkt.

Skriptet går igenom tre lektioner och laddar ner en HTML-fil.

Öppna den och kontrollera:

• Att indexet har tre lektioner.
• Att titlarna är korrekta.
• Att innehållet börjar med lektionens verkliga text.
• Att ingen footer fångas.
• Att inga tomma block visas.

Steg 6: köra den fullständiga fångsten

Om testet fungerar är allt klart. Du behöver bara:

1. Öppna den online indexsidan igen.
2. Trycka på Borrar estado.
3. Trycka på Todo.
4. Låta webbläsaren navigera själv.
5. Inte stänga fliken.
6. Vänta tills den slutliga HTML:en laddas ner.

Och då har du fått en utmärkt lokal HTML-fil som komprimerar hela kursen till några få kilobyte.

Men att den väger så lite har en hake. Bilderna är nämligen länkade till den ursprungliga servern, de har inte laddats ner till din PC. Det betyder att deras URL någon gång kan ändras eller att de kan raderas, med konsekvensen att du inte kommer att kunna se dem.

Du skulle kunna ladda ner dem en och en och ändra URL:en i HTML:en, men jag tycker att det är ganska meningslöst. Därför finns det för mig ett nästa (valfritt) steg.

Steg 7 (valfritt): föra över innehållet till Word

Jag säger Word, men du kan göra det i Google Docs om du föredrar det. En fråga om arbetsflöde.

I vilket fall som helst är det här steget mycket enkelt, eftersom du bara behöver:

• Öppna HTML:en med webbläsaren.
• Markera allt innehåll (ctrl+a i Windows).
• Kopiera det (ctrl+c).
• Klistra in det (ctrl+v) i en ny Windows-fil. Det kan ta några sekunder beroende på kursens storlek.
• Spara det.

Nu har bilderna klistrats in i Word-filen och de är redan dina.  

Nackdelen är att filen inte längre väger några få kilobyte, utan megabyte. Och kanske många: i min senaste kurs 181MB. Det är 136 sidor med flera skärmbilder. Ingen liten sak. 

Men det finns en lösning på detta. Läs vidare.

Steg 7 (valfritt): föra över innehållet till PDF

Detta är ännu enklare än det föregående, men det finns ett knep. Du måste:

1. Öppna filen i Word.
2. Klicka på “Spara som”.
3. Välja PDF.
4. I alternativen som visas, välja “Minsta storlek (onlinepublicering)”:

Voilà!

Från 181 till 2MB, inte alls dåligt. 

Ja, bilderna tappar lite kvalitet, men de uppfyller utbildningens syfte mer än väl.

Med detta får vi en PDF som väger väldigt lite, med hela kursen, med bilder och länkar på vår PC, eller i vårt utbildningsmoln om vi föredrar det (och det borde vi föredra).

Begränsningar med den här lösningen

Den här lösningen fungerar för kurser eller dokumentation i HTML vars innehåll främst är text, bilder och länkar.

Den fungerar inte för att:

• Ladda ner skyddade videor.
• Fånga innehåll som levereras med DRM.
• Spara inbäddade spelare.
• Kringgå betalningar eller åtkomstbegränsningar.
• Bevara plattformens ursprungliga design till 100%.
• Ladda ner bilagor som kräver ytterligare behörigheter.

Om kursen innehåller inbäddade videor i Cloudflare Stream, Vimeo, Wistia eller andra skyddade spelare kan skriptet behålla platsen eller länken, men det laddar inte ner videon. Det är olika saker.

Slutsats

Om du vill eller behöver spara en kurs lokalt för att alltid ha den nära till hands, eller komplett dokumentation för att ge den till en AI och ställa frågor, har du flera alternativ.

Men om källan kräver login och har flera tiotals eller hundratals URLs är systemet med Tampermonkey det bästa. 

Om det är färre än tio URLs och du inte vill krångla kan du prova de andra lösningarna jag nämner.

Jag har provat många system under mitt liv -automatiska och manuella- och inget är lika snabbt och automatiskt som detta. 

Åtminstone tills AI-agenterna gör det åt dig. Gratis, förstås.

Man kan ju alltid önska.