ChromeExtensionを作るのに挑戦してみた

Webページの閲覧履歴を使いたくて、ChromeのAPI使えば出来る！って思って挑戦してみた。
ChromeExtensionの作り方は(最初は)びっくりするほど簡単。

まずはスタートページにあるように、manifest.jsonというファイルを作る。

{
    "manifest_version": 2,

    "name": "My Chrome Extension",
    "description": "閲覧履歴を100件コーンソールに表示",
    "version": "1.0",

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "history"
    ]
}

細かいところはリファレンスを見ればわかると思います。

次にpopup.html
これがアイコン押した時に表示されるポップアップ。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
    <title>Extension</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }

    </style>

    <script src="script/jquery-1.9.1.min.js"></script>
    <script src="script/history.js"></script>
  </head>
  <body>
  </body>
</html>

jsを呼び出すだけです。
jqueryも入れて下さい。

肝心のhistory.jsはこんなかんじ。
本当に履歴を書き出してるだけです。
(その後ちゃんともっと改良されてます・・・(´･∀･｀))
2013/4/1から2013/6/1までの履歴を100件(デフォルト)分取り出してきています。

$(function(){
    var start = Date.parse("Apr 1, 2013");
    var end = Date.parse("Jun 1, 2013");

    chrome.history.search(
            "text":"",
            "startTime":start,
            "endTime":end
        },
        function (array){
            export_urls(array);
        });
});

var export_urls = function(array){
    var titles ="";
    for(var i in array){
        console.log(titles);
        titles = titles + "<a target='_blank' href=" + array[i].url + ">" + array[i].title + "</a><br>";

    }
    $("body").html(titles);
}