概要
これは初心者のブラウザ拡張機能 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を主に使うと想定されます。