Integrasi Kata Kunci Omnibox
Sepadukan sambungan anda dengan omnibox pelayar, supaya pengguna boleh mencetuskan tindakan atau carian terus dari bar alamat.
Integrasi Kata Kunci Omnibox ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 2 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 Omnibox?
omnibox ialah bar URL di bahagian atas penyemak imbas anda. Ia bukan hanya untuk menaip alamat laman web; omnibox juga mengendalikan carian dan boleh menjadi titik masuk yang berkuasa untuk sambungan penyemak imbas!
Penyepaduan dengan omnibox membolehkan pengguna berinteraksi dengan pantas dengan sambungan anda terus dari bar alamat, tanpa perlu mengklik ikon atau membuka tetingkap timbul.
Perkasakan Bar Alamat Anda
Mengapakah anda perlu menyepadukan sambungan dengan omnibox?
- Akses Pantas: Pengguna boleh mencetuskan tindakan sambungan dengan hanya beberapa ketukan kekunci.
- Carian Tersuai: Cipta pintasan untuk carian tertentu dalam data sambungan anda.
- Aliran Kerja Lancar: Laksanakan tugas tanpa mengganggu aktiviti penyemakan imbas mereka.
Menetapkan Kata Kunci Omnibox
Untuk mendayakan penyepaduan omnibox, anda perlu mengisytiharkannya dalam fail manifest.json sambungan anda.
Anda perlu menentukan kata kunci yang unik. Apabila pengguna menaip kata kunci ini ke dalam omnibox, diikuti dengan ruang, sambungan anda akan mengambil alih input tersebut.
Contoh Kata Kunci Manifes
Begini cara mengisytiharkan kata kunci omnibox, contohnya 'myext':
{ "manifest_version": 3,
"name": "My Omnibox Extension",
"version": "1.0",
"omnibox": {
"keyword": "myext"
},
"background": {
"service_worker": "background.js"
}
}Menangkap Input Pengguna
Setelah kata kunci ditetapkan, pekerja perkhidmatan latar belakang anda perlu mendengar input pengguna. Peristiwa utama untuk tujuan ini ialah chrome.omnibox.onInputChanged.
Peristiwa ini dicetuskan setiap kali pengguna menaip aksara selepas kata kunci anda, lalu membolehkan anda menyediakan cadangan masa nyata.
Memaparkan Cadangan Langsung
Pendengar onInputChanged menyediakan fungsi panggil balik suggest. Anda menggunakannya untuk menghantar tatasusunan objek cadangan kembali kepada omnibox.
Setiap objek cadangan memerlukan content (teks yang disisipkan jika dipilih) dan description (teks yang dilihat pengguna dalam senarai juntai bawah).
Cadangan Dinamik dalam Tindakan
Cebisan background.js ini menunjukkan cara mendengar input dan menawarkan cadangan asas. Cuba taip 'myext hello' dalam omnibox penyemak imbas anda selepas memuatkan sambungan ini.
// background.js
chrome.omnibox.onInputChanged.addListener(
function(text, suggest) {
let suggestions = [];
if (text.startsWith("hello")) {
suggestions.push({content: "hello world", description: "Says Hello World"});
suggestions.push({content: "hello there", description: "Greets you"});
} else {
suggestions.push({content: "type 'hello'", description: "Try typing 'hello'"});
}
suggest(suggestions);
}
);Bertindak Berdasarkan Pilihan Pengguna
Selepas pengguna menaip input mereka dan, jika mahu, memilih cadangan, mereka menekan Enter. Tindakan ini mencetuskan peristiwa chrome.omnibox.onInputEntered.
Di sinilah sambungan anda melaksanakan tindakan akhir berdasarkan input pengguna, seperti membuka tab baharu atau melaksanakan skrip.
Melaksanakan Tindakan
Di dalam onInputEntered, parameter text mengandungi rentetan akhir yang dimasukkan atau dipilih oleh pengguna.
Tindakan yang biasa dilakukan ialah membuka tab baharu dengan URL tertentu menggunakan chrome.tabs.create({url: '...' }), atau melakukan carian berdasarkan input.
Penyepaduan Omnibox Lengkap
Berikut ialah contoh yang lebih lengkap, yang menggabungkan pengendalian input dan pelaksanaan tindakan. Contoh ini membolehkan pengguna mencari di Google terus dari omnibox menggunakan 'myext go [query]'.
// background.js
chrome.omnibox.onInputChanged.addListener(
function(text, suggest) {
let suggestions = [];
if (text.startsWith("go ")) {
const query = text.substring(3);
suggestions.push({
content: `https://www.google.com/search?q=${query}`,
description: `Search Google for "${query}"`
});
} else {
suggestions.push({
content: "go [search_term]",
description: "Type 'go' to search Google"
});
}
suggest(suggestions);
}
);
chrome.omnibox.onInputEntered.addListener(
function(text, disposition) {
if (text.startsWith("http://") || text.startsWith("https://")) {
chrome.tabs.create({url: text});
} else if (text.startsWith("go ")) {
const query = text.substring(3);
chrome.tabs.create({url: `https://www.google.com/search?q=${query}`});
} else {
console.log("Omnibox entered:", text);
chrome.tabs.create({url: `https://www.google.com/search?q=${text}`});
}
}
);Semakan Pantas Omnibox
Anda telah belajar cara menyepadukan sambungan anda dengan omnibox penyemak imbas. Mari uji pengetahuan anda!
Ulang Kaji: Perkasakan Omnibox
Syabas! Anda telah belajar cara menyepadukan sambungan anda dengan omnibox penyemak imbas.
- Kami mentakrifkan kata kunci dalam
manifest.json. - Kami menggunakan
chrome.omnibox.onInputChangeduntuk menyediakan cadangan dinamik semasa pengguna menaip. - Kami mengendalikan tindakan akhir menggunakan
chrome.omnibox.onInputEntered, contohnya membuka tab baharu.
Ciri berkuasa ini membolehkan pengguna berinteraksi dengan pantas dan cekap dengan sambungan anda terus dari bar alamat mereka!
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
Soalan Lazim
Adakah pelajaran “Integrasi Kata Kunci Omnibox” percuma?
Ya — teks penuh “Integrasi Kata Kunci Omnibox” 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 “Integrasi Kata Kunci Omnibox”?
Sepadukan sambungan anda dengan omnibox pelayar, supaya pengguna boleh mencetuskan tindakan atau carian terus dari bar alamat. 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 2 daripada 4.
Berapa lamakah pelajaran “Integrasi Kata Kunci Omnibox” 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