Browser Extensions Development (Chrome & Edge) · Урок

Добавление пунктов контекстного меню

«Добавление пунктов контекстного меню» — бесплатный урок Browser Extensions Development (Chrome & Edge) на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Browser Extensions Development (Chrome & Edge), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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!

Часто задаваемые вопросы

Урок «Добавление пунктов контекстного меню» бесплатный?

Да — полный текст урока «Добавление пунктов контекстного меню» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Browser Extensions Development (Chrome & Edge), подпишись на CoddyKit PRO. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.

Чему я научусь в уроке «Добавление пунктов контекстного меню»?

Создавайте пользовательские пункты контекстного меню, появляющиеся при щелчке правой кнопкой мыши по веб-страницам, изображениям или ссылкам и запускающие действия расширения. Ты практикуешь Browser Extensions Development (Chrome & Edge) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Browser Extensions Development (Chrome & Edge)?

Предыдущий опыт не требуется. Browser Extensions Development (Chrome & Edge) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Добавление пунктов контекстного меню»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Browser Extensions Development (Chrome & Edge)?

Да. Каждый урок Browser Extensions Development (Chrome & Edge) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Browser Extensions Development (Chrome & Edge)