크롬 익스텐션(공식 튜토리얼에 따라 제작)이 작동하지 않음

크롬 익스텐션(공식 튜토리얼에 따라 제작)이 작동하지 않음

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

이 튜토리얼은 여전히 괜찮은가요?언급된 파일을 모두 다운로드했는데 확장이 작동하지 않습니다.Ajax 요청과 관련하여 문제가 있는 것 같습니다.

메시지를 받았습니다.

이미지를 표시할 수 없습니다.Google 이미지에서 응답이 없습니다.

다른 웹 사이트에 Ajax 요청을 수행하려고 했지만, menifest.json 파일의 권한에도 불구하고 요청이 로컬로 수행되는 것으로 나타났습니다.

이 예에서는 60행의 팝업.js 내부에서 https://ajax.googleapis.com/ajax/services/search/images 로 전화가 걸려옵니다.이제 만료되었습니다.

쿼리 인수를 제공하여 확인할 수 있습니다.예를 들어, https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=chrome 은 "이 API는 더 이상 사용할 수 없습니다."라는 응답을 제공합니다.

이 포럼에서는 대체 검색 API 목록에 대해 설명합니다.https://groups.google.com/forum/ #!topic/Google-AJAX-Search-API/Ao9TbQbYgHo

네, 그럼 아직 고장이 났군요.Googleapis(UberHans에서 게시한 대안에서 참조)와 함께 작동하기 위해 팝업.js 파일(아래 링크)을 패치했습니다.나는 변경된 PR에 대한 출처 보고서를 찾으려고 했지만, 그런 행운은 없었습니다.

팝업.js에서는 cx 및 api 키를 추가해야 합니다.당신이 코드를 읽는다면, 당신이 변경해야 할 것과 필요한 cx와 api 키를 얻는 방법이 꽤 분명할 것입니다.

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

업데이트: 도움이 된다면, 여기 구글이 제공하는 것과 샘플을 작동시키기 위해 수행한 작업 사이의 차이점이 있습니다(cx 및 키 변수는 유효한 cx 및 키로 업데이트되어야 작동함).

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

해당 특정 기능을 원하지 않는 한 다른 샘플을 사용해 볼 수 있습니다.

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

같은 생각입니다.

언급URL : https://stackoverflow.com/questions/34037689/chrome-extension-made-according-to-official-tutorial-not-working