google short urlでqrコードを作成する

GoogleのURL短縮サービスgoo.glでQRコードを作成する方法(隠し機能・イースターエッグ) - MiuxMiu


どうやら隠し機能らしいのですがURLの最後に.qrをつけるだけでokなようです。
試しにやってみると

http://goo.gl/W8KDi

http://goo.gl/W8KDi.qrとすると
作成されました。



どうやらAPIもあるらしく http://goo.gl/api/url
が使えるそうです。

なんか作るか

chrome extensionを作ってみたいと思っていたので
短縮QRコードクリップボードにセットする chrome extensionを作ってみました。


getQR.crx - 作ったもの
rochefort/getQR - GitHub

こんな感じ
<script>
API_URL = "http://goo.gl/api/url";
// ブラウザアクションがクリックされた場合の処理
chrome.browserAction.onClicked.addListener(function(tab) {
  setClipboard(getShortUrl(tab.url));
});

function setClipboard (url) {
  var elm = document.getElementById('clipboard');
  elm.value = url + '.qr';
  elm.select();
  document.execCommand('copy');
}

function getShortUrl (url) {
  var xhr = new XMLHttpRequest();
  var opt = "url=" + encodeURIComponent(url);

  xhr.open("post", API_URL, false);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  var shortUrl = "";
  xhr.onreadystatechange = function() {
    shortUrl = JSON.parse(xhr.responseText).short_url;
  }
  xhr.send(opt);
  return shortUrl;
}
</script>
感想

chrome extensionの作り方は参考URLを参照。
jsやpopupのhtmlをモリモリ書くという感じですね。
configurationなどの設定はlocalStorageに保存する感じかな。
ただdebugがしにくいです。


clipboardにセットするところで結構嵌りましたが、
document.execCommand('copy')で一応解決。