Browserextensies ontwikkelen (Chrome en Edge) · Les

Items aan contextmenu's toevoegen

Maak aangepaste contextmenu-items die verschijnen wanneer gebruikers met de rechtermuisknop op webpagina's, afbeeldingen of links klikken en extensieacties activeren.

Les 1 van 411 stappen

Items aan contextmenu's toevoegen is een gratis Browserextensies ontwikkelen (Chrome en Edge)-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Browserextensies ontwikkelen (Chrome en Edge). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Wat zijn contextmenu's?

Browserextensies kunnen aangepaste items toevoegen aan het contextmenu, dat verschijnt wanneer je met de rechtermuisknop op een webpagina klikt.

Met deze items kunnen gebruikers snel acties uitvoeren die verband houden met waarop ze hebben geklikt, zoals een afbeelding opslaan, geselecteerde tekst vertalen of een aangepaste zoekopdracht starten.

Contextmenu's inschakelen

Voordat je extensie contextmenu-items kan maken, moet je de machtiging "contextMenus" opgeven in het manifest.json-bestand.

Met deze machtiging laat je de browser weten dat je extensie met de contextmenu-API wil werken.

{ "manifest_version": 3,
  "name": "My Menu Extension",
  "version": "1.0",
  "permissions": [
    "contextMenus"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

De API `chrome.contextMenus`

De API chrome.contextMenus is de manier waarop de achtergrondserviceworker van je extensie met contextmenu's werkt.

De API biedt methoden om menu-items te beheren:

create(): Een nieuw menu-item toevoegen.
update(): De eigenschappen van een bestaand item wijzigen.
remove(): Een specifiek item verwijderen.
removeAll(): Alle door je extensie toegevoegde items wissen.

Je eerste item maken

Gebruik chrome.contextMenus.create() om een contextmenu-item te maken. Je moet een unieke id en een title opgeven.

Dit voorbeeld voegt een eenvoudig item met de naam "Mijn eerste item" toe aan het algemene contextmenu van de pagina.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "myFirstItem",
    title: "My First Item",
    contexts: ["page"]
  });
});

Itemeigenschappen: ID en titel

Elk contextmenu-item heeft een unieke id nodig. Met deze ID kun je later herkennen op welk item is geklikt.

De title is de tekst die in het menu wordt weergegeven. De reeks contexts bepaalt waar het item moet verschijnen.

id: Een unieke tekenreeks als identificatie.
title: De voor de gebruiker zichtbare tekst van het menu-item.
contexts: Een reeks tekenreeksen die bepaalt waar het item verschijnt.

Reageren op klikken

Nadat je een item hebt gemaakt, wil je code uitvoeren wanneer een gebruiker erop klikt. Gebruik chrome.contextMenus.onClicked.addListener() om naar deze klikken te luisteren.

De listener ontvangt een info-object met informatie over de klik, waaronder menuItemId. Daarmee kun je herkennen welk item is geactiveerd.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "logClickItem",
    title: "Log This Click",
    contexts: ["page"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "logClickItem") {
    console.log("Item 'Log This Click' was clicked!");
    // You can perform other actions here
  }
});

Contexttypen voor specifieke elementen

De eigenschap contexts is krachtig! Hiermee bepaal je precies waar je menu-item wordt weergegeven.

Veelgebruikte contexttypen zijn:

"page": Klik met de rechtermuisknop op een willekeurig deel van de pagina.
"selection": Klik met de rechtermuisknop op geselecteerde tekst.
"link": Klik met de rechtermuisknop op een hyperlink.
"image": Klik met de rechtermuisknop op een afbeelding.
"video", "audio": Voor media-elementen.

Voorbeeld: geselecteerde tekst zoeken

We maken een item dat alleen verschijnt wanneer tekst is geselecteerd. Als je erop klikt, wordt een nieuw tabblad geopend om die tekst op Google te zoeken.

Let op de eigenschap selectionText in het object info wanneer je de context "selection" gebruikt.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "searchSelected",
    title: "Search '%s' on Google", // %s is placeholder for selected text
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "searchSelected" && info.selectionText) {
    const query = encodeURIComponent(info.selectionText);
    const url = `https://www.google.com/search?q=${query}`;
    chrome.tabs.create({ url: url });
  }
});

Items bijwerken en verwijderen

Je kunt menu-items na het aanmaken dynamisch wijzigen of verwijderen. Dit is handig om je aan te passen aan gebruikersvoorkeuren of de inhoud van een pagina.

chrome.contextMenus.update(id, properties): Wijzigt eigenschappen zoals de titel of contexten.
chrome.contextMenus.remove(id): Verwijdert een specifiek item.
chrome.contextMenus.removeAll(): Verwijdert alle items die door je extensie zijn toegevoegd.

Uitdaging: contextmenu

Bekijk het volgende manifest.json en het achtergrondscript voor een extensie.

Welke uitspraken over de gemaakte contextmenu-items zijn juist?

// manifest.json
{
  "manifest_version": 3,
  "name": "Test Menu",
  "version": "1.0",
  "permissions": ["contextMenus"],
  "background": {"service_worker": "background.js"}
}

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "itemA",
    title: "Action A",
    contexts: ["page"]
  });
  chrome.contextMenus.create({
    id: "itemB",
    title: "Action B",
    contexts: ["selection"]
  });
  chrome.contextMenus.create({
    id: "itemC",
    title: "Action C",
    contexts: ["link"]
  });
});

Beantwoord dit in de interactieve les

Samenvatting: contextmenu's

Je hebt geleerd hoe je aangepaste contextmenu-items aan je browserextensie toevoegt!

Declareer de toestemming "contextMenus" in manifest.json.
Gebruik chrome.contextMenus.create() in je achtergrondscript.
Geef voor elk item een id, title en contexts op.
Luister naar klikken met chrome.contextMenus.onClicked.addListener().
Met contexten zoals "page", "selection" en "link" kun je nauwkeurig bepalen waarop een item van toepassing is.

Met deze vaardigheden kun je krachtige, contextbewuste acties aan je extensie toevoegen. Hierna bekijken we de integratie met de Omnibox!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Items aan contextmenu's toevoegen” gratis?

Ja — de volledige tekst van “Items aan contextmenu's toevoegen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Browserextensies ontwikkelen (Chrome en Edge) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Wat leer ik in “Items aan contextmenu's toevoegen”?

Maak aangepaste contextmenu-items die verschijnen wanneer gebruikers met de rechtermuisknop op webpagina's, afbeeldingen of links klikken en extensieacties activeren. Je oefent met Browserextensies ontwikkelen (Chrome en Edge) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Browserextensies ontwikkelen (Chrome en Edge) te beginnen?

Ervaring vooraf is niet nodig. Browserextensies ontwikkelen (Chrome en Edge) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Items aan contextmenu's toevoegen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Browserextensies ontwikkelen (Chrome en Edge)?

Ja. Elke les over Browserextensies ontwikkelen (Chrome en Edge) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Browserextensies ontwikkelen (Chrome en Edge)