Integrasi Kata Kunci Omnibox
Integrasikan ekstensi Anda dengan omnibox peramban agar pengguna dapat memicu tindakan atau pencarian langsung dari bilah alamat.
Integrasi Kata Kunci Omnibox adalah pelajaran Browser Extensions Development (Chrome & Edge) gratis di CoddyKit. Ini adalah pelajaran 2 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 is the Omnibox?
The omnibox is the URL bar at the top of your browser. It's not just for typing website addresses; it also handles searches and can be a powerful entry point for browser extensions!
Integrating with the omnibox allows users to quickly interact with your extension directly from the address bar, without needing to click an icon or open a popup.
Power Up Your Address Bar
Why integrate your extension with the omnibox?
- Quick Access: Users can trigger extension actions with just a few keystrokes.
- Custom Searches: Create shortcuts for specific searches within your extension's data.
- Streamlined Workflow: Perform tasks without interrupting their browsing flow.
Setting Your Omnibox Keyword
To enable omnibox integration, you need to declare it in your extension's manifest.json file.
You'll specify a unique keyword. When a user types this keyword into the omnibox, followed by a space, your extension takes over the input.
Manifest Keyword Example
Here's how to declare an omnibox keyword, for example, 'myext':
{ "manifest_version": 3,
"name": "My Omnibox Extension",
"version": "1.0",
"omnibox": {
"keyword": "myext"
},
"background": {
"service_worker": "background.js"
}
}Capturing User Input
Once your keyword is set, your background service worker needs to listen for user input. The main event for this is chrome.omnibox.onInputChanged.
This event fires every time the user types a character after your keyword, allowing you to provide real-time suggestions.
Displaying Live Suggestions
The onInputChanged listener provides a suggest callback function. You use this to send an array of suggestion objects back to the omnibox.
Each suggestion object needs a content (what gets inserted if selected) and a description (what the user sees in the dropdown).
Dynamic Suggestions in Action
This background.js snippet shows how to listen for input and offer basic suggestions. Try typing 'myext hello' in your browser's omnibox after loading this extension.
// 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);
}
);Acting on User Selection
After the user types their input and optionally selects a suggestion, they press Enter. This triggers the chrome.omnibox.onInputEntered event.
This is where your extension performs the final action based on the user's input, like opening a new tab or executing a script.
Executing Actions
Inside onInputEntered, the text parameter contains the final string the user entered or selected.
A common action is to open a new tab with a specific URL using chrome.tabs.create({url: '...' }), or perform a search based on the input.
Full Omnibox Integration
Here's a more complete example combining both input handling and action execution. This example allows users to search Google directly from the omnibox using '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}`});
}
}
);Omnibox Quick Check
You've learned how to integrate your extension with the browser's omnibox. Let's test your knowledge!
Omnibox Power-Up Recap
Great job! You've learned how to integrate your extension with the browser's omnibox.
- We defined a keyword in
manifest.json. - We used
chrome.omnibox.onInputChangedto provide dynamic suggestions as the user types. - We handled the final action using
chrome.omnibox.onInputEntered, for example, opening a new tab.
This powerful feature allows users to interact with your extension quickly and efficiently right from their address bar!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Integrasi Kata Kunci Omnibox” gratis?
Ya — teks lengkap “Integrasi Kata Kunci Omnibox” 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 “Integrasi Kata Kunci Omnibox”?
Integrasikan ekstensi Anda dengan omnibox peramban agar pengguna dapat memicu tindakan atau pencarian langsung dari bilah alamat. 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 2 dari 4.
Berapa lama pelajaran “Integrasi Kata Kunci Omnibox” 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