Menambahkan Item Menu Konteks
Buat item menu konteks khusus yang muncul saat pengguna mengeklik kanan halaman web, gambar, atau tautan, lalu memicu tindakan ekstensi.
Menambahkan Item Menu Konteks adalah pelajaran Browser Extensions Development (Chrome & Edge) gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Browser Extensions Development (Chrome & Edge), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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 inmanifest.json. - Use
chrome.contextMenus.create()in your background script. - Specify
id,title, andcontextsfor 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!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menambahkan Item Menu Konteks” gratis?
Ya — teks lengkap “Menambahkan Item Menu Konteks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Browser Extensions Development (Chrome & Edge), upgrade ke CoddyKit PRO. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menambahkan Item Menu Konteks”?
Buat item menu konteks khusus yang muncul saat pengguna mengeklik kanan halaman web, gambar, atau tautan, lalu memicu tindakan ekstensi. Kamu berlatih Browser Extensions Development (Chrome & Edge) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Browser Extensions Development (Chrome & Edge)?
Tidak diperlukan pengalaman sebelumnya. Browser Extensions Development (Chrome & Edge) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Menambahkan Item Menu Konteks” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Browser Extensions Development (Chrome & Edge) ini?
Ya. Setiap pelajaran Browser Extensions Development (Chrome & Edge) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menambahkan Item Menu Konteks
- Integrasi Kata Kunci Omnibox
- Menanggapi Input Omnibox
- Pintasan Papan Ketik dengan API Commands