Tôi viết phần mở rộng của Google Chrome đầu tiên của tôi mà sẽ sử dụng Google's URL shortener api để rút ngắn URL của tab hiện đang hoạt động trong Chrome.Sử dụng javascript để truy cập API URL shortener của Google trong một phần mở rộng của Google Chrome

Tôi là một người lâu năm sw nhà phát triển (asm/C++) nhưng hoàn toàn mới để "Webby" công cụ này. :)

tôi dường như không thể tìm ra cách để làm (và sau đó xử lý) theo yêu cầu POST http sử dụng js hoặc jquery. Tôi nghĩ rằng tôi chỉ không hiểu được cơ chế POST bên ngoài của ví dụ curl.

tập tin javascript của tôi hiện trông như thế này:

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

});

Nguồn

2012-10-02 RobertJoseph

Giải pháp đơn giản nhất là nên sử dụng chức năng jquery của $.ajax. Điều này sẽ cho phép bạn gửi nội dung không đồng bộ đến google. Khi dữ liệu trở lại, bạn có thể tiếp tục xử lý phản hồi.

Mã sẽ giống như thế 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. 
     } 
    });

Đây là jquery ajax api

Nguồn

2012-10-02 19:22:51

Cảm ơn bạn rất nhiều vì câu trả lời của bạn! Đây chính xác là những gì tôi đang tìm kiếm (và có ý nghĩa với cả một noob như tôi). :) Khi mã này thực hiện trả lời google với những điều sau đây. Điều này có ý nghĩa gì với bạn hay không? TIA { "lỗi": { "lỗi": [{ "miền": "toàn cầu", "lý do": "parseError", "message": "API này không hỗ trợ phân tích form- đầu vào được mã hóa. " } ], "mã": 400, "message": "API này không hỗ trợ phân tích cú pháp đầu vào được mã hóa biểu mẫu". } } – RobertJoseph

Dường như có vấn đề với dataType nhưng tôi không chắc chắn về giải pháp chính xác. [Đây là một cuộc thảo luận trên các nhóm google] (https://groups.google.com/forum/?fromgroups=#!topic/google-url-shortener/qD5xZw-LHCc) –

Làm cách nào để trích xuất URL ngắn có định dạng JSON? –

Cập nhật tháng một năm 2016: Đây không còn hoạt động, như các liên kết rút ngắn API requires authentication now.

tôi đã viết một bài đăng blog với một giải pháp đơn giản: http://uihacker.blogspot.com/2013/04/javascript-use-googl-link-shortener.html

Nó tải không đồng bộ API khách hàng của Google, sau đó sử dụng callback khác khi dịch vụ liên kết shortener được tải. Sau khi dịch vụ tải, bạn có thể gọi lại dịch vụ này. Để đơn giản, tôi chỉ rút ngắn một URL cho bản trình diễn. Nó không xuất hiện mà bạn cần một khóa API chỉ đơn giản là rút ngắn URL, nhưng các cuộc gọi nhất định để dịch vụ này sẽ đòi hỏi một. Đây là phiên bản cơ bản, nên hoạt động trong các trình duyệt hiện đại.

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

Nguồn

2013-04-08 12:58:45 cacheflowe

-1

Đã tìm ra giải pháp nhanh và đơn giản về vấn đề này. Hy vọng nó sẽ giải quyết vấn đề.

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

Cần thay thế [GOOGLE API KEY] với đúng chính

LongUrl bạn nên thay thế giá trị Url tức http://example.com

Nguồn

2015-12-03 19:49:40

Giảm giá vì giải pháp của bạn không thực sự áp dụng dễ dàng trong tiện ích mở rộng của Chrome do các hạn chế của Chính sách bảo mật nội dung. – Xan

Ở đây tôi sẽ giải thích làm thế nào để tạo ra một url shortener google tự động trên tất cả các web trang sử dụng javascript và html

Phase-giai đoạn là

1) Hãy chắc chắn rằng bạn có một mã kịch bản jquery, nếu có đã được nâng cao đến giai đoạn hai.

2) Thêm mã script sau, sau hoặc bên dưới đoạn code jquery kịch bản:

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

3) Làm thế nào để sử dụng nó:

Nếu bạn muốn sử dụng thẻ html siêu liên kết

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

Nếu bạn muốn sử dụng đầu vào thẻ html

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

Kết quả cuối cùng

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>

hoặc

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

DEMO

Nguồn

2017-02-01 08:59:56

Bạn nên thêm giải thích cho bạn trả lời. –

Sử dụng javascript để truy cập API URL shortener của Google trong một phần mở rộng của Google Chrome

Trả lời

Ở đây tôi sẽ giải thích làm thế nào để tạo ra một url shortener google tự động trên tất cả các web trang sử dụng javascript và html

Kết quả cuối cùng

Các vấn đề liên quan