2012-10-02 13 views
6

में Google के यूआरएल शॉर्टनर एपीआई तक पहुंचने के लिए जावास्क्रिप्ट का उपयोग करना, मैं अपना पहला Google क्रोम एक्सटेंशन लिख रहा हूं जो क्रोम में वर्तमान सक्रिय टैब के यूआरएल को कम करने के लिए Google's URL shortener api का उपयोग करेगा।Google क्रोम एक्सटेंशन

मैं एक लंबे समय तक स्वि डेवलपर (एएसएम/सी ++) हूं लेकिन इस "वेबबी" सामान के लिए पूरी तरह से नया हूं। :)

मुझे लगता है कि जेएस या jquery का उपयोग कर http POST अनुरोध को बनाने (और फिर प्रक्रिया) कैसे करना है। मुझे लगता है कि मैं कर्ल उदाहरण के बाहर पोस्ट तंत्र को समझ नहीं पा रहा हूं।

मेरे जावास्क्रिप्ट फ़ाइल वर्तमान में इस तरह दिखता है:

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

});

उत्तर

5

सबसे आसान समाधान jquery के $.ajax फ़ंक्शन का उपयोग करना होगा। यह आपको अतुल्यकालिक रूप से सामग्री को Google को भेजने की अनुमति देगा। जब डेटा वापस आता है तो आप प्रतिक्रिया को संसाधित करना जारी रख सकते हैं।

कोड यहाँ की तरह 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. 
     } 
    }); 

कुछ दिखेगा जनवरी में jquery ajax api

+0

आप अपनी प्रतिक्रिया के लिए बहुत बहुत धन्यवाद! यह वही है जो मैं खोज रहा था (और मेरे जैसे नोब को भी समझ में आता है)। :) जब यह कोड निम्नलिखित के साथ Google प्रतिक्रिया करता है। क्या यह आपको सही प्रतीत होता है? TIA { "त्रुटि": { "त्रुटियों": [ { "डोमेन": "वैश्विक", "कारण": "parseError", "message": "यह एपीआई फार्म पार्स करने का समर्थन नहीं करता एन्कोडेड इनपुट। " } ], "कोड": 400, "संदेश": "यह एपीआई पार्सिंग फॉर्म-एन्कोडेड इनपुट का समर्थन नहीं करता है।" } } – RobertJoseph

+0

यह डेटा टाइप के साथ एक समस्या प्रतीत होता है लेकिन मुझे सटीक समाधान की जानकारी नहीं है। [यहां Google समूह पर एक चर्चा है] (https://groups.google.com/forum/?fromgroups=#!topic/google-url-shortener/qD5xZw-LHCc) –

+1

जेएसओएन प्रारूप में लघु URL कैसे निकाला जाए? –

4

अद्यतन, 2016: यह नहीं रह गया है लिंक एपीआई requires authentication now को छोटा करने के रूप में, काम करता है।

मैं एक सरल समाधान के साथ एक ब्लॉग पोस्ट ने लिखा है: http://uihacker.blogspot.com/2013/04/javascript-use-googl-link-shortener.html

यह अतुल्यकालिक रूप से गूगल ग्राहक एपीआई लोड करता है, फिर एक और कॉलबैक जब लिंक shortener सेवा भरी हुई है का उपयोग करता है। सेवा लोड होने के बाद, आप इस सेवा को फिर से कॉल करने में सक्षम होंगे। सादगी के लिए, मैंने डेमो के लिए केवल एक यूआरएल छोटा कर दिया है। ऐसा प्रतीत नहीं होता है कि आपको 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>'); 
-1

इस मुद्दे पर एक त्वरित और सरल समाधान तैयार किया। उम्मीद है कि यह समस्या हल करेगा।

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

आवश्यकता यूआरएल मूल्य यानी http://example.com

+0

डाउनवॉटिंग, क्योंकि सामग्री समाधान नीति प्रतिबंधों के कारण आपका समाधान क्रोम एक्सटेंशन में वास्तव में आसानी से लागू नहीं होता है। – Xan

0

यहाँ मैं हर वेब पर स्वचालित रूप से एक Google URL Shortener बनाने का तरीका समझा जाएगा बदलना चाहिए सही कुंजी

आपका LongUrl साथ [Google API कुंजी] को बदलने के लिए जावास्क्रिप्ट और एचटीएमएल

चरण चरण हैं का उपयोग कर पृष्ठ

1) सुनिश्चित करें कि आपके पास एक jquery स्क्रिप्ट कोड है, यदि चरण दो में पहले से ही उन्नत है।

2), निम्न स्क्रिप्ट कोड जोड़ें के बाद या jQuery स्क्रिप्ट कोड के नीचे:

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

3) इसका उपयोग कैसे करें:

आप html टैग हाइपरलिंक उपयोग करना चाहते हैं

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

यदि आप एचटीएमएल टैग इनपुट

<input id="apireadValue" value="blank"/> 
का उपयोग करना चाहते हैं 210



अंतिम परिणाम

जावास्क्रिप्ट

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

एचटीएमएल

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

या

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

DEMO

+2

आपको जवाब देने के लिए आपको एक स्पष्टीकरण जोड़ना चाहिए। –

संबंधित मुद्दे