Browser Extensions Development (Chrome & Edge) · レッスン

Omniboxキーワードの統合

拡張機能をブラウザーのOmniboxに統合し、ユーザーがアドレスバーから直接アクションや検索を実行できるようにします。

「Omniboxキーワードの統合」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはBrowser Extensions Development (Chrome & Edge)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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

よくある質問

「Omniboxキーワードの統合」レッスンは無料ですか？

はい。「Omniboxキーワードの統合」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

「Omniboxキーワードの統合」で何を学びますか？

拡張機能をブラウザーのOmniboxに統合し、ユーザーがアドレスバーから直接アクションや検索を実行できるようにします。ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Browser Extensions Development (Chrome & Edge)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのBrowser Extensions Development (Chrome & Edge)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Omniboxキーワードの統合」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このBrowser Extensions Development (Chrome & Edge)レッスンでコードを書いて実行できますか？

はい。すべてのBrowser Extensions Development (Chrome & Edge)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Browser Extensions Development (Chrome & Edge)に戻る