江戸一番のジャスタウェイ職人のブログ

江戸一番のジャスタウェイ職人

bookma!のChrome Extensions書いた

f:id:s-aska:20130513065633g:plain

週末bookma!の更新情報をチェックしてくれるChrome Extensionsを書いた。

https://chrome.google.com/webstore/detail/bookma/liokhcpckffcejhmhgboapcfgjboagjm

Retinaディスプレイだと38x38のアイコンを用意しておくと自動でそっちを読んでくれる。

manifest.json
{
  "name":"bookma!",
  "version":"0.0.7",
  "manifest_version": 2,
  "description": "bookma!",
  "browser_action":{
    "default_icon": {
      "19": "icon-19.png",
      "38": "icon-38.png"
    },
    "default_title":"bookma!",
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "icon-48.png",
    "128": "icon-128.png"
  },
  "background": {
    "scripts": ["jquery-2.0.0.min.js", "background.js"]
  },
  "permissions": [
    "tabs",
    "http://bookma.org/"
  ],
  "web_accessible_resources": [
    "icon-128.png"
  ]
}

background.js

(function(ns, w, d, $) {

w.setInterval(function(){
  $.ajax({
    url: 'http://bookma.org/',
    dataType: 'json',
    data: {
      json: 1,
      limit: 20
    }
  }).done(function(data){
    var last_time = localStorage.getItem('org.bookma.last_time') || '';
    var count = 0;
    $.each(data.entries, function(i, entry){
      if (last_time.localeCompare(entry.publish_time) === -1) {
        count++;
      }
    });
    if (count > 0) {
      chrome.browserAction.setBadgeBackgroundColor({color: [208, 0, 24, 255]});
      chrome.browserAction.setBadgeText({text: count.toString()});
    } else {
      chrome.browserAction.setBadgeText({text: ''});
    }
  });
}, 300000);

})(this, window, document, jQuery);
popup.html
<html>
<head>
<meta charset="utf-8">
<title>Bookma for Chrome</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<script type="text/javascript" src="jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<table>
  <tbody>
    <tr>
      <th><a href="http://bookma.org/" target="_blank">bookma v3</a></th>
      <td>
        <a class="btn">現在表示しているサイトを推薦する</a>
      </td>
    </tr>
  </tbody>
</table>
<ul>
  <li></li>
</ul>
</body>
</html>
app.js
(function(ns, w, d, $) {

$(d).ready(function(){
  var ul = $(d.body).find('ul');
  var button = $(d.body).find('a.btn');
  var token = null;
  ul.empty();
  $.ajax({
    url: 'http://bookma.org/',
    dataType: 'json',
    data: {
      json: 1,
      limit: 20
    }
  }).done(function(data){
    token = data.token;
    chrome.browserAction.setBadgeText({text: ''});
    var last_time = '';
    $.each(data.entries, function(i, entry){
      if (last_time.localeCompare(entry.publish_time) === -1) {
        last_time = entry.publish_time;
      }
      var li = $($.parseHTML('<li><a target="_blank"><img><span></span></a></li>'));
      li.find('a').attr('href', 'http://bookma.org/entry/' + entry.entry_id + '/view');
      li.find('img').attr('src',
        'http://bookma.org/thumbnails/'
        + entry.entry_id
        + '-thumbnail-'
        + entry.delay
        + '.png?'
        + entry.update_time);
      li.find('span').text(entry.title);
      li.appendTo(ul);
    });
    localStorage.setItem('org.bookma.last_time', last_time);
  });
  button.on('click', function(e){
    e.preventDefault();
    chrome.tabs.getSelected(null, function(tab){
      button
        .off('click')
        .addClass('disabled')
        .text('サイト推薦を受け付けました!');
      $.ajax({
        url: 'http://bookma.org/entry/create',
        dataType: 'json',
        type: 'post',
        data: {
          url: tab.url,
          csrf_token: token
        }
      });
    });
  });
});

})(this, window, document, jQuery);