【GoogleChrome】新しいタブにブックマーク一覧を表示する拡張機能を作った(ブックマーク取得、アコーディオン表示)

#概要
新しいタブにブックマーク一覧を表示する拡張機能を作りました。

#コード
githubにコードを上げています。
https://github.com/mkt120/newTabExtention/tree/main/BookmarkListNewTab

##GoogleChromeからブックマークを取得

GoogleChromeのDeveloperサイトを参考に実装。
chrome.bookmarks:getTree

1.Manifest.jsonにpermissionを追加

Manifest.json

{
  "name": "NewtabSample",
  "version": "1.0",
  "manifest_version": 2,
  "description": "拡張機能です",
  "permissions": [
    "bookmarks" // bookmarksを追加
  ],
  "chrome_url_overrides" : {
    "newtab": "newtab.html"
  }
}

2.javascriptでGoogleChromeから取得する処理を追加

bookmarks.getTreeのコールバックとしてbookmarkツリーが返されるので、
あとはそれを使ってよしなにすればOK

newtab.js

// お気に入りのツリーを全て取得
chrome.bookmarks.getTree(function(bookmark) {

  // [その他のブックマーク]フォルダを取得する
  var root = bookmark[0]['children'];

  // [その他のブックマーク]フォルダのブックマークをbodyに追加する
  root = document.getElementById("bookmark");
  
  // 取得したツリーのrootが空っぽなので、そのchildrenを渡す
  bookmark = bookmark[0]['children'];

  for (var i in bookmark) {
    if (bookmark[i]['children'] != null && bookmark[i]['children'].length > 0) {
      // 取得したブックマークをよしなにする
    }
  }
});

##取得したブックマークを一覧表示

Bookmarkツリーを取得したら、アコーディオン形式(開閉式)で表示するようにしたかったので、
タイトル部分にクリックリスナー付けたり、子要素をインデント表示させたりで表示調整。
→レイアウトについてはCSSで調整すればラクチン。

newtab.js

  for (var i in bookmark) {
    if (bookmark[i]['children'] != null && bookmark[i]['children'].length > 0) {
      var parents = createBookmarks(document, bookmark[i]); // Bookmarkツリーからリスト表示するコンテンツを生成
      root.appendChild(parents);
    }
  }

下記のメソッドで、ブックマーク一覧を作る処理を行う。
上記for文の中で書くと階層深くて読みずらくなるから、なるべくメソッドで小分けに。

newtab.js

// ブックマークツリーを作る
function createBookmarks(document, bookmarkTreeNode) {
  var parent = document.createElement("div");

  // まずはタイトル領域を生成
  var parentDiv = createTitleView(document, bookmarkTreeNode['title'], 'false');
  parentDiv.setAttribute("name", bookmarkTreeNode['title']);
  parentDiv.setAttribute("class", CLASS_BOOKMARK_TITLE_VIEW);

  parent.appendChild(parentDiv);

  // 子View要素の親
  var childViews = document.createElement("div");
  childViews.setAttribute("class", CLASS_BOOKMARK_CHLID_VIEWS);

  // 子Bookmarkを作る
  var children = bookmarkTreeNode['children'];
  for (var i in children) {
    var child;
    if (children[i]['children'] != null && children[i]['children'].length > 0) {
      child = createBookmarks(document, children[i]); // 子Bookmark内のフォルダ
    } else {
      child = createChild(document, children[i]);
    }
    childViews.appendChild(child);
  }
  // 作った一覧を親に追加
  parent.appendChild(childViews);

  // 全部できたら、タイトル領域にクリックリスナーをセット
  parentDiv.addEventListener("click", function(){
    // 表示・非表示の切り替え
    if (childViews.style.display != "none") {
      childViews.style.display = "none";
    } else {
      childViews.style.display = "";
    }
  });
  return parent;
}

追記(2018/03/25)

コードだけ書いてもピンとこなかったので、
今更ながらどんな具合に見えるのかキャプチャを貼り付けることにしました。

#最後に
Android Javaしか書けない私なので、HTMLとかCSSとかJavascriptの勉強も兼ねてですが、
将来的にはiGoogleの機能を独自実装できるようになることを目指しています。

第2弾を投稿しました。