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

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