あなたのエクステンションでChromeのOmniboxでキーワードを登録してください

これを読むことができますmy personal blog
ChromeのAPIを使用すると、拡張モジュールの多くのことができます.そのうちの1つはクロムのアドレスバーにキーワードを登録することですOmnibox , ユーザーがキーワードを使用するときにユーザーの入力を処理する.
このチュートリアルでは、ユーザーの入力を処理するために、ChromeのアドレスバーまたはOmniboxでキーワードを登録する方法を説明します.我々が作成している拡張はキーワードを登録するでしょうcolor , それから、ユーザーがOmniboxでこのキーワードを使うとき、彼らは6文字の16進色を入力することができます.ユーザーがHEXに入ると、拡張子が使用されますCOLOURlovers' API 色に関する情報を取得し、RGBの色に相当するユーザーを与える.
このチュートリアルではV 3の代わりにマニフェストV 2拡張モジュールを作成します.これはan error that occurs with the Omnibox API in manifest V3 この記事を書く時.
この記事の拡張モジュールの完全なコードはthis GitHub repository .

拡張子を作成

まず、拡張モジュールを作成します.まず、拡張モジュールを保持するディレクトリを作成します.次に、ディレクトリ内でmanifest.json 次のコンテンツを使用します.

{
    "name": "hex-to-rgb",
    "description": "Convert Hexadecimal colors to RGB right from Chrome's Omnibox",
    "version": "0.0.1",
    "manifest_version": 2,
    "icons": {
        "16": "images/icon16.png",
        "32": "images/icon32.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    }
}

アイコンのために私はicon そばThalita Torres on Iconscout . ウェブサイトやGithubリポジトリからのいずれかをダウンロードしてくださいし、それらの詳細と同じように配置してくださいmanifest.json .
次はオープンクロームとchrome://extensions . それから、それが有効でないならば、右上から開発者モードを可能にしてください.その後、展開したロードをクリックし、拡張モジュールの作成したディレクトリを選択します.その後の拡張子の一覧で拡張子が表示されます.

omniboxキーワードを登録する

拡張子にキーワードを登録するには、新しいキーを追加する必要がありますomnibox あなたのmanifest.json . 値omnibox がキーを持つオブジェクトkeyword . 拡張モジュールでは、キーワードを使用しますcolor . 以下を加えるmanifest.json :

"omnibox": {
    "keyword": "color"
}

次に、ユーザーがキーワードを入力し、ユーザーの入力を処理するときに聞く背景スクリプトを追加する必要があります.以下を加えるmanifest.json 背景スクリプトを追加するには、次の手順に従います.

"background": {
    "persistent": false,
    "scripts": ["background.js"]
}

空のファイルを作成するbackground.js ディレクトリのルートで.
では、chrome://extensions もう一度、あなたの拡張のためのリフレッシュボタンをクリックしてください.登録された新しい背景ページが表示されます.

我々がちょうど加えたキーワードをテストしましょう.新しいタブを開き、アドレスバー(Omnibox)で入力しますcolor . あなたの提案を参照してくださいする必要がありますhex-to-rgb これは我々が作成した拡張です.

タブを押すと、拡張機能のアイコンがOmniboxの左側に追加されます.これは、現在、拡張が入力されている入力を受け始めるということを意味します.我々はまだリスナーがユーザーの入力を処理するために追加されていないので、何かを入力した場合、現時点では何も起こりません.

デフォルトの提案を追加

OmniBox APIを使用する場合は、ユーザーが入力したものにかかわらず表示される既定の提案を指定できます.これを行うには、メソッドを使用できますchrome.omnibox.setDefaultSuggestion . このメソッドは、あるプロパティを持つオブジェクトを受け入れますdescription .
descriptionプロパティは、XMLスタイルを受け入れます.これは、ユーザーに表示している提案に最小限のスタイリングを適用するためにXMLタグを使用することを意味します.これらのタグは次のとおりです.

<url> : リンク内のテキストを表示します.

<match> : 強調表示の中にテキストを表示します.

<dim> : それは薄暗がりの中にテキストを表示します.

XMLタグをネストすることもできます.たとえば、あなたもURLを強調表示することができます.
私たちのバックグラウンドスクリプトの冒頭では、我々は、ユーザーが結果を得るために入力する必要がある知っているようになるデフォルトの提案を追加します.の先頭に次を追加しますbackground.js :

chrome.omnibox.setDefaultSuggestion({
    description: 'Enter a hex code of 6 characters to convert to RGB (for example, <match>ffffff</match>)'
});

注意してくださいdescription , XMLタグを使いました<match>ffffff</match> . つまり、その提案ffffff が強調表示されます.
テストしましょう.まず、拡張モジュールをchrome://extensions 我々が前にしたように.次に、型color 新しいタブとヒットでTAB . 文字を入力してみてください、あなたは私たちだけで定義された提案を参照してくださいよbackground.js . デフォルトの提案は、少なくとも1文字が入力されるまで表示されません.

ハンドル入力

この節では、ユーザーがキーワード入力後に入力を処理します.そのためにイベントリスナーをイベントに追加しますchrome.omnibox.onInputChanged . リスナーは2つのパラメータを受け取ります.text これはユーザが入力したテキストですsuggest これはユーザがChromeに戻ることを提案するために使用するコールバック関数です.このイベントは、ユーザーが文字を入力するたびにトリガされます.
以下を加えるbackground.js :

chrome.omnibox.onInputChanged.addListener((text, suggest) => {
    //check that the length of the text is 6 characters
    if (text.length !== 6) {
        suggest([]);
        return;
    }

    //TODO send the text to the API
});

我々のリスナーでは、今のところ、我々はちょうどテキストの長さが6でないかどうかチェックしていますsuggest コールバックで空の配列を渡します.
次に、Color恋人APIにリクエストを送り、色の情報を取得します.しかし、その前に、APIのURLをmanifest.json APIへのリクエストが許可されるように.以下を加えるmanifest.json :

"permissions": [
   "http://www.colourlovers.com/*"
 ]

バックグラウンドスクリプトに戻ると、エンドポイントにリクエストを送りますhttp://www.colourlovers.com/api/color/ 使用Fetch API . このエンドポイントは、色をパラメーターとして受け取り、配列を返します.配列は、色が見つからない場合(例えば、無効な色の場合)、または色に関する詳細を持つオブジェクトを保持する配列を空にします.たとえば、URLを開くhttp://www.colourlovers.com/api/color/ffffff?format=json ブラウザで、レスポンスがどのように見えるか確認してください.
リスナー内の背景スクリプトに次のように追加します.

//send text to API
fetch('http://www.colourlovers.com/api/color/' + text + '?format=json')
    .then((response) => response.json())
    .then((data) => {
        if (!data.length) {
            //no color was found
            suggest([]);
        } else {
            //TODO send suggestion when color exists
        }
})

色が見つからなかった場合、空の配列をsuggest コールバック.私たちは、次に色が見つけられた方法と提案が送られなければならないケースを扱う必要があります.
提案オブジェクトには3つのプロパティがあります.

content : ユーザーが提案を示すとき、オムニボックスの中に置かれるテキストを保持します.

deletable : ユーザーが提案の履歴から提案を削除することができます.このプロパティは省略可能です.

description : 我々が使用したdescriptionプロパティに似ていますsetDefaultSuggestion , これは、ユーザーが提案の一覧で表示されるテキストになります.前のセクションで述べたように、XMLタグを使ってスタイルを整えることができます.

色を受信すると、私たちはcontent ユーザーの場合は、RGB値と色のURLの場合は、ユーザーが追加情報を参照してくださいする必要があります.私たちはdescription 色の名前は、16進数コード、およびURLを参照してください.
の代わりに次のコードを追加しますTODO 前のコードブロックで追加しました.

suggest([
    {
        content: `${data[0].rgb.red}, ${data[0].rgb.green}, ${data[0].rgb.blue} url: ${data[0].url}`,
        deletable: true,
        description: `Color name: ${data[0].title}, hex: <match>${data[0].hex}</match>, more information: <url>${data[0].url}</url> `
    }
])

HexをRGBに変換する我々のコードは、されます.繰り返しますが、chrome://extensions , 新しいタブを開きますcolor オムニボックスで、ヒットタブ.次に、16進数の色を入力します.例えば、f5f5f5 . あなたは以下の新しい提案を参照してください.キーボードを上下に矢印を使用して提案を指さしてみてください、そしてあなたはOmniBoxの内容は、我々が設定したテキストに変更されていることがわかりますcontent .

提案選択ハンドル

我々が扱う必要がある最後のイベントは、ユーザーがそれをクリックするか、または入力を押すことによって提案を選択するときです.このイベントはchrome.omnibox.onInputEntered . このイベントへのリスナーは2つのパラメータを受け取りますtext これはオムニボックス内のテキストですOnInputEnteredDisposition , これは、新しいURLがオープンされなければならないことを示しますcurrentTab , newForegroundTab or newBackgroundTab .
我々がすることは、URLからURLを抽出することですtext , もしOnInputEnteredDisposition is currentTab , 現在のタブのURLをURLで置き換えます.また、新しいタブをURLで開きます.
インbackground.js 次を追加します.

chrome.omnibox.onInputEntered.addListener((text, OnInputEnteredDisposition) => {
    const prefixIndex = text.indexOf('url: ');
    if (prefixIndex !== -1) {
        const url = text.substring(prefixIndex + 'url: '.length)
        console.log(url);
        if (OnInputEnteredDisposition === 'currentTab') {
            chrome.tabs.create({url});
        } else {
            chrome.tabs.update({url});
        }
    }
});

前に説明したように、我々はURL からtext 我々が書いた形式に基づきますcontent . それから、私たちはの値に基づいてURLを開きますOnInputEnteredDisposition .
テストしましょう.繰り返しますが、chrome://extensions , 新しいタブを開きますcolor オムニボックスで、ヒットタブ.次に、16進数の色を入力します.例えば、f5f5f5 . をクリックして提案の色、またはそれをポイントし、キーボード上の上下の矢印で表示さをクリックして入力してください.あなたは色についての情報と色の愛好家のページに撮影されます.

結論

ChromeのOmnibox APIを使用すると、あなたのユーザーに簡単に何かを見つけるか、特定のタスクを実行するためにあなたの拡張機能に機能を追加することができます.確認してくださいフルをチェックアウトするAPI reference このAPIで何ができるかについてもっと知ってください.