jQuery.ajax调用浏览器扩展程序中失败

Question

我移植我的Firefox扩展到Chrome浏览器中的一个，和我正在与一个AJAX查询有点问题。下面的代码工作在FF延伸良好，但失败的“0”在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;
}

延长这一特定部分检查什么的剪贴板上（其他Chrome的问题我已经解决了），如果它是一个图片的网址，它发送一个HEAD请求，并检查“的Content-Type”响应报头，以确保这是一个图像。如果是的话，它会返回true，粘贴在IMG标签中的剪贴板中的文本。否则，如果它看起来像一个正常的URL，这不是一个图像，它把它封装在一个的标签。如果它不是一个URL，它只是做一个简单的粘贴。

总之，被检查的URL绝对是一个图像，而在FF工作正常，但在功能齐全，xhr.status是“0”，状态为“错误”功能完成时。加大了超时10秒没有帮助。我已经验证运行时，测试图像应该回来“图像/ JPEG”：

curl -i -X HEAD <imageURL>

我也知道我应该用成功和错误回调，而不是完整的，但他们不工作的。任何想法？

Answer 1

当你想通了克里斯，在内容脚本，你不能做任何跨域XHR。你将不得不做他们在扩展页面，如背景，弹出窗口，甚至选择这样做。

有关关于内容脚本限制的详细信息，请参阅： http://code.google.com/chrome/extensions/content_scripts.html

关于XHR限制和更多信息，请参考： http://code.google.com/chrome/extensions/xhr.html

Answer 2

我已经解决了问题的一部分，实际上大部分。首先，如Brennan和我昨天提到的，我所需要的manifest.json来设置权限。

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

这不是理想的授予权限到各个领域，但因为图像可以从任何站点上托管，其将不得不做，我会要警惕XSS。

另一个问题是，自作出AJAX的content_scripts部分的Chrome的确块什么叫，静静地失败。然而，在BACKGROUND_PAGE没有这样的限制，如果你有一个。该页面可以让任何AJAX调用就是了，而Chrome有一个API，允许你的脚本打开一个端口，并请求传递给后台页面。有人写了一个名为 XHRProxy 作为一种解决方法脚本，我修改了它才能获得相应的响应头。它的工作原理！

我唯一的问题现在搞清楚如何使脚本等待调用的结果在事件被设定，而不是仅仅立即返回。

Answer 3

检查清单文件。是否延长有权限访问该网址是什么？

如果它有助于你的第二个问题（或其他人）： 您可以发送一个请求，你的背景页面，如：

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 4

接受的答案是过时的。

内容脚本现在可以跨站点XMLHttpRequest的就像后台脚本！

在有关的URL需要在清单中被允许：

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

您也可以使用像表达式：

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

，获得更多常规权限。

这里是链接到的文档。