การผสานรวมคำสำคัญกับ 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.

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.

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.

Here's how to declare an omnibox keyword, for example, 'myext':

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.

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).

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.

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.

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.

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]'.

You've learned how to integrate your extension with the browser's omnibox. Let's test your knowledge!

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.onInputChanged to 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!