Chrome Extensionの作り方講座その6・omniboxを使う

Author:
omnibox

ChromeExtensionの作り方第6回はomniboxを使いましょう。
ふだん検索したりアドレスバーになっているフォームです。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その7・bookmark APIを使う

omniboxの使用は、manifest.jsonにpermissionを追加するのではなく、omniboxというセクションが増えます。
keywordというパラメータに起動キーワードを入れます。

{
  "manifest_version": 2,

  "name": "test",
  "description": "OmniBox",
  "version": "1.0",

    "browser_action": {
        "default_icon": "icon.png"
    },
    "background" : {
        "scripts" : ["background.js"]
    },
    "omnibox" : {
        "keyword" : "test"
    }
}

background.jsにはこんな感じでリスナーを登録させましょう。
dispositionにはタブの情報が入ります。
おそらくcurrentTabという文字列が固定になるかな。

chrome.omnibox.onInputEntered.addListener(function (text, disposition) {
    alert(text.length);
}

さて使い方ですが、検索ボックスにkeywordで設定した文字をうち、tabを押します。
この場合検索ボックスにtestと入れてtabを押すと、omniboxのモードが切り替わります。
後はそこに入れた文章がeventPage内のスクリプトに渡される、という仕組みです。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その7・bookmark APIを使う
developer.chrome.com/extensions

Share on Facebook
Pocket