uoz　作業日記

様々な作業の記録を共有するブログです。

2012-02-01 とりえあず　ブックマークを登録日時順にリストにするchrome拡張機能をつくろう　[chrome拡張機能]

chrome extension

 登録日時とタグ？かなんかで2次元的にプロットしてくれるブックマークシステム(整理するのに便利)
 
これは、おれがブックマークが増えすぎて整理の方法に困ってると言ったら
田村が整理するのではなく古いのを消すサジェストをしてくれる機能はどうかといったのを聞いて
更に思いついたもの
 
ブックマークのタイムラインみたいなもので、
さらにその時自分が関心を持っていたことも把握できるような感じのもの
 
なんかWillcaとかいって一般意志2.0の実装をやってるみたいだが、
ブックマークもつぶやきみたいに使えるよね
少なくともソーシャルブックマークは公開されてるわけだし使っていいはずだ
 
ブックマークサービスとかwebブラウザのブックマークにAPIってあるんだろうか
というかブックマークした日時って登録されてるんだろうか
 
 
 
-----------------------------------------------------------------

・よく使ってるchromeのブックマーク関連のAPIを調べてみる

 
Chrome Extensions API リファレンス
 
 
とりあえずチュートリアルを進めてみる
 
chromeのエクステンションはwebページでできているようだ。
本体はmanifest.jsonというjsonファイル。へー
 
しかし、もしかしてchromeのブックマークには登録日時とか更新日時の情報が無いのでは
 
上記ページは古くて、オーバーライドではnew tabしか書き換えられないとのことだが、
公式
Google Chrome Extensions 
 
によるとブックマークページも書き換えられるらしい
いいぞ
 
 
BookmarkTreeNodeオブジェクト
が
dateAdded
というプロパティを持ってる
これで作成日時が分かる

dateGroupModified 
で更新日時も分かるぞ

じゃあchrome拡張機能を作ることにする

-----------------------------------------------------------------

・練習でブックマークを登録日時か更新日時で並び替えるアプリを作る

 
とりあえず、全ブックマークをただリストアップするアプリ
manifest.json
 
{
  "name": "My First Extension",
  "version": "1.0",
  "description": "This extension show bookmarks sorted by update or create time",
  "icons": { "48": "48icon.png",
          "128": "128icon.png" },
  "browser_action": {
       "default_title": "Sort bookmarks by time",
    "default_icon": "19icon.png",
    "popup": "popup.html"
  },
  "permissions": [
    "bookmarks"
  ]
}
 
popup.html
 
<style>
div.bookmark{
     display:block;
}
</style>

<script>
//再帰的にノードを確かめて、フォルダじゃなかったら
function checkNode(treeNode){
     if(treeNode.url){ //このノードがフォルダじゃなかったら
          //alert("ok!");//debug
          var bookmarkElement = document.createElement("div");
          bookmarkElement.class = "bookmark";
          var added = new Date();
          added.setTime(treeNode.dateAdded);
          bookmarkElement.innerHTML = treeNode.title + " added:" + added;
          if(treeNode.dateGroupModified){ //更新日時があったら
               var updated = new Date();
               updated.setTime(treeNode.dateGroupModified);
               bookmarkElement.innerHTML += " updated:" + updated;
          }
          document.body.appendChild(bookmarkElement);
     }
     if(treeNode.children){ //ノードに子どもがあれば再帰的に適用
          treeNode.children.forEach(checkNode);
     }
}
               
chrome.bookmarks.getTree(function (wholeTree){
     wholeTree.forEach(checkNode);
});

</script>
 
日時順になるように
popup.html
を書き換え
 
疲れたのでまた明日
 
やること
ブックマーク最大IDを取得(この際、ブックマーク数が1000以上だと処理を止めるようにする)
ブックマーク全体を登録日時でクイックソート
この際もとのTreeを書き換えないように別のarrayにいれる
できた配列を出力