Utvikling av nettleserutvidelser (Chrome og Edge) · leksjon

Legge til elementer i kontekstmenyen

Opprett egendefinerte elementer i kontekstmenyen som vises når brukere høyreklikker på nettsider, bilder eller lenker, og utløser handlinger i utvidelsen.

Leksjon 1 av 411 trinn

Legge til elementer i kontekstmenyen er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Hva er kontekstmenyer?

Nettleserutvidelser kan legge til egendefinerte elementer i kontekstmenyen, som vises når du høyreklikker på en nettside.

Disse elementene lar brukere utføre raske handlinger knyttet til det de klikket på, for eksempel lagre et bilde, oversette markert tekst eller starte et egendefinert søk.

Aktivere kontekstmenyer

Før utvidelsen kan opprette elementer i kontekstmenyen, må du angi tillatelsen "contextMenus" i filen manifest.json.

Denne tillatelsen forteller nettleseren at utvidelsen skal samhandle med API-et for kontekstmenyer.

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

API-et `chrome.contextMenus`

API-et chrome.contextMenus er måten bakgrunnstjenestearbeideren i utvidelsen samhandler med kontekstmenyer på.

Det tilbyr metoder for å administrere menyelementer:

create(): Legger til et nytt menyelement.
update(): Endrer egenskapene til et eksisterende element.
remove(): Sletter et bestemt element.
removeAll(): Fjerner alle elementer som er lagt til av utvidelsen.

Opprett ditt første element

For å opprette et element i kontekstmenyen bruker du chrome.contextMenus.create(). Du må oppgi en unik id og en title.

Dette eksemplet legger til et enkelt element med navnet «My First Item» i den generelle kontekstmenyen for siden.

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

Elementegenskaper: ID og tittel

Hvert element i kontekstmenyen trenger en unik id. Denne ID-en hjelper deg med å identifisere hvilket element som senere ble klikket på.

title er teksten som vises i menyen. Matrisen contexts angir hvor elementet skal vises.

id: En unik strengidentifikator.
title: Teksten for menyelementet som brukeren ser.
contexts: En rekke strenger som definerer hvor elementet vises.

Reagere på klikk

Etter at du har opprettet et element, vil du kanskje kjøre kode når en bruker klikker på det. Bruk chrome.contextMenus.onClicked.addListener() for å lytte etter slike klikk.

Lytteren mottar et info-objekt med detaljer om klikket, blant annet menuItemId, som hjelper deg med å identifisere hvilket element som ble aktivert.

// 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
  }
});

Konteksttyper for bestemte elementer

Propertyen contexts er kraftig! Den lar Dem styre nøyaktig hvor menyelementet vises.

Vanlige konteksttyper inkluderer:

"page": Høyreklikk på et hvilket som helst sted på siden.
"selection": Høyreklikk på merket tekst.
"link": Høyreklikk på en hyperkobling.
"image": Høyreklikk på et bilde.
"video", "audio": For medieelementer.

Eksempel: Søk etter merket tekst

La oss opprette et element som bare vises når tekst er merket. Når det klikkes på, åpnes en ny fane for å søke etter teksten på Google.

Legg merke til egenskapen selectionText i info-objektet når konteksten "selection" brukes.

// 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 });
  }
});

Oppdatere og fjerne elementer

De kan endre eller fjerne kontekstmenyelementer dynamisk etter at de er opprettet. Dette er nyttig for å tilpasse menyen etter brukerinnstillinger eller innholdet på siden.

chrome.contextMenus.update(id, properties): Endrer egenskaper som tittel eller kontekster.
chrome.contextMenus.remove(id): Sletter et bestemt element.
chrome.contextMenus.removeAll(): Sletter alle elementer som er lagt til av utvidelsen.

Utfordring: Kontekstmeny

Se på følgende manifest.json og bakgrunnsskript for en utvidelse.

Hvilke påstander om de opprettede kontekstmenyelementene er riktige?

// 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"]
  });
});

Besvar den i den interaktive leksjonen

Oppsummering: Kontekstmenyer

De har lært hvordan De legger til egendefinerte kontekstmenyelementer i nettleserutvidelsen!

Erklær tillatelsen "contextMenus" i manifest.json.
Bruk chrome.contextMenus.create() i bakgrunnsskriptet.
Angi id, title og contexts for hvert element.
Registrer klikk ved hjelp av chrome.contextMenus.onClicked.addListener().
Kontekster som "page", "selection" og "link" gjør det mulig å målrette handlinger nøyaktig.

Med disse ferdighetene kan De legge til kraftige, kontekstbevisste handlinger i utvidelsen. Deretter skal vi se på integrasjon med Omnibox!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Legge til elementer i kontekstmenyen» gratis?

Ja – hele teksten i «Legge til elementer i kontekstmenyen» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Legge til elementer i kontekstmenyen»?

Opprett egendefinerte elementer i kontekstmenyen som vises når brukere høyreklikker på nettsider, bilder eller lenker, og utløser handlinger i utvidelsen. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av nettleserutvidelser (Chrome og Edge)?

Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Legge til elementer i kontekstmenyen»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av nettleserutvidelser (Chrome og Edge)-leksjonen?

Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Utvikling av nettleserutvidelser (Chrome og Edge)