All geek questions in one place

Using javascript to access the Google URL abbreviations API in the Google Chrome extension

I am writing my first chrome google extension that will use the Google URL shortener api to shorten the URL of the currently active tab in Chrome.

I am a longtime sw developer (asm / C ++), but completely new to this "webby". :)

I cannot figure out how to make (and then process) the http POST request using js or jquery. I think I just don't understand the POST mechanism outside of the twist example.

Currently, my javascript file is as follows:

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

});

+6
source share
4 answers

The simplest solution is to use the jquery $.ajax . This will allow you to asynchronously submit content to Google. When the data returns, you can continue to process the response.

The code will look something like 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. } });

Here is the jquery ajax api

+5
source

January 2016 update . This does not work anymore, as the link shortening API requires authentication now .

I wrote a blog post with a simple solution: http://uihacker.blogspot.com/2013/04/javascript-use-googl-link-shortener.html

It loads the Google client API asynchronously, and then uses a different callback when the link shortening service loads. After downloading the service, you can call this service again. For simplicity, I have reduced only one URL for demonstration. It doesn't seem like you need an API key to simply shorten URLs, but some calls to this service will require one. Here is the basic version that should work in modern browsers.

 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>');
+4
source

Here I will explain how to automatically create a shortened google url on every web page using javascript and html

Phase stages

1) Make sure you have jquery script code if it has already moved to the second stage.

2) Add the following script code, after or below the jquery script code:

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

3) How to use it:

If you want to use html tag hyperlink

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

If you want to use html tag input

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

Final result

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>

or

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

Demo

0
source

Developed a quick and easy solution to this problem. Hope this solves the problem.

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

Replace [GOOGLE API KEY] with the correct key

Your LongUrl should replace the value Url ie http://example.com

-1
source

Source: https://habr.com/ru/post/926781/

More articles:


All Articles