Vereenvoudig de stijl van de huidige pagina door op het extensiewerkbalkpictogram te klikken.
Overzicht
In deze zelfstudie wordt een extensie gebouwd die de stijl van de Chrome-extensie en de documentatiepagina's van de Chrome Web Store vereenvoudigt, zodat ze gemakkelijker te lezen zijn.
In deze handleiding leggen we uit hoe u het volgende kunt doen:
- Gebruik de extensieservicemedewerker als evenementencoördinator.
- Behoud de privacy van gebruikers via de machtiging
"activeTab". - Voer code uit wanneer de gebruiker op het extensiewerkbalkpictogram klikt.
- Voeg een stijlblad in en verwijder het met behulp van de Scripting API.
- Gebruik een sneltoets om code uit te voeren.
Voordat je start
In deze handleiding wordt ervan uitgegaan dat u over basiservaring op het gebied van webontwikkeling beschikt. We raden u aan Hello World te bezoeken voor een inleiding tot de workflow voor het ontwikkelen van extensies.
Bouw de extensie
Maak om te beginnen een nieuwe map met de naam focus-mode waarin de bestanden van de extensie worden bewaard. Als u wilt, kunt u de volledige broncode downloaden van GitHub .
Stap 1: Voeg de extensiegegevens en pictogrammen toe
Maak een bestand met de naam manifest.json en neem de volgende code op.
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Voor meer informatie over deze manifestsleutels kunt u de tutorial 'Scripts uitvoeren op elk tabblad' bekijken, waarin de metagegevens en pictogrammen van de extensie gedetailleerder worden uitgelegd.
Maak een map images en download de pictogrammen daarin.
Stap 2: Initialiseer de extensie
Extensies kunnen browsergebeurtenissen op de achtergrond volgen met behulp van de service worker van de extensie . Serviceworkers zijn speciale JavaScript-omgevingen die gebeurtenissen afhandelen en eindigen wanneer ze niet nodig zijn.
Begin met het registreren van de servicemedewerker in het bestand manifest.json :
{
...
"background": {
"service_worker": "background.js"
},
...
}
Maak een bestand met de naam background.js en voeg de volgende code toe:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
De eerste gebeurtenis waar onze servicemedewerker naar zal luisteren is runtime.onInstalled() . Met deze methode kan de extensie tijdens de installatie een beginstatus instellen of bepaalde taken voltooien. Extensies kunnen de Storage API en IndexedDB gebruiken om de applicatiestatus op te slaan. Omdat we in dit geval slechts twee statussen behandelen, gebruiken we de badgetekst van de actie zelf om bij te houden of de extensie 'AAN' of 'UIT' staat.
Stap 3: Schakel de extensieactie in
De extensieactie bestuurt het werkbalkpictogram van de extensie. Dus telkens wanneer de gebruiker op het extensiepictogram klikt, wordt er code uitgevoerd (zoals in dit voorbeeld) of wordt er een pop-up weergegeven. Voeg de volgende code toe om de extensieactie in het bestand manifest.json te declareren:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
Gebruik de activeTab-machtiging om de privacy van gebruikers te beschermen
De activeTab machtiging verleent de extensie tijdelijk de mogelijkheid om code uit te voeren op het actieve tabblad. Het biedt ook toegang tot gevoelige eigenschappen van het huidige tabblad.
Deze machtiging wordt ingeschakeld wanneer de gebruiker de extensie aanroept . In dit geval roept de gebruiker de extensie aan door op de extensieactie te klikken.
💡 Welke andere gebruikersinteracties schakelen de activeTab-machtiging in mijn eigen extensie in?
- Door op een sneltoetscombinatie te drukken.
- Een contextmenu-item selecteren.
- Een suggestie uit de omnibox accepteren.
- Een extensiepop-up openen.
Met de machtiging "activeTab" kunnen gebruikers er doelbewust voor kiezen om de extensie op het gefocuste tabblad uit te voeren; op deze manier beschermt het de privacy van de gebruiker. Een ander voordeel is dat er geen toestemmingswaarschuwing wordt geactiveerd.
Om de machtiging "activeTab" te gebruiken, voegt u deze toe aan de machtigingsarray van het manifest:
{
...
"permissions": ["activeTab"],
...
}
Stap 4: Volg de status van het huidige tabblad
Nadat de gebruiker op de extensieactie heeft geklikt, controleert de extensie of de URL overeenkomt met een documentatiepagina. Vervolgens controleert het de status van het huidige tabblad en stelt het de volgende status in. Voeg de volgende code toe aan background.js :
const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON'
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
Stap 5: Voeg het stijlblad toe of verwijder het
Nu is het tijd om de lay-out van de pagina te wijzigen. Maak een bestand met de naam focus-mode.css en neem de volgende code op:
body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
display: none;
}
main > :last-child {
margin-top: min(10vmax, 10rem);
margin-bottom: min(10vmax, 10rem);
}
Voeg het stijlblad in of verwijder het met behulp van de Scripting API. Begin met het declareren van de machtiging "scripting" in het manifest:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Voeg ten slotte in background.js de volgende code toe om de lay-out van de pagina te wijzigen:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 Kan ik de Scripting API gebruiken om code te injecteren in plaats van een stylesheet?
Ja. U kunt scripting.executeScript() gebruiken om JavaScript te injecteren.
Optioneel: Wijs een sneltoets toe
Voeg voor de lol een snelkoppeling toe om het gemakkelijker te maken de focusmodus in of uit te schakelen. Voeg de sleutel "commands" toe aan het manifest.
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
De sleutel "_execute_action" voert dezelfde code uit als de gebeurtenis action.onClicked() , dus er is geen aanvullende code nodig.
Test of het werkt
Controleer of de bestandsstructuur van uw project er als volgt uitziet:
Laad uw extensie lokaal
Om een uitgepakte extensie in ontwikkelaarsmodus te laden, volgt u de stappen in Hello World .
Test de extensie op een documentatiepagina
Open eerst een van de volgende pagina's:
Klik vervolgens op de extensieactie. Als u een sneltoets hebt ingesteld, kunt u deze testen door op Ctrl + B of Cmd + B te drukken.
Het zou hier vandaan moeten komen:
Hierop:
🎯 Mogelijke verbeteringen
Probeer op basis van wat je vandaag hebt geleerd een van de volgende dingen te bereiken:
- Verbeter het CSS-stijlblad.
- Wijs een andere sneltoets toe.
- Verander de lay-out van uw favoriete blog of documentatiesite.
Blijf bouwen.
Gefeliciteerd met het voltooien van deze tutorial 🎉. Ga door met het verbeteren van je vaardigheden door andere tutorials uit deze serie te voltooien:
| Verlenging | Wat je gaat leren |
|---|---|
| Leestijd | Om automatisch een element op een specifieke reeks pagina's in te voegen. |
| Tabbladenbeheer | Om een pop-up te maken die browsertabbladen beheert. |
Ga door met verkennen
We hopen dat u deze Chrome-extensie met plezier heeft gemaakt en dat u graag uw leertraject voor de ontwikkeling van extensies wilt voortzetten. Wij raden de volgende leertrajecten aan:
- De ontwikkelaarshandleiding bevat tientallen extra links naar documentatie die relevant is voor het maken van geavanceerde extensies.
- Extensies hebben toegang tot krachtige API's die verder gaan dan wat beschikbaar is op het open web. De documentatie over Chrome API's doorloopt elke API.