Chrome extension (made according to official tutorial) not working

Question

https://developer.chrome.com/extensions/getstarted

Is this tutorial still ok? I've downloaded all metioned files and the extension is not working. I think there is a problem connected with Ajax request.

I got the message:

Cannot display image. No response from Google Image..

I tried to perform Ajax request to another website, but it turned out that the request is performed locally - despite of permissions in a menifest.json file.

Answer 1

In this example, inside popup.js at line 60, a call is made to https://ajax.googleapis.com/ajax/services/search/images. This is now expired.

You can verify by providing a query argument. For example, https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=chrome will give response "This API is no longer available.".

This forum discusses the list of alternate search APIs. https://groups.google.com/forum/#!topic/Google-AJAX-Search-API/Ao9TbQbYgHo

Answer 2

Yeah, so this is still broken. I patched the popup.js file (link below) to work with googleapis (referred to in the alternatives posted by UberHans). I tried to find a source repo to PR the change to, but no such luck.

The popup.js requires you to add your cx and api key. If you read the code, it should be pretty clear what you need to change and how to acquire the required cx and api key.

https://gist.githubusercontent.com/CrashenX/c4f80340b67e87f13753fb30554f6f01/raw/d8f335d9abe699a63e15d8baec10542e9989a88c/popup.js

UPDATE: If it helps, here is the diff between what google provides and what I did to get the sample working (the cx and key vars need to be updated with a valid cx and key to work):

59,61c59,66 <   // https://developers.google.com/image-search/ <   var searchUrl = 'https://ajax.googleapis.com/ajax/services/search/images' + <     '?v=1.0&q=' + encodeURIComponent(searchTerm); --- >   // https://developers.google.com/custom-search/json-api/v1/using_rest >   var cx = 'insert-your-cx-from:https://cse.google.com' >   // WARNING: Hard-coding your api key in code is really insecure >   var key = 'insert-your-key-from:https://console.developers.google.com' >   var searchUrl = 'https://www.googleapis.com/customsearch/v1?searchType=image' >     + '&cx=' + encodeURIComponent(cx) >     + '&key=' + encodeURIComponent(key) >     + '&q=' + encodeURIComponent(searchTerm); 69,72c74,76 <     if (!response || !response.responseData || !response.responseData.results || <         response.responseData.results.length === 0) { <       errorCallback('No response from Google Image search!'); <       return; --- >     if (!response || !response.items || !response.items.length) { >         errorCallback('No response from Google Image search') >         return; 74c78 <     var firstResult = response.responseData.results[0]; --- >     var firstResult = response.items[0]; 77,79c81,83 <     var imageUrl = firstResult.tbUrl; <     var width = parseInt(firstResult.tbWidth); <     var height = parseInt(firstResult.tbHeight); --- >     var imageUrl = firstResult.image.thumbnailLink; >     var width = parseInt(firstResult.image.thumbnailWidth); >     var height = parseInt(firstResult.image.thumbnailHeight);