Chrome Extension開発を勉強してみる (12) - コンテキストメニューでブックマークを高階層で表示する -

2012-07-30T00:00:00+09:00 Chrome Extension JavaScript

単純に右クリックメニューで(ブラウザに保管されている)ブックマークが見れるようにする。で前回に書いたようにメニューをネストしつつ表示出来るようにしてみる

manifest.json

{
  "name": "test",
  "version": "0.1",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["bookmarks", "contextMenus", "tabs"]
}

tabsはブックマークが選択された際に新しいタブを作りつつフォーカスしないでそのブックマークのURLにジャンプ出来るようにするので必要。あとブックマークなデータにアクセスするのでbookmarksも必要。あとは省略

background.js

(function(undefined) {
  "use strict";

 // ルートとなるコンテキストメニューを作っておく

  var id = chrome.contextMenus.create({
    "title": "bookmark"
  });

  // ブックマークのデータ構造を取得する

  chrome.bookmarks.getTree(function(results) {
    results.forEach(function(result) {
      if ("children" in result) {
        result.children.forEach(function(bookmark) {
          registerBookmarkMenu(bookmark, id);
        });
      }
    });
  });

  function registerBookmarkMenu(bookmark, menuId) {
    // ブックマーク項目がディレクトリ(フォルダ)であるかをチェック

    if ("children" in bookmark) {
      // ディレクトリ(フォルダ)はあるけど中身が無いのは無視

      if (bookmark.children.length > 0) {

        // 元のコンテキストメニューIDを親として新しくコンテキストメニューを作る

        var id = chrome.contextMenus.create({
          "title": bookmark.title,
          "parentId": menuId
        });

        // ディレクトリ(フォルダ)内のブックマークを列挙して再度同等の処理を行う

        bookmark.children.forEach(function(subBookmark) {
          registerBookmarkMenu(subBookmark, id);
        });
      }
    } else {
      // ブックマークによってはタイトルが無いのもある(アイコン表示のみ)ので、そういう場合はURLを表示する

      var title = bookmark.title.length > 0 ? bookmark.title : bookmark.url;


      // 元のコンテキストメニューIDを親として新しくコンテキストメニューを作る

      chrome.contextMenus.create({
        "title": title,
        "parentId": menuId,
        "onclick": function(info, tab) {

          // コンテキストメニューからブックマークが選択(クリック)されたら新しいタブでフォーカスせずに開く

          chrome.tabs.create({
            "url": bookmark.url,
            "selected": false
          });
        }
      });
    }
  }
})();

ざっとこんな感じかなと

Android+Bluetoothを使ってPC側からテキストの入力を行う