Met deze tutorial bouwen we een extensie waarmee de vormgeving van de Chrome-extensie en de documentatiepagina's in de Chrome Web Store wordt vereenvoudigd, zodat ze gemakkelijker te lezen zijn.
In deze handleiding leggen we uit hoe u het volgende kunt doen:
- Stel de uitbreidingsmedewerker in als evenementencoördinator.
- Behoud de privacy van de gebruiker via de machtiging
"activeTab". - Voer code uit wanneer de gebruiker op het pictogram van de extensiewerkbalk klikt.
- Een stylesheet invoegen en verwijderen met behulp van de Scripting API.
- Gebruik een sneltoets om code uit te voeren.
Voordat je begint
Deze handleiding gaat ervan uit dat je basiservaring hebt met webontwikkeling. Bekijk Hello World voor een introductie tot de workflow voor extensieontwikkeling.
Bouw de extensie
Maak om te beginnen een nieuwe map aan met de naam focus-mode om de extensiebestanden te bewaren. Je kunt de volledige broncode downloaden op GitHub .
Stap 1: Voeg de extensiegegevens en pictogrammen toe
Maak een manifest.json -bestand. Kopieer en plak de volgende code:
{
"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"
}
}
Maak een map images en download de pictogrammen daarin.
Stap 2: Initialiseer de extensie
Extensies kunnen browsergebeurtenissen op de achtergrond monitoren met behulp van de service worker van de extensie . Service workers zijn speciale JavaScript-omgevingen die gebeurtenissen verwerken en beëindigen wanneer ze niet nodig zijn.
Begin met het registreren van de service worker in het manifest.json -bestand:
{
...
"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 service worker naar luistert, is runtime.onInstalled() . Deze methode stelt de extensie in staat om een beginstatus in te stellen of bepaalde taken uit te voeren tijdens de installatie. Extensies kunnen de Storage API en IndexedDB gebruiken om de applicatiestatus op te slaan. Omdat we in dit geval slechts twee statussen verwerken, gebruiken we de badgetekst van de actie om bij te houden of de extensie 'AAN' of 'UIT' staat.
Stap 3: De extensieactie inschakelen
De extensieactie bepaalt het pictogram op de werkbalk van de extensie. Wanneer de gebruiker het extensiepictogram selecteert, 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 manifest.json -bestand 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 actieveTab-machtiging om de privacy van gebruikers te beschermen
De activeTab machtiging geeft de extensie tijdelijk de mogelijkheid om code uit te voeren op het actieve tabblad. Het geeft ook toegang tot gevoelige eigenschappen van het huidige tabblad.
Deze toestemming 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 activeren de activeTab-machtiging in mijn eigen extensie?
- Een sneltoetscombinatie indrukken.
- Een contextmenu-item selecteren.
- Een suggestie van de omnibox accepteren.
- Een extensie-pop-up openen.
Met de machtiging "activeTab" kunnen gebruikers er bewust voor kiezen om de extensie op het geselecteerde tabblad uit te voeren; op deze manier wordt de privacy van de gebruiker beschermd. Een ander voordeel is dat er geen machtigingswaarschuwing wordt gegenereerd.
Om de machtiging "activeTab" te gebruiken, voegt u deze toe aan de machtigingenreeks van het manifest:
{
...
"permissions": ["activeTab"],
...
}
Stap 4: Volg de status van het huidige tabblad
Nadat de gebruiker op de extensieactie klikt, controleert de extensie of de URL overeenkomt met een documentatiepagina. Vervolgens wordt de status van het huidige tabblad gecontroleerd en wordt de volgende status ingesteld. 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: Stijlblad toevoegen of verwijderen
Nu is het tijd om de lay-out van de pagina aan te passen. Maak een bestand met de naam focus-mode.css en voeg de volgende code toe:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
Voeg de stylesheet in of verwijder deze met behulp van de Scripting API. Begin met het declareren van de "scripting" -machtiging in het manifest:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Voeg ten slotte de volgende code toe aan background.js om de paginalay-out 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 },
});
}
}
});
(Optioneel) Wijs een sneltoets toe
Voeg voor de lol een snelkoppeling toe om de focusmodus gemakkelijker in of uit te schakelen. Voeg de "commands" -toets 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 de ontwikkelaarsmodus te laden, volgt u de stappen in Hallo wereld .
Test de extensie
Open 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 ongeveer zo moeten gaan:
Hierop:
Mogelijke verbeteringen
Probeer op basis van wat u vandaag hebt geleerd een van de volgende dingen te bereiken:
- Verbeter het CSS-stijlblad.
- Wijs een andere sneltoets toe.
- Wijzig de lay-out van uw favoriete blog of documentatiesite.
Blijf bouwen
Gefeliciteerd met het voltooien van deze tutorial 🎉. Blijf je vaardigheden verbeteren door andere tutorials in deze serie te voltooien:
| Verlenging | Wat je leert |
|---|---|
| Leestijd | Voeg automatisch een element in op een specifieke set pagina's. |
| Tabbladenbeheerder | Maak een pop-up waarmee u browsertabbladen kunt beheren. |
Blijf verkennen
We hopen dat je hebt genoten van het bouwen van deze Chrome-extensie en dat je enthousiast bent om je leertraject voor extensieontwikkeling voort te zetten. We raden de volgende leerpaden aan:
- De ontwikkelaarshandleiding bevat tientallen extra koppelingen naar documentatie die relevant is voor het maken van geavanceerde extensies.
- Extensies hebben toegang tot krachtige API's die verder gaan dan wat er op het openbare web beschikbaar is. De documentatie van Chrome API's bespreekt elke API.