Chrome 拡張機能の［chrome.omnibox］を利用する方法

Google Chromeの拡張機能の［chrome.omnibox］を利用してアドレスバーに独自の検索候補を表示する手順について備忘録的に投稿しておきます。

Omnibox

Chrome ブラウザーのURLを入力する場所（部分）はOmniboxと呼ばれていて、URLの他に検索キーワードを入力する場所としても利用可能です。

Chrome機能拡張の［chrome.omnibox］を利用すると、こんな感じでURLやキーワードを入力する場所に独自の候補（下画像の［オムニボックス］部分）を追加して入力されたテキストを処理する機能が追加可能です。

検索キーワードを処理

実際に、Chromeブラウザーのアドレスバーに入力したテキストを処理する拡張機能を装していきます。

具体的には次の手順で行います。

1. 必要なファイルとフォルダーを作成しておきます。（拡張子が無いのはフォルダー）

[Omnibox]
|-[icons]
| |  |-[icon-16.png]
|-[manifest.json]
|-[background.js]

［icons］フォルダー内の画像とサイズは適当でも大丈夫ですが、アドレスバーに表示される際に、グレースケールの16ピクセルの縮小されてしまいます。

2.［manifest.json］を編集して次のコードを追加します。

{
  "name": "オムニボックス",
  "manifest_version": 3,
  "version": "0.1",
  "icons": {
    "16": "icons/icon-16.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "omnibox": {
    "keyword": "mb"
  }
}

［omnibox｜keyword］が必須で、アドレスバーに指定したワードを入力した際に拡張機能が動作する仕組みになっています。

3. 実際に動作するスクリプトを［background.js］を編集して次のコードを追加します。

'use strict';
{
  chrome.omnibox.onInputEntered.addListener((text) => {
    const newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
    chrome.tabs.create({ url: newURL });
  });
}

入力されたテキストを別タブで検索します。

4.［拡張機能］画面に［Omnibox］フォルダーをドラッグしてインストールします。