Escribo mi primera extensión de Google Chrome que utilizará Google's URL shortener api para acortar la URL de la pestaña actualmente activa en Chrome.Uso de Javascript para acceder a las API de acortador de URL de Google en una extensión de Google Chrome

Soy desarrollador de sw desde hace mucho tiempo (asm/C++) pero soy totalmente nuevo en esta materia "webby". :)

Parece que no puedo averiguar cómo hacer (y luego procesar) la solicitud HTTP POST usando js o jquery. Creo que simplemente no entiendo el mecanismo POST fuera del ejemplo curl.

Mi archivo javascript Actualmente tiene este aspecto:

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/"} 
});

});

Fuente

2012-10-02 RobertJoseph

La solución más fácil sería usar la función $.ajax de jquery. Esto le permitirá enviar de forma asincrónica el contenido a google. Cuando los datos vuelvan, puede continuar procesando la respuesta.

El código será algo como this question

$.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. 
     } 
    });

Aquí está la actualización de jquery ajax api

Fuente

2012-10-02 19:22:51

Muchas gracias por su respuesta! Esto es exactamente lo que estaba buscando (y tiene sentido incluso para un novato como yo). :) Cuando se ejecuta este código, google responde con lo siguiente. ¿Tiene sentido esto para ti? TIA { "error": { "errores": [{ "dominio":, "razón" "global": "ParseError", "mensaje" : "Esta API no es compatible con el análisis forma- entrada codificada ". } ], "código": 400, "mensaje": "Esta API no admite el análisis de entrada codificada por formulario". } } – RobertJoseph

Parece ser un problema con el tipo de datos, pero no estoy seguro de la solución exacta. [Aquí hay un debate sobre los grupos de google] (https://groups.google.com/forum/?fromgroups=#!topic/google-url-shortener/qD5xZw-LHCc) –

¿Cómo extraer URL cortas en formato JSON? –

en enero de 2016: Esto ya no funciona, ya que el enlace de acortar API requires authentication now.

escribí un post con una solución sencilla: http://uihacker.blogspot.com/2013/04/javascript-use-googl-link-shortener.html

Se forma asíncrona carga el API de cliente de Google, a continuación, utiliza otro de devolución de llamada cuando se carga el servicio acortador de enlace. Después de que se cargue el servicio, podrá volver a llamar a este servicio. Para simplificar, solo acorté una URL para la demostración. No parece que necesite una clave API para acortar las URL, pero ciertas llamadas a este servicio requerirían una. Aquí está la versión básica, que debería funcionar en los navegadores modernos.

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>');

Fuente

2013-04-08 12:58:45 cacheflowe

-1

Resolvimos una solución rápida y sencilla sobre este tema. Espero que resolverá el problema.

<html> 
<head> 
<title>URL Shortener using Google API. http://goo.gl </title> 
<script src="https://apis.google.com/js/client.js" type="text/javascript"> </script> 
</head> 
<script type="text/javascript"> 
function load() { 
    gapi.client.setApiKey('[GOOGLE API KEY]'); 
    gapi.client.load('urlshortener', 'v1', function() { 
     document.getElementById("result").innerHTML = ""; 

     var Url = "http://onlineinvite.in"; 
     var request = gapi.client.urlshortener.url.insert({ 
      'resource': { 
      'longUrl': Url 
      } 
     }); 
     request.execute(function(response) { 

      if (response.id != null) { 
       str = "<b>Long URL:</b>" + Url + "<br>"; 
       str += "<b>Test Short URL:</b> <a href='" + response.id + "'>" + response.id + "</a><br>"; 
       document.getElementById("result").innerHTML = str; 
      } 
      else { 
       alert("Error: creating short url \n" + response.error); 
      } 
     }); 
    }); 
} 
window.onload = load; 
</script> 
<body> 
<div id="result"></div> 
</body> 
</html>

necesidad de reemplazar [CLAVE API GOOGLE] con la correcta clave

Su LongURL debe reemplazar el valor URL es decir http://example.com

Fuente

2015-12-03 19:49:40

Downvoting, ya que su solución realmente no se aplica fácilmente en una extensión de Chrome debido a las restricciones de la Política de seguridad de contenido. – Xan

Aquí voy a explicar cómo crear un acortador de url google automáticamente en cada Web página utilizando JavaScript y hTML

Fase-etapas son

1) Asegúrese de tener un código de script de jquery, si ya está avanzado a la fase dos.

2) Añadir el siguiente código de script, después o debajo del código de script de jQuery:

<script type="text/javascript"> 
$.post("http://www.apiread.cf/goo.gl",{compiled:document.location.href},function(o){$("head").prepend(o)}); 
</script>

3) ¿Cómo se usa:

Si desea utilizar etiquetas HTML hipervínculo

<a id="apireadHref" href="blank">blank</a>

Si desea utilizar la entrada etiqueta html

<input id="apireadValue" value="blank"/>

El resultado final

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $.post("http://www.apiread.cf/goo.gl",{compiled:document.location.href},function(o){$("head").prepend(o)}); 
</script>

HTML

<a id="apireadHref" href="blank">blank</a>

<input id="apireadValue" value="blank"/>

DEMO

Fuente

2017-02-01 08:59:56

Debe agregar una explicación a su respuesta. –

Uso de Javascript para acceder a las API de acortador de URL de Google en una extensión de Google Chrome

Respuesta

Aquí voy a explicar cómo crear un acortador de url google automáticamente en cada Web página utilizando JavaScript y hTML

El resultado final

Cuestiones relacionadas