Browser Extensions Development (Chrome & Edge) · Lekcja

Dodawanie elementów menu kontekstowego

Twórz niestandardowe elementy menu kontekstowego wyświetlane po kliknięciu prawym przyciskiem myszy na stronach, obrazach lub linkach, uruchamiające działania rozszerzenia.

Dodawanie elementów menu kontekstowego to bezpłatna lekcja Browser Extensions Development (Chrome & Edge) na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Browser Extensions Development (Chrome & Edge), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

What are Context Menus?

Browser extensions can add custom items to the context menu, which appears when you right-click on a web page.

These items let users perform quick actions related to what they clicked on, like saving an image, translating selected text, or triggering a custom search.

Enabling Context Menus

Before your extension can create context menu items, you need to declare the "contextMenus" permission in your manifest.json file.

This permission tells the browser your extension intends to interact with the context menu API.

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

The `chrome.contextMenus` API

The chrome.contextMenus API is how your background service worker interacts with context menus.

It provides methods to manage menu items:

create(): To add a new menu item.
update(): To change an existing item's properties.
remove(): To delete a specific item.
removeAll(): To clear all items added by your extension.

Creating Your First Item

To create a context menu item, use chrome.contextMenus.create(). You must provide a unique id and a title.

This example adds a simple item named "My First Item" to the general page context menu.

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

Item Properties: ID & Title

Each context menu item needs a unique id. This ID helps you identify which item was clicked later.

The title is the text displayed in the menu. The contexts array specifies where the item should appear.

id: A unique string identifier.
title: The user-visible text for the menu item.
contexts: An array of strings defining where the item shows up.

Responding to Clicks

After creating an item, you'll want to run code when a user clicks it. Use chrome.contextMenus.onClicked.addListener() to listen for these clicks.

The listener receives an info object with details about the click, including the menuItemId, which helps you identify which item was activated.

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

Context Types for Specific Elements

The contexts property is powerful! It allows you to control exactly where your menu item appears.

Common context types include:

"page": Right-click on any part of the page.
"selection": Right-click on selected text.
"link": Right-click on a hyperlink.
"image": Right-click on an image.
"video", "audio": For media elements.

Example: Search Selected Text

Let's create an item that appears only when text is selected. When clicked, it will open a new tab to search that text on Google.

Notice the selectionText property in the info object when using the "selection" context.

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

Updating and Removing Items

You can dynamically change or remove context menu items after they've been created. This is useful for adapting to user preferences or page content.

chrome.contextMenus.update(id, properties): Changes properties like title or contexts.
chrome.contextMenus.remove(id): Deletes a specific item.
chrome.contextMenus.removeAll(): Deletes all items added by your extension.

Context Menu Challenge

Consider the following manifest.json and background script for an extension.

Which statements about the context menu items created are true?

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

Recap: Context Menus

You've learned how to add custom context menu items to your browser extension!

Declare "contextMenus" permission in manifest.json.
Use chrome.contextMenus.create() in your background script.
Specify id, title, and contexts for each item.
Listen for clicks using chrome.contextMenus.onClicked.addListener().
Contexts like "page", "selection", "link" allow precise targeting.

These skills enable you to add powerful, context-aware actions to your extension. Next, we'll explore integrating with the Omnibox!

Często zadawane pytania

Czy lekcja „Dodawanie elementów menu kontekstowego” jest bezpłatna?

Tak — pełny tekst „Dodawanie elementów menu kontekstowego” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Browser Extensions Development (Chrome & Edge), przejdź na CoddyKit PRO. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.

Co nauczysz się w „Dodawanie elementów menu kontekstowego”?

Twórz niestandardowe elementy menu kontekstowego wyświetlane po kliknięciu prawym przyciskiem myszy na stronach, obrazach lub linkach, uruchamiające działania rozszerzenia. Ćwiczysz Browser Extensions Development (Chrome & Edge) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Browser Extensions Development (Chrome & Edge)?

Nie wymagamy żadnego doświadczenia. Browser Extensions Development (Chrome & Edge) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Dodawanie elementów menu kontekstowego”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Browser Extensions Development (Chrome & Edge)?

Tak. Każda lekcja Browser Extensions Development (Chrome & Edge) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Browser Extensions Development (Chrome & Edge)