使用javascript在Google Chrome扩展程序中访问Google的网址缩短API

Question

我正在编写我的第一个谷歌浏览器扩展程序,它将使用谷歌的URL缩短器api来缩短Chrome中当前活动选项卡的URL.

我是一个长期的开发人员(asm/C++),但对于这个"webby"的东西来说是全新的.:)

我似乎无法弄清楚如何使用js或jquery制作(然后处理)http POST请求.我想我只是不理解curl示例之外的POST机制.

我的javascript文件目前看起来像这样:

chrome.browserAction.onClicked.addListener(function(tab) { 
    console.log('chrome.browserAction.onClicked.addListener');

chrome.tabs.getSelected(null, function(tab) {
    var tablink = tab.url;
    console.log(tablink);

    //TODO send http post request in the form
    // POST https://www.googleapis.com/urlshortener/v1/url
    //   Content-Type: application/json
    //   {"longUrl": "http://www.google.com/"}
});

});

Answer 1

最简单的解决方案是使用jquery的$.ajax功能.这将允许您异步将内容发送到谷歌.当数据返回时,您可以继续处理响应.

代码看起来像这个问题

$.ajax({
        url: 'https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&key=AIzaSyANFw1rVq_vnIzT4vVOwIw3fF1qHXV7Mjw',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: '{ longUrl: "' + longURL +'"}',
        dataType: 'json',
        success: function(response) {
            var result = JSON.parse(response); // Evaluate the J-Son response object.
        }
     });

这是jquery ajax api

Answer 2

2016年1月更新:这不再有效,因为链接缩短API 现在需要身份验证.

我用一个简单的解决方案写了一篇博文:http: //uihacker.blogspot.com/2013/04/javascript-use-googl-link-shortener.html

它异步加载Google客户端API,然后在加载链接缩短服务时使用另一个回调.加载服务后,您可以再次调用此服务.为简单起见,我只缩短了演示的一个URL.您似乎不需要API密钥来简单地缩短URL,但是对此服务的某些调用需要一个.这是基本版本,应该适用于现代浏览器.

var shortenUrl = function() {
  var request = gapi.client.urlshortener.url.insert({
    resource: {
      longUrl: 'http://your-long-url.com'
    }
  });
  request.execute(function(response) {
    var shortUrl = response.id;
    console.log('short url:', shortUrl);
  });
};

var googleApiLoaded = function() {
  gapi.client.load("urlshortener", "v1", shortenUrl);
};

window.googleApiLoaded = googleApiLoaded;
$(document.body).append('<script src="https://apis.google.com/js/client.js?onload=googleApiLoaded"></script>');