読者です 読者をやめる 読者になる 読者になる

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

Webページの閲覧履歴を使いたくて、ChromeAPI使えば出来る!って思って挑戦してみた。
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);
}

あとはicon.pngを19x19で作成して下さい。


次にChrome拡張機能のページにいき、デベロッパー モードにチェック。
f:id:cocodrips:20130607040054p:plain

以下から、以上3つ+アイコンファイルが入ったディレクトリを選択するだけ。
f:id:cocodrips:20130607040232p:plain

アイコンが右側に表示されましたか?
f:id:cocodrips:20130607040414p:plain

クリックすると履歴がポップアップに表示されるはずです。
自分の履歴はとんでもないことになってなので残念ながらスクショできませんでした。

そんな感じで30分くらいでここまでやることができました。
とっても簡単ですね!
本格的に拡張機能を作るとするとまだまだ大変なことが多そうですが・・・

今回のソースコードGithubのページに全部あります。