概要

これは初心者のブラウザ拡張機能 Advent Calendar 2024の22日目の記事です。

検索バーで使えるomniboxを実装します。

omniboxとは

検索バーで文字列を入力してスペースを押したときに表示されるドロップダウンリストのことです。

操作イメージ

ここでは文字列inを入力するとomniboxが出てきて、hugahugaを選択すると通知が飛ぶようにします。
※とりあえず動かすためのサンプルです

具体的なソースコード

inを入力するとomniboxを作り出して、選択すると通知されるようにします。

manifest.json

{
    "browser_specific_settings": {
        "gecko": {
          "id": "the-town-sample-omnibox@example.com"
        }
    },
    "manifest_version": 3,
    "name": "init-extention",
    "version": "0.1",
  
    "omnibox": { "keyword" : "in" },
    "description": "omniboxサンプル",
  
    "icons": {
      "48": "icons/icon-48.png"
    },

    "background": {
        "scripts": ["background.js"]
      },
  
      "permissions": [
        "notifications"
      ]
}

"omnibox": { "keyword" : "in" }でキーワードを指定します。

background.js

browser.omnibox.setDefaultSuggestion({
    description: "これはテストです"
});


function onChanged(input) {
    const result = [];
    result.push({
        "content": input + "hogehoge",
        "description": "hugahuga"
    })
    return result
}


function onEntered() {
    browser.notifications.create({
        type: "basic",
        iconUrl: browser.runtime.getURL("icons/icon-48.png"),
        title: "Enter",
        message: "選択しました",
    });
}


browser.omnibox.onInputChanged.addListener((input, suggest) => {
    suggest(onChanged(input));
});


browser.omnibox.onInputEntered.addListener(onEntered);

イベントは入力時に反応するbrowser.omnibox.onInputChangedと選択時に反応するbrowser.omnibox.onInputEnteredを主に使うと想定されます。

参考

omnibox

firefox-code-search