2009-12-23 28 views
9

我正在將我的一個Firefox擴展移植到Chrome,並且遇到了AJAX查詢的一個小問題。以下代碼在FF擴展中正常工作,但在Chrome中失敗,狀態爲「0」。Chrome擴展內部的jQuery.ajax調用失敗

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

延長這一特定部分檢查什麼的剪貼板上(其他Chrome的問題我已經解決了),如果它是一個圖片的網址,它發送一個HEAD請求,並檢查「的Content-Type」響應頭部以確保它是一個圖像。如果是這樣,它會返回true,將剪貼板文本粘貼到IMG標籤中。否則,如果它看起來像一個不是圖像的普通URL,它將它包裝在A標籤中。如果它不是一個URL,它只是做一個簡單的粘貼。

無論如何,被檢查的URL絕對是一個圖像,並且在FF中工作正常,但在完整函數中,xhr.status爲「0」,當函數完成時狀態爲「error」。將超時時間設置爲10秒無助。我已經驗證運行時,測試圖像應該回來「圖像/ JPEG」:

curl -i -X HEAD <imageURL> 

我也知道我應該用成功和錯誤回調,而不是完整的,但他們不工作的。有任何想法嗎?

+0

它可能是所有擴展的AJAX請求的安全限制嗎? – 2009-12-23 20:43:47

+0

不應'返回isImage;'成爲完整回調的一部分? – pixeline 2009-12-23 20:45:46

+0

@pixieline:可以。這只是爲了有一個返回點,但它甚至沒有達到那麼遠,因爲switch(status)是「錯誤」,因此分支從不被調用。 – 2009-12-23 20:47:35

回答

11

當您在內容腳本中計算出Chris時,您無法執行任何跨域XHR。您必須在擴展頁面(如「背景」,「彈出窗口」或甚至「選項」)中執行操作。

有關內容腳本限制的詳細信息,請參閱: http://code.google.com/chrome/extensions/content_scripts.html

以及對於XHR限制的詳細信息,請參閱: http://code.google.com/chrome/extensions/xhr.html

+6

對於任何人在這個頁面上磕磕絆絆,這是[對於Chrome 13+不是如此](http://developer.chrome.com/extensions/whats_new.html#13) – Arithmomaniac 2013-04-22 22:32:20

5

檢查您的清單文件。擴展程序是否有權訪問該網址?

如果它有助於你的第二個問題(或其他人): 您可以發送一個請求,你的背景頁面,如:

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請求返回到您的內容腳本的響應,做任何你想用它做在那裏。

+0

這是問題之一。另一個是content_scripts不能發送AJAX請求。但是,我可以在自己的答案中解釋背景頁面。 – 2009-12-24 15:01:10

5

我已經解決了部分問題,實際上大部分都是這樣。首先,正如Brennan和我昨天提到的,我需要在manifest.json中設置權限。

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

這不是理想的授予權限到各個領域,但因爲圖像可以從任何站點上託管,其將不得不做,我會要警惕XSS。

另一個問題是,Chrome確實會阻止content_scripts部分中的任何內容發出AJAX調用,並以靜默方式失敗。但是,如果你有一個background_page,那就沒有這種限制。該頁面可以進行任何需要的AJAX調用,並且Chrome具有API以允許您的腳本打開端口並將請求傳遞到該背景頁面。有人寫了一個名爲XHRProxy的腳本作爲解決方法,我修改它以獲取適當的響應頭。有用!

我現在唯一的問題是搞清楚如何讓腳本等待在事件中設置的調用結果,而不是立即返回。

+0

嘿,這不再成立,內容腳本現在可以製作XML請求,請參閱我的答案。 – 2013-09-11 16:18:51