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

Answer 1

Unless you really want that particular feature, you may try the other samples

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

It's the same idea

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

Answer 3

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