Chrome拡張機能でFacebookのいいね数をバッジに表示してみる

Facebookのいいね数をバッジに表示してみる。

manifest.json

{
  "name": "Sample Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "サンプルの拡張機能です。",
  "permissions": ["tabs"],
  "browser_action" : {
  },
  "background": {
    "scripts": ["jquery-1.11.1.min.js", "background.js"]
  }
}

jQueryのファイル

jQueryの適当なバージョンのjsファイルも置いておく。
（今回は1.11.1を使っている）

background.js

/*
 * 現在表示中のタブとURL
 */
var currentTabId;
var currentUrl;

/*
 * 一度取得したいいねの数はタブ毎にキャッシュしておく
 * 
 * 【形式】
 *  cacheCount = {
 *    タブID = {
 *      URL   => いいねの数,
 *    },
 *    ・・・
 *  }
 */
var cacheCount = {};

/*
 * いいねの件数の更新
 */
function updateLikeCount(tabId, url) {

  // 現在選択されているURLを設定する
  currentUrl = url;

  // 'http'で始まらないURLの場合は何もしない
  if (!url || url.match(/^http/) === null) {
    return;
  }

  // キャッシュがある場合はキャッシュから取得する
  if (cacheCount[tabId] !== undefined && cacheCount[tabId][url] !== undefined) {
    var count = cacheCount[tabId][url];
    var badge = (count > 0) ? (count > 9999) ? "9999" : String(count) : "";
    chrome.browserAction.setBadgeText({text:badge});
    return;
  }

  // キャッシュがないのでいいねの数の取得して更新する

  // 一旦バッジをクリアする
  chrome.browserAction.setBadgeText({text:""});
  
  // FacebookからFQLでいいねの数を取得する
  var query = "SELECT share_count, like_count, comment_count, total_count FROM link_stat WHERE url='" + url + "'";
  jQuery.get('http://graph.facebook.com/fql', {q:query, format:"json"}, function(res) {

    // 取得時のタブとURLが、現在のものと異なる場合は何もしない
    if (tabId !== currentTabId || url !== currentUrl) {
      return;
    }

    // バッジの更新
    if (res && res.data[0]) {
      //console.log(url);
      //console.log(res.data[0]);
      var count = res.data[0].like_count;
      var badge = (count > 0) ? (count > 9999) ? "9999" : String(count) : "";

      // いいねの数をバッジに表示する
      chrome.browserAction.setBadgeText({text:badge});

      // キャッシュを設定する
      if (cacheCount[tabId] === undefined) {
        cacheCount[tabId] = {};
      }
      cacheCount[tabId][url] = count;
    }

  });

}

/*
 * タブが切り替わった場合の処理
 */
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {

  // 現在選択されているタブを設定する
  currentTabId = tabId;
  
  // タブのURLを取得する
  chrome.tabs.get(tabId, function(tab) {
    // いいね数の更新
    updateLikeCount(tabId, tab.url);
  });

});

/*
 * 更新があった場合の処理
 */
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  // タブのURLを取得する
  chrome.tabs.get(tabId, function(current_tab) {
    
    // 別のタブの更新の場合は何もしない
    if (tabId !== currentTabId) {
      return;
    }
    
    // 今のタブのURLとは別のURLを読み込んだ場合は何もしない
    // AutoPatchWorkを入れてると、同一タブで異なるURLで更新されるため
    if (tab.url !== current_tab.url) {
      return;
    }

    // 'loading'時と'complete'の２回呼ばれる
    // 'loading'時のみ更新し、それ以外の場合は更新しない
    if (changeInfo.status !== 'loading') {
      return;
    }

    // いいね数の更新
    updateLikeCount(tabId, tab.url);

  });

});

下記のような感じでいいねの数が表示される。