Pembangunan Sambungan Pelayar (Chrome & Edge) · Pelajaran

Menambah Item Menu Konteks

Cipta item menu konteks tersuai yang muncul apabila pengguna mengklik kanan halaman web, imej atau pautan, lalu mencetuskan tindakan sambungan.

Pelajaran 1 daripada 411 langkah

Menambah Item Menu Konteks ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Apakah Menu Konteks?

Sambungan pelayar boleh menambahkan item tersuai pada menu konteks, yang muncul apabila anda mengklik kanan pada halaman web.

Item ini membolehkan pengguna melakukan tindakan pantas yang berkaitan dengan perkara yang diklik, seperti menyimpan imej, menterjemah teks yang dipilih atau mencetuskan carian tersuai.

Mendayakan Menu Konteks

Sebelum sambungan anda boleh mencipta item menu konteks, anda perlu mengisytiharkan kebenaran "contextMenus" dalam fail manifest.json anda.

Kebenaran ini memberitahu pelayar bahawa sambungan anda ingin berinteraksi dengan API menu konteks.

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

API `chrome.contextMenus`

API chrome.contextMenus ialah cara pekerja perkhidmatan latar belakang anda berinteraksi dengan menu konteks.

API ini menyediakan kaedah untuk mengurus item menu:

create(): Untuk menambah item menu baharu.
update(): Untuk menukar sifat item sedia ada.
remove(): Untuk memadam item tertentu.
removeAll(): Untuk mengosongkan semua item yang ditambahkan oleh sambungan anda.

Mencipta Item Pertama Anda

Untuk mencipta item menu konteks, gunakan chrome.contextMenus.create(). Anda mesti menyediakan id dan title yang unik.

Contoh ini menambahkan item ringkas bernama "My First Item" pada menu konteks umum halaman.

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

Sifat Item: ID & Tajuk

Setiap item menu konteks memerlukan id yang unik. ID ini membantu anda mengenal pasti item yang diklik kemudian.

title ialah teks yang dipaparkan dalam menu. Tatasusunan contexts menentukan tempat item itu patut muncul.

id: Pengecam rentetan yang unik.
title: Teks item menu yang boleh dilihat oleh pengguna.
contexts: Tatasusunan rentetan yang menentukan tempat item itu dipaparkan.

Memberi Respons kepada Klik

Selepas mencipta item, anda mungkin mahu menjalankan kod apabila pengguna mengkliknya. Gunakan chrome.contextMenus.onClicked.addListener() untuk mendengar klik ini.

Pendengar menerima objek info yang mengandungi butiran tentang klik tersebut, termasuk menuItemId, yang membantu anda mengenal pasti item yang diaktifkan.

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

Jenis Konteks untuk Elemen Tertentu

Sifat contexts sangat berkuasa! Sifat ini membolehkan anda mengawal dengan tepat lokasi item menu anda dipaparkan.

Jenis konteks yang biasa termasuk:

"page": Klik kanan pada mana-mana bahagian halaman.
"selection": Klik kanan pada teks yang dipilih.
"link": Klik kanan pada hiperpautan.
"image": Klik kanan pada imej.
"video", "audio": Untuk elemen media.

Contoh: Mencari Teks yang Dipilih

Mari kita cipta item yang hanya dipaparkan apabila teks dipilih. Apabila diklik, item ini akan membuka tab baharu untuk mencari teks tersebut di Google.

Perhatikan sifat selectionText dalam objek info apabila menggunakan konteks "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 });
  }
});

Mengemas Kini dan Mengalih Keluar Item

Anda boleh menukar atau mengalih keluar item menu konteks secara dinamik selepas item tersebut dicipta. Ini berguna untuk menyesuaikannya dengan keutamaan pengguna atau kandungan halaman.

chrome.contextMenus.update(id, properties): Menukar sifat seperti tajuk atau konteks.
chrome.contextMenus.remove(id): Memadam item tertentu.
chrome.contextMenus.removeAll(): Memadam semua item yang ditambahkan oleh sambungan anda.

Cabaran Menu Konteks

Perhatikan manifest.json dan skrip latar belakang berikut untuk sebuah sambungan.

Pernyataan manakah tentang item menu konteks yang dicipta adalah benar?

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

Jawab dalam pelajaran interaktif

Ulang Kaji: Menu Konteks

Anda telah belajar cara menambahkan item menu konteks tersuai pada sambungan penyemak imbas anda!

Isytiharkan keizinan "contextMenus" dalam manifest.json.
Gunakan chrome.contextMenus.create() dalam skrip latar belakang anda.
Tentukan id, title dan contexts untuk setiap item.
Dengar klik menggunakan chrome.contextMenus.onClicked.addListener().
Konteks seperti "page", "selection" dan "link" membolehkan sasaran yang tepat.

Kemahiran ini membolehkan anda menambahkan tindakan berkuasa yang peka konteks pada sambungan anda. Seterusnya, kita akan meneroka penyepaduan dengan Omnibox!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menambah Item Menu Konteks” percuma?

Ya — teks penuh “Menambah Item Menu Konteks” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Sambungan Pelayar (Chrome & Edge), tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menambah Item Menu Konteks”?

Cipta item menu konteks tersuai yang muncul apabila pengguna mengklik kanan halaman web, imej atau pautan, lalu mencetuskan tindakan sambungan. Anda berlatih Pembangunan Sambungan Pelayar (Chrome & Edge) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Sambungan Pelayar (Chrome & Edge)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Menambah Item Menu Konteks” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) ini?

Ya. Setiap pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Menambah Item Menu Konteks
Integrasi Kata Kunci Omnibox
Memberi Respons kepada Input Omnibox
Pintasan Papan Kekunci dengan API Commands

← Kembali ke Pembangunan Sambungan Pelayar (Chrome & Edge)