크롬 확장 프로그램 내에서 jQuery.ajax 호출이 실패합니다.

Question

Chrome 확장 프로그램 중 하나를 포팅 중이며 AJAX 쿼리에 약간의 문제가 있습니다. 다음 코드는 FF 확장 프로그램에서 정상적으로 작동하지만 Chrome에서는 '0'상태로 실패합니다.

function IsImage(url) { 
    var isImage = false; 
    var reImageContentType = /image\/(jpeg|pjpeg|gif|png|bmp)/i; 
    var reLooksLikeImage = /\.(jpg|jpeg|gif|png|bmp)/i; 

    if(!reLooksLikeImage.test(url)) 
    { 
     return false; 
    } 

    var xhr = $.ajax({ 
     async: false, 
     type: "HEAD", 
     url: url, 
     timeout: 1000, 
     complete : function(xhr, status) { 
      switch(status) 
      { 
       case "success": 
        isImage = reImageContentType.test(xhr.getResponseHeader("Content-Type")); 
        break; 
      } 
     }, 
    }); 

    return isImage; 
} 

확장의이 특별한 부분은 클립 보드 (I 이미 해결 한 다른 크롬 문제)에 무엇을 확인하고, 이미지의 URL이 있다면, 그것은 HEAD 요청을 전송하고 "콘텐츠 형식"응답을 확인 머리글을 사용하여 이미지인지 확인하십시오. 그렇다면 IMG 태그에 클립 보드 텍스트를 붙여 넣어 true를 반환합니다. 그렇지 않은 경우 이미지가 아닌 일반 URL처럼 보이면 A 태그로 래핑합니다. URL이 아닌 경우 일반 붙여 넣기 만 수행합니다.

어쨌든, 확인되는 URL은 분명 이미지이며 FF에서는 정상적으로 작동하지만 기능이 완료되면 xhr.status는 "0"이고 상태는 "오류"입니다. 시간 초과를 10 초로 올리는 것은 도움이되지 않습니다.

curl -i -X HEAD <imageURL> 

나는 또한 내가 성공 대신 전체의 오류 콜백을 사용한다 알고 있지만, 그들은 하나가 작동하지 않습니다 나는 실행할 때 테스트 이미지는 "이미지/JPEG"로 돌아올해야합니다 확인했습니다. 어떤 아이디어?

Answer 1

콘텐츠 스크립트에서 Chris를 알아 냈으므로 도메인 간 XHR을 수행 할 수 없습니다. 당신은 배경, 팝업 또는 심지어 옵션과 같은 확장 페이지에서 그들을해야 할 것입니다.

콘텐츠 스크립트 제한에 대한 자세한 내용을 참조하시기 바랍니다 : 허용 된 대답은 오래된 http://code.google.com/chrome/extensions/xhr.html

Answer 2

매니페스트 파일을 확인하십시오. 확장 프로그램에 해당 URL에 대한 액세스 권한이 있습니까? 그것은 당신의 두 번째 문제 (또는 다른 사람)에 도움이된다면

: 당신처럼 배경 페이지에 요청을 보낼 수 있습니다

chrome.extension.sendRequest({var1: "var1value", var2: "value", etc}, 
function(response) { 
    //Do something once the request is done. 
}); 

변수 response 당신이 원하는 무엇이든 할 수있다. 단순히 성공 또는 거부 문자열 일 수 있습니다. 너까지. 이와

chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) { 
     // Do something here 
     // Once done you can send back all the info via: 
     sendResponse(anything you want here); 

     // and it'll be passed back to your content script. 
}); 

가 다시 콘텐츠 스크립트로 AJAX 요청의 응답을 통과 할 수있는 당신이 그것으로하고 싶었던 무엇 : 당신의 배경 페이지에서

당신은 리스너를 추가 할 수 있습니다.

Answer 3

저는이 문제의 일부를 실제로 풀었습니다. 먼저 Brennan과 내가 어제 언급 한 것처럼 manifest.json에서 권한을 설정해야했습니다.

"permissions": [ 
    "http://*/*", 
    "https://*/*" 
], 

그것은 모든 도메인에 권한을 부여하는 이상적인 건 아니지만 이미지가 모든 도메인에서 호스팅 할 수 있기 때문에, 그것은해야 할 것이다, 나는 XSS 방지해야합니다.

다른 문제는 Chrome이 content_scripts 섹션에서 AJAX 호출을 자동으로하지 못하게 차단한다는 것입니다. 그러나 background_page가 있으면이 제한이 없습니다. 이 페이지는 원하는 AJAX 호출을 할 수 있으며, Chrome은 스크립트가 포트를 열고 해당 배경 페이지로 요청을 전달할 수 있도록하는 API를 가지고 있습니다. 누군가가 XHRProxy이라는 스크립트를 작성하여 적절한 응답 헤더를 얻도록 수정했습니다. 그것은 작동합니다!

이제 문제는 즉시 반환하는 대신 스크립트에서 이벤트 결과가 설정된 호출을 기다리는 방법을 찾는 것입니다.

Answer 4

: http://code.google.com/chrome/extensions/content_scripts.html

그리고 XHR 제한에 대한 자세한 내용은 다음 웹 사이트를 참조하시기 바랍니다.

Content scripts can now make cross-site XMLHttpRequests just like background scripts!

관련된 URL은 매니페스트에 허용 할 필요가 : 또한 같은 표현을 사용할 수 있습니다

{ 
    "name": "My extension", 
    ... 
    "permissions": [ 
    "http://www.google.com/" 
    ], 
    ... 
} 

:

"http://*.google.com/" 
"http://*/" 

보다 일반적인 권한을 얻을 수 있습니다.

Here is the Link to the documentation.