Injicera CSS och isolera stilar
Lägg till och ta bort stilar på webbsidor från content scripts utan att skapa konflikter med värdsidans egen CSS.
Injicera CSS och isolera stilar är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.
Varför injicera CSS
Content scripts kan ändra hur en sida ser ut, inte bara dess struktur. Genom att injicera CSS kan tillägget markera element, dölja sådant som stör eller använda ett anpassat tema.
Men värdsidan har redan sina egna formatmallar, så Ni måste injicera dem försiktigt för att undvika konflikter.
Deklarera CSS i manifestet
Det enklaste sättet är att ange en formatmall under content_scripts. Webbläsaren injicerar den automatiskt på matchande sidor.
{
"content_scripts": [{
"matches": ["https://*.example.com/*"],
"css": ["styles.css"]
}]
}Injicera CSS programmatiskt
Om Ni bara vill injicera CSS när det behövs använder Ni scripting-API:t från Er service worker tillsammans med insertCSS.
chrome.scripting.insertCSS({
target: { tabId: tab.id },
files: ['styles.css']
})Injicera CSS direkt
Ni kan också skicka med rå CSS-text i stället för en fil med egenskapen css.
chrome.scripting.insertCSS({
target: { tabId: tab.id },
css: 'body { filter: grayscale(1); }'
})Ta bort injicerad CSS
Om Ni vill stänga av en funktion tar Ni bort exakt samma CSS som Ni infogade, med hjälp av removeCSS.
chrome.scripting.removeCSS({
target: { tabId: tab.id },
files: ['styles.css']
})Problemet med specificitet
Era injicerade regler konkurrerar med sidans egen CSS. Om sidan har selektorer med högre specificitet förlorar Era formatregler.
Använd mer specifika selektorer eller, sparsamt, !important när det behövs.
.myext-highlight {
background: yellow !important;
}Namnområden för Era klasser
Inled varje klass Ni lägger till med en unik token, till exempel myext-, så att Era regler aldrig oavsiktligt matchar sidans element.
el.classList.add('myext-panel')Shadow DOM för fullständig isolering
För gränssnitt som Ni injicerar på sidan isolerar en shadow DOM Era formatregler helt från värdsidan och sidans formatregler från Era.
const host = document.createElement('div')
const shadow = host.attachShadow({ mode: 'open' })
shadow.innerHTML = '<style>p{color:red}</style><p>Hi</p>'
document.body.appendChild(host)Läsa in teckensnitt och bilder
Om Er CSS hänvisar till filer som paketerats i tillägget anger Ni dem under web_accessible_resources och hänvisar till dem med chrome.runtime.getURL.
const url = chrome.runtime.getURL('img/icon.png')Respektera sidans layout
Undvik att förstöra värdsidan. Föredra tilläggande formatregler, överlagringar med fast position eller containrar med shadow DOM framför att skriva om sidans centrala layoutegenskaper.
Städa upp när funktionen stängs av
När användaren stänger av funktionen tar Ni bort injicerad CSS och alla element som Ni har skapat, så att sidan återgår till sitt ursprungliga tillstånd.
document.querySelectorAll('.myext-panel').forEach(e => e.remove())Snabbtest
Testa Era kunskaper om CSS-injicering.
Sammanfattning
Ni har lärt Er att formge sidor från content scripts:
- Deklarera CSS i manifestet eller injicera den med
insertCSS - Ta bort den med
removeCSS - Använd namnområden för klasser och hantera specificitet
- Använd en shadow DOM för fullständig isolering
- Städa upp när funktionen stängs av
Försiktig injicering låter Er förändra sidor utan att förstöra dem.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Injicera CSS och isolera stilar” gratis?
Ja – hela texten till ”Injicera CSS och isolera stilar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.
Vad lär jag mig i ”Injicera CSS och isolera stilar”?
Lägg till och ta bort stilar på webbsidor från content scripts utan att skapa konflikter med värdsidans egen CSS. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?
Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Injicera CSS och isolera stilar”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?
Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Injicera innehållsskript
- Ändra DOM i webbsidor
- Interagera med data på webbsidor
- Injicera CSS och isolera stilar