L'utilisation de javascript pour accéder à Google raccourcisseur d'URL Api Google Chrome extension

Je suis en train d'écrire mon premier google chrome extension qui va utiliser Google est le raccourcisseur d'URL de l'api pour raccourcir l'URL de la vue actuellement active onglet dans google Chrome.

Je suis un vieux sw développeur (asm/C++), mais totalement nouveau pour cette "webby" choses". 🙂

Je n'arrive pas à comprendre comment faire (et processus) la requête http POST à l'aide de js ou jquery. Je pense que je ne comprends pas le mécanisme POST à l'extérieur de la boucle exemple.

Mon fichier javascript actuellement ressemble à ceci:

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

});

InformationsquelleAutor RobertJoseph | 2012-10-02
  1. 5

    La solution la plus simple serait d'utiliser du jquery $.ajax fonction. Cela vous permettra de manière asynchrone envoyer le contenu à google. Lorsque les données de revient, vous pouvez continuer à traiter la réponse.

    Le code ressemblera à quelque chose comme cette 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.
        }
     });

    Ici est la api ajax de jquery

    • Merci beaucoup pour votre réponse! C'est exactement ce que je cherchais (et de sens, même pour un noob comme moi). 🙂 Quand ce code s'exécute google répond à la suivante. Cela fait-il sens pour vous? TIA { "error": { "erreurs": [ { "domaine": "global", "raison": "parseError", "message": "Cette API ne prend pas en charge l'analyse de forme codée des données". } ], "code": 400, "message": "Cette API ne prend pas en charge l'analyse de forme codée des données". } }
    • Il semble y avoir un problème avec le type de données mais je ne suis pas sûr de la solution exacte. Voici une discussion sur des groupes de google
    • Comment faire pour extraire les URL courte obtenu au format JSON?
    InformationsquelleAutor Mark Meyer
  2. 5

    Mise à jour en Janvier 2016: Cela ne fonctionne plus, comme le raccourcissement d'url de l'API requiert une authentification maintenant.

    J'ai écrit un post de blog avec une solution simple:
    http://uihacker.blogspot.com/2013/04/javascript-use-googl-link-shortener.html

    De manière asynchrone en charge la Google API du client, puis utilise un autre rappel lorsque le lien raccourcisseur service est chargé. Après les charges de service, vous serez en mesure d'appeler ce service à nouveau. Pour des raisons de simplicité, je n'ai raccourcir une URL pour la démo. Il ne semble pas que vous avez besoin d'une clé API simplement raccourcir les Url, mais certains appels à ce service aurait besoin d'une. Voici la version de base, qui devrait fonctionner dans les navigateurs modernes.

    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>');
    InformationsquelleAutor cacheflowe
  3. 0

    Ici je vais vous expliquer comment créer un raccourcisseur d'url de google automatiquement sur chaque page web à l'aide de javascript et html

    Phase-étapes sont

    1) assurez-vous que vous avez un script jquery code, si il est déjà bien avancée à la phase deux.

    2) Ajouter le code de script suivant, après ou au-dessous du script jquery code:

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

    3) Comment l'utiliser:

    Si vous souhaitez utiliser des balises html lien hypertexte

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

    Si vous souhaitez utiliser la balise html input

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

    Le résultat 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>

    ou

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

    DÉMO

    • Vous devez ajouter une explication à vous répondre.
    InformationsquelleAutor Quest ID
  4. 0
    $.ajax({
        url: 'https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyANFw1rVq_vnIzT4vVOwIw3fF1qHf3wIv4T',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: '{ "longUrl": "' + longURL +'"}',
        dataType: 'json',
        success: function(response) {
            console.log(response);
        }
     });
    • Bienvenue dans l'affirmative, veuillez expliquer votre code source.
    InformationsquelleAutor Harish Chilamanthula
  5. -1

    Travaillé sur une solution rapide et simple sur cette question. Espérons qu'il permettra de résoudre le problème.

    <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>

    Besoin de remplacer [CLÉ API GOOGLE] avec la bonne Clé

    Votre LongUrl devrait remplacer l'Url de la valeur c'est à dire http://example.com

    • Downvoting, depuis votre solution ne s'applique pas facilement dans une extension Chrome en raison de la Sécurité du Contenu de la Politique de restrictions.
    InformationsquelleAutor TRIKONINFOSYSTEMS