jQuery.ajax llamada falla dentro de extensión de Chrome

Question

Estoy portar uno de mis extensiones de Firefox a Chrome, y yo estoy corriendo en un pequeño problema con una consulta de AJAX. El siguiente código funciona bien en la extensión FF, pero falla con un estado de "0" en 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;
}

Esta parte de la extensión comprueba lo que hay en el portapapeles (otro tema Chrome ya he resuelto), y si es una URL de la imagen, se envía una petición HEAD y comprueba la cabecera de respuesta "Content-Type" para estar seguro es una imagen. Si es así, se volverá verdad, pegar el texto del portapapeles en una etiqueta IMG. De lo contrario, si se ve como una URL normal que no es una imagen, se envuelve en una etiqueta A. Si no es una URL, sólo se hace una pasta sin formato.

De todos modos, la url que se comprueba es definitivamente una imagen, y funciona bien en FF, pero en la función completa, xhr.status es "0", y el estado es "error" cuando la función completa. Cambiando el tiempo de espera de 10 segundos no ayuda. He verificado las imágenes de prueba deben volver como "image / jpeg" cuando se ejecuta:

curl -i -X HEAD <imageURL>

también sé que debería usar el éxito y devoluciones de llamada de error en lugar de completo, pero que no funcionan bien. ¿Alguna idea?

Answer 1

A medida que Chris descubierto, en Secuencias de comandos de contenido, puede no hacer ningún XHR entre dominios. Usted tendría que hacerlo en una página de extensión, como fondo, emergente, o incluso opciones para hacerlo.

Para obtener más información sobre la limitación de la escritura de contenido, por favor referirse a: http://code.google.com/chrome/extensions/content_scripts.html

Y para más información sobre la limitación xhr, consulte: http://code.google.com/chrome/extensions/xhr.html

Answer 2

He resuelto parte del problema, en realidad la mayor parte de ella. En primer lugar, como Brennan y dije ayer, que necesitaba para establecer permisos en manifest.json.

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

No es lo ideal para dar permisos a cada dominio, pero ya que las imágenes se pueden alojar de cualquier dominio, que va a tener que hacer, y voy a tener que protegerse contra XSS.

El otro problema es que Chrome bloques de hecho cualquier cosa en la sección content_scripts de hacer llamadas AJAX, en su defecto en silencio. Sin embargo, no hay tal restricción a la BACKGROUND_PAGE, si tiene uno. Esa página puede hacer cualquier llamadas AJAX que quiere, y Chrome tiene una API para permitir que la secuencia de comandos para abrir un puerto y pasar solicitudes en tal página de fondo. Alguien escribió un script llamado XHRProxy como una solución, y lo modificó para obtener la cabecera de la respuesta apropiada. Funciona!

Mi único problema ahora es encontrar la manera de hacer que la espera guión para el resultado de la llamada que se fijará en el evento, en lugar de devolver inmediatamente.

Answer 3

Compruebe el archivo de manifiesto. ¿La extensión tiene permiso para acceder a la url?

Si ayuda a su segundo problema (o cualquier otro): Puede enviar una petición a su página de fondo como:

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

El response variable puede ser lo que quiera que sea. Simplemente puede ser un éxito o negar cadena. Depende de usted.

En su página de fondo se puede añadir un detector:

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

Con esto se puede pasar a la respuesta de su petición AJAX volver a su script contenido y hacer lo que quería hacer con ella allí.

Answer 4

La respuesta aceptada es obsoleta.

guiones de contenido pueden ahora hacer XMLHttpRequests entre sitios al igual que las secuencias de comandos de fondo!

Los referentes URL necesitan ser permitida en el manifiesto:

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

También puede utilizar expresiones como:

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

para obtener permisos más generales.

Aquí está el enlace a la documentación.