Browser Extensions Development (Chrome & Edge) · 课时

添加上下文菜单项

创建自定义上下文菜单项，使其在用户右键点击网页、图像或链接时显示，并触发扩展操作

添加上下文菜单项 是 CoddyKit 上的免费 Browser Extensions Development (Chrome & Edge) 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 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!

常见问题解答

「添加上下文菜单项」课时是免费的吗？

是的 — 「添加上下文菜单项」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Browser Extensions Development (Chrome & Edge) 课程的其余内容，请升级到 CoddyKit PRO。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。

「添加上下文菜单项」这节课中我会学到什么？

创建自定义上下文菜单项，使其在用户右键点击网页、图像或链接时显示，并触发扩展操作你通过在浏览器中直接运行的动手代码来练习 Browser Extensions Development (Chrome & Edge)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Browser Extensions Development (Chrome & Edge) 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Browser Extensions Development (Chrome & Edge) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「添加上下文菜单项」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Browser Extensions Development (Chrome & Edge) 课中编写并运行代码吗？

能。每节 Browser Extensions Development (Chrome & Edge) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Browser Extensions Development (Chrome & Edge)