Chrome Extension開発を勉強してみる (3) - 右クリック拡張でTwitter intent -

実際に使ってるのを例に書いてみる

要件

見ているWebサイトをTwitterのツイートフォームにタイトルとURLをツイートするのを支援する拡張機能。方式として右クリックメニューに拡張アプリのアイコンと名前を出してそれを選択する事で新しいタブにてツイートフォームのページを表示させる。サイトによっては共有ツールが無い場合があり、サイトをツイートしたりするのが何かとめんどくさいので(以前に)作ってみた

manifest.json

{
  "name": "twify",
  "version": "0.1",
  "description": "URL tweet Context Menu Chrome Extension",
  "background_page": "background.html",
  "permissions": ["contextMenus"]
}

今回は右クリックメニューにアクションを追加するのでcontextMenusのパーミッションが必要

background.html

<html>
  <head>
    <script type="text/javascript" src="twify.js"></script>
  </head>
  <body>
  </body>
</html>

単純にtwify.jsを読み込むだけ

twify.js

function getTitle(tab) {
  if (tab !== undefined && tab !== null) {
    if ("title" in tab) {
      return tab.title;
    }
  }

  return undefined;
}

function getURL(tab) {
  if (tab !== undefined && tab !== null) {
    if ("url" in tab) {
      return tab.url;
    }
  }

  return undefined;
}

function buildTweetURL(title, url) {
  if ((title !== undefined && title !== null) && (url !== undefined && url !== null)) {
    return "http://twitter.com/intent/tweet?source=webclient&text=" + encodeURIComponent(title) + "%20" + encodeURIComponent(url);
  }

  return undefined;
}

(function() {
  chrome.contextMenus.create({
    "type": "normal",
    "title": "twify",
    "onclick": function(info, tab) {
      var title = getTitle(tab);
      var url = getURL(tab);

      if (title !== undefined && url !== undefined && /^http/.test(url)) {
        var openURL = buildTweetURL(title, url);

        if (openURL !== undefined) {
          chrome.tabs.create({ "url": openURL });
        }
      }
    }
  });
})();

結構単純で右クリックメニューをバインドしてそれを選択されたら、現在のタブに表示してあるページからタイトルとURLだけを取り出してTwitterのツイートフォームなページを新しいタブで表示させるだけ。んまぁTwitter APIとかと連携すればそれなりに自動化はできるんだろうけど、めんどくさいのでやらなかった(というかそこまでの必要性が無かった)

という感じで右クリックメニューを拡張したりも出来るみたい。ちなみにこの際にはtabなパーミッションは不要みたいですね