jQuery.ajax appel échoue à l'intérieur de l'extension Chrome

Question

Je portage un de mes extensions de Firefox à Chrome, et je suis en cours d'exécution dans un petit problème avec une requête AJAX. Le code suivant fonctionne très bien dans l'extension FF, mais échoue avec un statut de « 0 » dans Chrome.

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

Cette partie de l'extension vérifie ce qui est le presse-papiers (un autre problème Chrome je l'ai déjà résolu), et si elle est une URL d'image, il envoie une requête HEAD et vérifie l'en-tête de réponse « Content-Type » pour être sûr c'est une image. Si oui, il va revenir vrai, coller le texte du presse-papiers dans une balise IMG. Dans le cas contraire, si elle ressemble à une URL normale qui n'est pas une image, il l'enveloppe dans une Une étiquette. Si ce n'est pas une URL, il fait juste une pâte ordinaire.

Quoi qu'il en soit, l'URL en cours de vérification est sans aucun doute une image, et fonctionne très bien dans FF, mais la fonction complète, xhr.status est « 0 », et l'état est « erreur » lorsque la fonction est terminée. Upping le délai de 10 secondes ne permet pas. Je l'ai vérifié les images de test devraient revenir comme « image / jpeg » lors de l'exécution:

curl -i -X HEAD <imageURL>

Je sais aussi que je devrais utiliser le succès et callbacks d'erreur au lieu de complet, mais ils ne fonctionnent pas non plus. Toutes les idées?

Answer 1

Comme vous avez compris Chris, dans les scripts de contenu, vous ne pouvez pas faire des requêtes XHR inter-domaines. Vous auriez à les faire dans une page d'extension tels que le contexte, Popup, ou même des options pour le faire.

Pour plus d'informations concernant la limitation du script de contenu, s'il vous plaît se référer à: http://code.google.com/chrome/extensions/content_scripts.html

Pour plus d'informations concernant la limitation de XHR, s'il vous plaît se référer à: http://code.google.com/chrome/extensions/xhr.html

Answer 2

Je l'ai résolu une partie du problème, en fait la plupart. Tout d'abord, comme je l'ai mentionné Brennan et hier, je devais définir des autorisations dans manifest.json.

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

Il est pas idéal pour donner des autorisations à tous les domaines, mais étant donné que les images peuvent être hébergées de tout domaine, il faudra le faire, et je vais devoir se prémunir contre XSS.

L'autre problème est que Chrome en effet bloque quoi que ce soit dans la section content_scripts de faire des appels AJAX, à défaut en silence. Cependant, il n'y a pas de restriction à la background_page, si vous en avez un. Cette page peut faire des appels AJAX qu'il veut, et Chrome a une API pour permettre à votre script pour ouvrir un port et passer des demandes à cette page d'arrière-plan. Quelqu'un a écrit un script appelé XHRProxy comme solution de contournement, et je l'ai modifié pour obtenir l'en-tête de réponse appropriée. Il fonctionne!

Mon seul problème est maintenant de trouver comment faire le script attendre le résultat de l'appel à régler en cas, au lieu de simplement revenir immédiatement.

Answer 3

Vérifiez votre fichier manifeste. Est-ce que l'extension a l'autorisation d'accéder à cette URL?

Si elle aide à votre deuxième problème (ou quelqu'un d'autre): Vous pouvez envoyer une demande à votre page d'arrière-plan comme:

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

Le response variable peut être tout ce que vous voulez qu'il soit. Il peut simplement être un succès ou refuser chaîne. Jusqu'à vous.

Sur votre page d'arrière-plan, vous pouvez ajouter un écouteur:

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

Avec cela, vous pouvez passer la réponse de votre requête AJAX à votre script de contenu et faire ce que vous vouliez faire avec il.

Answer 4

La réponse acceptée est pas à jour.

scripts de contenu peuvent maintenant faire XMLHttpRequests cross-site comme des scripts d'arrière-plan!

Les URL concernant doivent être autorisés dans le manifeste:

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

Vous pouvez également utiliser des expressions telles que:

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

pour obtenir des autorisations plus générales.

Voici le lien vers la documentation.