来自 Firefox SDK（跨域）的 ContentScript 中的 XMLHttpRequest答案

【问题标题】：XMLHttpRequest in a ContentScript from the Firefox SDK (Cross-Domain)来自 Firefox SDK（跨域）的 ContentScript 中的 XMLHttpRequest
【发布时间】：2013-08-12 09:17:59
【问题描述】：

我正在将 chrome 扩展程序移植到 firefox，并希望保留尽可能多的代码。我正在使用 sdk，而且我是 JavaScript 新手，所以如果这只是一个小错误，请多多包涵；）

我需要通过内容脚本中的几个 XMLHttpRequest 获取一些东西。

做事的“firefox 方式”是使用 sdk-request-api 并通过主脚本和内容脚本之间的消息（如 so）工作。除了在整个插件中实现这一点对我来说意味着很多工作之外，我还需要获取二进制数据，这似乎是不可能的。

解决方法已记录在 here。我宁愿避免这种情况，因为我想我在某处读到它现在是一个测试版功能，而且它似乎很“变通”。

理想情况下，我想以this 的方式实现它。在即将到来的 Firefox 24 中，应该可以允许内容脚本访问某些域。因此，我现在正在使用 Firefox Aurora。我将以下代码添加到我的 package.json：

"permissions": {
      "cross-domain-content": ["http://mozilla.org"]
 }

我的 main.js 在单击按钮时创建一个面板并将脚本加载到其中：

var testPanel = require("sdk/panel").Panel({
                contentURL: data.url("pages/background.html"),
                contentScriptFile:   [data.url("util/jquery-1.8.2.min.js"), data.url("pages/xhrTest.js")]
            })
testPanel.show();

这是我的 xhrTest.js：

var xhr = new XMLHttpRequest();
xhr.open("GET","http://mozilla.org",true);
xhr.onerror = function () {
   console.log("Error");
};
xhr.onload = function () {
   console.log("loaded");
}

xhr.send();

在调试时，它从状态 2 跳转到状态 4，响应为空，并调用“onerror”。状态为 0，statustext 为空，我没有看到任何其他指示出了什么问题。现在我不知道这是否仍然是同源策略阻止我，还是我做错了什么？

如果能得到任何帮助，我将不胜感激：)

提前致谢，
法比

【问题讨论】：

标签： xmlhttprequest cross-domain firefox-addon-sdk content-script

【解决方案1】：

嗯，我真的看不出有明显的错误。这是一个基于文档的示例插件确实工作，至少它在 Firefox 24 Beta 中对我有用：

Main.js：

// main.js
var data = require("sdk/self").data;

var panel = require("sdk/panel").Panel({
  height: 250,
  contentURL: data.url("panel.html"),
  contentScriptFile: data.url("panel-script.js")
});

panel.on("show", function(){
  panel.port.emit("show");
});

require("sdk/widget").Widget({
  id: "test-widget",
  label: "Test-Widget",
  contentURL: "http://www.mozilla.org/favicon.ico",
  panel: panel
});

面板.html：

<!doctype HTML>
<html>
<meta charset="utf-8">
  <head></head>
  <body>
    <pre id="forecast_summary"></pre>
  </body>
</html>

内容脚本：

// panel-script.js
var url = "https://hn-test.firebaseio.com/articles/e5b10c82600b51732af584583a7f57c4a7c01bff.json";

self.port.on("show", function () {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.onload = function () {
    var element = document.getElementById("forecast_summary");
    // formatting
    var pretty = JSON.stringify(JSON.parse(request.responseText), null, '  ');
    element.textContent = pretty;
  };
  request.send();
});

包.json：

{
  "name": "jp-crossdomain-xhr",
  "fullName": "jp-crossdomain-xhr",
  "id": "jid1-B2RaQxOBKox8wA",
  "description": "a basic add-on",
  "author": "",
  "license": "MPL 2.0",
  "version": "0.1",
  "permissions": {
    "cross-domain-content": ["https://hn-test.firebaseio.com"]
  }
}

Github Repo

【讨论】：

您好，感谢您的回复！我克隆了你的 repo，它在 FF 23.0 和 25.0a2 中都有效。有趣的是，如果我将 package.json 中的字符串更改为不同的字符串（“asdf”），23.0 仍然有效，25 会抛出“URI 格式错误”。如果我在 package.json 中放置一个有效的 URL ("mozilla.org")，两者都会成功提取数据。但是如果我在 panel-script 中更改 URL到“mozilla.org”（package.json中的相同），请求退出并报错。为什么？因为服务器？23.0不应该根本无法执行请求? 并且 25.0a2 仅在域匹配的情况下？
我不知道 - 我的示例与匹配的 url 一起工作，如果您将 url 更改为不匹配则不起作用。