PricingLoginStart free
Udvikling af browserudvidelser til Chrome og Edge · Lektion

Tilføjelse af elementer i genvejsmenuen

Opret tilpassede elementer i genvejsmenuen, som vises, når brugere højreklikker på websider, billeder eller links, og udløser handlinger i udvidelsen.

Lektion 1 af 411 trin

Tilføjelse af elementer i genvejsmenuen er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af browserudvidelser til Chrome og Edge, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad er kontekstmenuer?

Browserudvidelser kan tilføje brugerdefinerede elementer til kontekstmenuen, som vises, når du højreklikker på en webside.

Disse elementer lader brugere udføre hurtige handlinger i forbindelse med det, de klikkede på, f.eks. gemme et billede, oversætte markeret tekst eller starte en brugerdefineret søgning.

Aktivér kontekstmenuer

Før din udvidelse kan oprette elementer i kontekstmenuen, skal du angive tilladelsen "contextMenus" i din manifest.json-fil.

Denne tilladelse fortæller browseren, at din udvidelse har til hensigt at interagere med API'en til kontekstmenuer.

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

API'en `chrome.contextMenus`

API'en chrome.contextMenus er den måde, din baggrundstjenestearbejder interagerer med kontekstmenuer på.

Den indeholder metoder til at administrere menuelementer:

  • create(): Tilføjer et nyt menuelement.
  • update(): Ændrer egenskaberne for et eksisterende element.
  • remove(): Sletter et bestemt element.
  • removeAll(): Fjerner alle elementer, som din udvidelse har tilføjet.

Opret dit første element

Hvis du vil oprette et element i kontekstmenuen, skal du bruge chrome.contextMenus.create(). Du skal angive et entydigt id og en title.

Dette eksempel tilføjer et enkelt element med navnet "My First Item" til den generelle kontekstmenu for siden.

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

Elementegenskaber: ID og titel

Hvert element i kontekstmenuen skal have et entydigt id. Dette ID hjælper dig med senere at identificere, hvilket element der blev klikket på.

title er den tekst, der vises i menuen. Arrayet contexts angiver, hvor elementet skal vises.

  • id: En entydig tekstidentifikator.
  • title: Den tekst for menuelementet, som brugeren kan se.
  • contexts: Et array af tekster, der definerer, hvor elementet vises.

Reagér på klik

Når du har oprettet et element, vil du gerne køre kode, når en bruger klikker på det. Brug chrome.contextMenus.onClicked.addListener() til at lytte efter disse klik.

Lytteren modtager et info-objekt med oplysninger om klikket, herunder menuItemId, som hjælper dig med at identificere, hvilket element der blev aktiveret.

// 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

Egenskaben contexts er meget kraftfuld! Den giver dig mulighed for at styre præcis, hvor dit menupunkt vises.

Almindelige konteksttyper omfatter:

  • "page": Højreklik på en hvilken som helst del af siden.
  • "selection": Højreklik på markeret tekst.
  • "link": Højreklik på et hyperlink.
  • "image": Højreklik på et billede.
  • "video", "audio": Til medieelementer.

Eksempel: Søg efter markeret tekst

Lad os oprette et menupunkt, der kun vises, når tekst er markeret. Når der klikkes på det, åbner det en ny fane, som søger efter teksten på Google.

Bemærk egenskaben selectionText i objektet info, når du bruger konteksten "selection".

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

Opdatering og fjernelse af menupunkter

Du kan ændre eller fjerne kontekstmenupunkter dynamisk, efter at de er blevet oprettet. Det er nyttigt, når du vil tilpasse dem til brugerens indstillinger eller sidens indhold.

  • chrome.contextMenus.update(id, properties): Ændrer egenskaber som titel eller kontekster.
  • chrome.contextMenus.remove(id): Sletter et bestemt menupunkt.
  • chrome.contextMenus.removeAll(): Sletter alle menupunkter, som din udvidelse har tilføjet.

Udfordring: Kontekstmenu

Se på følgende manifest.json og baggrundsscript til en udvidelse.

Hvilke udsagn om de oprettede kontekstmenupunkter er sande?

// 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 lektion

Opsummering: Kontekstmenuer

Du har lært, hvordan du tilføjer tilpassede kontekstmenupunkter til din browserudvidelse!

  • Erklær tilladelsen "contextMenus" i manifest.json.
  • Brug chrome.contextMenus.create() i dit baggrundsscript.
  • Angiv id, title og contexts for hvert menupunkt.
  • Lyt efter klik ved hjælp af chrome.contextMenus.onClicked.addListener().
  • Med kontekster som "page", "selection" og "link" kan du målrette præcist.

Disse færdigheder gør det muligt for dig at tilføje kraftfulde, kontekstbevidste handlinger til din udvidelse. Derefter undersøger vi integration med Omnibox!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
12
Lektioner
48
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Tilføjelse af elementer i genvejsmenuen” gratis?

Ja — hele teksten til “Tilføjelse af elementer i genvejsmenuen” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af browserudvidelser til Chrome og Edge-kurset, skal du opgradere til CoddyKit PRO. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Tilføjelse af elementer i genvejsmenuen”?

Opret tilpassede elementer i genvejsmenuen, som vises, når brugere højreklikker på websider, billeder eller links, og udløser handlinger i udvidelsen. Du øver dig i Udvikling af browserudvidelser til Chrome og Edge med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af browserudvidelser til Chrome og Edge?

Der kræves ingen tidligere erfaring. Udvikling af browserudvidelser til Chrome og Edge på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Tilføjelse af elementer i genvejsmenuen”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af browserudvidelser til Chrome og Edge-lektion?

Ja. Alle Udvikling af browserudvidelser til Chrome og Edge-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Tilføjelse af elementer i genvejsmenuen
  2. Integration af omnifeltets søgeord
  3. Håndtering af input fra omnifeltet
  4. Tastaturgenveje med Commands API
← Tilbage til Udvikling af browserudvidelser til Chrome og Edge