Shell-integration
Lær at åbne eksterne links, filer og mapper med operativsystemets standardprogrammer via Electrons `shell`-modul.
Shell-integration er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.
Introduktion til shell-integration
Velkommen til shell-integration! I Electron kan din desktop-app interagere med brugerens operativsystem (OS) på effektive måder.
Det betyder, at du kan åbne eksterne links og filer eller endda vise elementer i operativsystemets filhåndtering, ligesom indbyggede apps gør.
Mød `shell`-modulet
Electron indeholder det indbyggede shell-modul, som gør disse interaktioner med operativsystemet nemme og sikre. Det er tilgængeligt i både hoved- og renderer-processer.
shell-modulet lader din app uddelegere opgaver som åbning af URL'er eller filer til operativsystemets standardprogrammer.
Åbning af eksterne URL'er
Den mest almindelige anvendelse er at åbne weblinks i brugerens standardbrowser. Det kan du gøre med shell.openExternal(url).
Det er vigtigt af hensyn til sikkerheden: I stedet for at vise eksternt webindhold i din app overlader du det til en betroet browser.
Kode: Åbn et eksternt link
Sådan kan du åbne en ekstern URL. Denne kode vil typisk ligge i din main.js eller blive kaldt fra et preload-script, hvis den udløses af renderer-processen.
Prøv at køre dette eksempel:
const { app, shell } = require('electron');
app.whenReady().then(() => {
// In a real app, this would be triggered by a user action.
// For this demo, it opens when the app is ready.
shell.openExternal('https://www.electronjs.org/docs')
.then(() => console.log('Opened Electron docs!'))
.catch(err => console.error('Failed to open URL:', err));
// A real Electron app would also create a BrowserWindow here.
});Åbning af lokale filer og mapper
Har du brug for at åbne et dokument, et billede eller endda en mappe fra din app? Brug shell.openPath(path).
Denne funktion forsøger at åbne den angivne fil eller mappe med operativsystemets standardprogram for den pågældende filtype.
Kode: Åbn en lokal fil
Dette eksempel opretter en simpel tekstfil og åbner den derefter med operativsystemets standardteksteditor.
Prøv at køre dette eksempel:
const { app, shell } = require('electron');
const path = require('path');
const fs = require('fs');
app.whenReady().then(() => {
const userDataPath = app.getPath('userData');
const filePath = path.join(userDataPath, 'my-document.txt');
// Create a dummy file for demonstration
fs.writeFileSync(filePath, 'Hello from CoddyKit! This is your document.');
shell.openPath(filePath)
.then(() => console.log(`Opened: ${filePath}`))
.catch(err => console.error(`Failed to open path: ${err}`));
});Visning af elementer i Stifinder/Finder
Nogle gange vil du ikke åbne en fil, men blot vise, hvor den findes. shell.showItemInFolder(fullPath) gør netop det.
Den viser den angivne fil i brugerens filhåndtering (f.eks. Stifinder på Windows eller Finder på macOS) og vælger den eventuelt.
Kode: Vis et element i en mappe
Lad os oprette endnu en fil og derefter vise dens placering for brugeren.
Prøv at køre dette eksempel:
const { app, shell } = require('electron');
const path = require('path');
const fs = require('fs');
app.whenReady().then(() => {
const desktopPath = app.getPath('desktop');
const fileToShowPath = path.join(desktopPath, 'coddykit_demo_file.txt');
// Create a dummy file on the desktop
fs.writeFileSync(fileToShowPath, 'Find me!');
shell.showItemInFolder(fileToShowPath);
console.log(`Showing item in folder: ${fileToShowPath}`);
});Sikkerhed og bedste praksis
Når du bruger shell-metoder, især sammen med brugerinput, skal du altid tage højde for sikkerheden:
- Valider URL'er: Kontrollér, at URL'en er sikker og tilsigtet, før du kalder
openExternal(). - Kontekstisolering: Brug et preload-script i renderer-processen til kun at eksponere de nødvendige
shell-funktioner på en sikker måde. - Fejlhåndtering: Medtag altid
.catch()for Promise-baserede metoder somopenExternalogopenPath.
Hurtig kontrol af shell
Hvilken metode i shell-modulet vil du bruge til at åbne et weblink i brugerens standardbrowser?
Opsummering: Shell-integration
Godt gået! Du har lært, hvordan Electrons shell-modul hjælper din app med at interagere med det indbyggede operativsystem:
shell.openExternal()til weblinks.shell.openPath()til lokale filer og mapper.shell.showItemInFolder()til at vise elementer i filhåndteringen.
Disse metoder giver dig en problemfri og sikker måde at udvide din apps funktionalitet til det indbyggede miljø.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 47
Ofte stillede spørgsmål
Er lektionen “Shell-integration” gratis?
Ja — hele teksten til “Shell-integration” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Shell-integration”?
Lær at åbne eksterne links, filer og mapper med operativsystemets standardprogrammer via Electrons `shell`-modul. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?
Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Shell-integration”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?
Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Native menuer og kontekstmenuer
- Dialogbokse og notifikationer
- Shell-integration
- Globale genveje og adgang til udklipsholderen