続・先取り! Google Chrome Extensions

第5回 Chrome ExtensionのAPI#2

この記事を読むのに必要な時間:およそ 5 分

こんにちは,Google Chrome ExtensionsのAPI Expertになりました太田です。今回は,これまで使用していないAPIを中心に使った新しいExtensionを作成してみます。

が,その前に大きなニュースとして,Extensionsが有効になったbeta版とExtensionsギャラリーが公開されました。Macのbeta版も公開されましたが,こちらは拡張を使うことはできませんのでご注意ください。

Extensionsを作られた方はDeveloper DashboardからExtensionを登録できます。登録時の注意などはブログにまとめていますので,そちらをご参照いただければと思います。また,beta版のリリースに合わせて,Google Chrome拡張について日本語での情報交換ができるGoogle準公式コミュニティのChromium-Extensions-Japanもスタートしました。

さて,beta版で使用可能なAPIのなかで,このシリーズで取り上げていないのは(NPAPIを除いて)⁠Override Pagesと,Bookmarks APIの2つです。

Override PagesとNew Tabページ

まずNew Tabページとは,Chromeで新規タブを開いた際にデフォルトで表示されるページです。このページにはよく閲覧しているページや最近閉じたタブなどが表示されます。New TabページはExtensionで直接カスタマイズすることはできませんが,Override Pagesでまるごと別のページに差し替えることができます。

早速,New TabページをBlank Pageにするサンプルを見てみます。

Override Pagesのmanifest.json

{
  "name": "Blank new tab page",
  "version": "0.1",
  "chrome_url_overrides": {
    "newtab": "blank.html"
  }
}

2009年12月時点で,chrome_url_overridesのプロパティはnewtabのみです。このnewtabにはNew Tabページを置き換えるHTMLファイルを指定します。

ちなみに,blank.htmlのソースは下記の通りごくシンプルです。新規タブを開くのがより軽くなるので,これはこれで有力な選択肢と言えます。

blank.htmlのソース

<html>
 <head>
  <title>Blank New Tab</title>
  <style>
  div {2009/12/09 3:04
    color: #cccccc;
    vertical-align: 50%;
    text-align: center;
    font-family: sans-serif;
    font-size: 300%;
  }
  </style>
 </head>
 <body>
  <div style="height:40%"></div>
  <div>Blank New Tab&trade;</div>
 </body>
</html>

上書きしたページはExtensionsのページとして扱われますので,permissionsの設定次第でTabs APIやクロスオリジン通信などができますし,localStorageで設定を保存することも可能です。ただし,元々のNew Tabページで使われている情報(よくアクセスしているページとそのサムネイル,テーマの背景など)にアクセスすることはできません。これに関してドキュメントには4つの注意書きがあります。

速く,小さく作る
New Tabページは頻繁に使用するので,パフォーマンスが重要です。同期的にネットワーク通信やデータベースへの接続などをすることは避けましょう。
タイトルを設定する
タイトルを設定ないとURLがタブに表示されてしまいます。<title>New Tab</title> のようにしましょう
キーボードのフォーカスがあることに依存させない
新しいタブを開いたときは常にOmnibox(アドレスバー)にフォーカスします。
デフォルトのNew Tabページを再現しようとしない
デフォルトのNew Tabページとよく似たページを作るために必要なAPI(よく見るページ,最近閉じたページ,チップス,テーマの背景画像)(今のところ)存在しません。今のところは,デフォルトのページとはまったく違ったページにしたほうがよいでしょう。

Bookmarks API

続いて,Bookmarks APIを解説します。まず,Bookmarks APIを使用するにはmanifest.jsonでpermissionsを記述する必要があります。

manifest.jsonでpermissionsにbookmarksを指定

{
  "permissions": [
    "bookmarks"
  ],
}

さて,Bookmarks APIでできることは大きく分けて3つあります。1つはBookmarkTreeNodeと呼ばれるブックマークのデータを収めたオブジェクトの操作(取得・追加・削除など)⁠2つ目はBookmarkの検索(やはり取得するのはBookmarkTreeNode)⁠3つ目はBookmarksの操作を監視してのイベント処理,以上のAPIが用意されています。

まず,BookmarkTreeNodeについて解説します。ブックマークに関するデータはフォルダ情報もブックマーク情報もこのBookmarkTreeNodeで表現されます。idとtitleは共通で必ず持っており,フォルダ情報の場合はchildrenというプロパティに配列形式でさらなるBookmarkTreeNodeを,ブックマーク情報の場合はURLを持っているのが大きな特徴です。詳細はBookmarkTreeNodeのドキュメントでご確認ください。

このBookmarkTreeNodeでフォルダもブックマークも表現するという点が少々わかりにくいかと思います。次に例として全ブックマークを走査するコードを挙げてみます。

全ブックマークを走査するサンプルコード

chrome.bookmarks.getTree(function(roots){
  var bookmarks = [];
  roots.forEach(parser);
  function parser(node){
    if (node.children) {
      node.children.forEach(parser);
    } else if(node.url) {
      bookmarks.push(tree);
    }
  }
  console.log(bookmarks);
});

chrome.bookmarks.getTreeはブックマークのルートノード(の配列)を返します。そのルートノードを起点として,nodeがchildrenプロパティを持てばそれはフォルダであると判断できるので,そのchildrenをさらにパースし,一方でurlを持つのであればそれがブックマークなので,配列に詰めています。なお,ユーザーによってはブックマークの数が数万件にもなっている可能性があるので,安易に上記のようなコードを使うべきではない点に注意してください。

このように,ブックマークのデータは1つのツリー構造になっています。このツリーに対して,chrome.bookmarks.createで新しいbookmark nodeを追加したり,chrome.bookmarks.moveやchrome.bookmarks.updateでブックマーク情報を更新したりできます。

ブックマークの検索

chrome.bookmarks.search("テスト", function(results) {
    console.log(results);
});

名前の通り,chrome.bookmarks.searchはブックマークを検索します。対象はブックマークのみ(フォルダは非対象)で,第一引数に文字列で検索条件を渡し,第二引数に渡す関数でその結果を受け取ります。日本語は問題なく使用でき,スペースで区切れば複数条件で絞り込むこともできます。ただし,対象をURLにするかタイトルにするかや,特定フォルダ以下から検索するなど細かい条件は今のところできません。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

コメントの記入