从 PageMod ContentScriptFile 发出 Ajax 请求答案

【问题标题】：Making Ajax Request From PageMod ContentScriptFile从 PageMod ContentScriptFile 发出 Ajax 请求
【发布时间】：2012-06-03 06:24:30
【问题描述】：

我正在 beta builder 中构建它，我真的很不知道如何在我的 contentScriptFile 中进行 ajax 调用。我想拉一个 ajax 请求以动态地将数据拉回脚本，以便我可以更改页面内容。我一直在搜索和搜索，显然是错误的术语。帮助表示赞赏！谢谢

main.js

代码：

exports.main = function() {};
var data = require("self").data;
var pageMod = require("page-mod");
pageMod.PageMod({
    include: "http://www.mozilla.org/*",
    contentScriptWhen: 'ready',
    contentScriptFile: [
        data.url('jquery.1.7.1.js'),
        data.url('common.js'),
        data.url("mozilla.top.js")
    ]
})

mozilla.top.js

代码：

var qs = parseQS();
var foo= qs['string'];
var Request = require('request').Request;

Request({
  url: "http://www.myremotepage.org?q="+foo,
  onComplete: function (response) {
    alert(response);
  }
}).get();
alert('test');

阐明最终目标的旧代码 - http 请求不返回任何内容，即使它在浏览器中工作。假设这是第 3 方 ajax 工具的权限问题，并开始使用附加请求工具。

代码：

/*
$.ajax({
    url: 'http://www.myremotepage.org?q='+foo,
    data: {q:strSearchQuery},
    dataType: 'json',
    success: function(data) {
        var div = $("<div style='background-color: #ececec;'><h2 style='text-align: right; font-size: 11px; color: #666;'>Test</h2><ul id='ptcid'></ul></div>");
        alert(data.length);
        for(var i = 0; i < data.length; ++i)
        {
            alert('test');
            div.find('ul').append('<li></li>');
            div.find('ul li:last').append('<h3>' + data[i].header+ '</h3>');
            div.find('ul li:last').append('<div>'+data[i].body+'</div>');
            div.find('ul li:last').append('<div>' + data[i].footer + '</div>');
        }
        div.insertBefore('#header');
    }
});
*/

【问题讨论】：

jsonp callback error 的可能重复项。至少，我的回答也适用于你的问题。
所以请求会在 main.js 中，而回调会在 mozilla.top.js 中？请求如何知道要等到 pagemod 准备好？文档还说不要使用不安全的窗口-因此必须有更好更正确的方法。

标签： javascript firefox-addon firefox-addon-sdk

【解决方案1】：

您遇到的一个直接问题是 mozilla.top.js 作为内容脚本添加，并尝试使用请求模块。您不能在内容脚本中使用诸如 request 等 SDK 模块，您需要改为在 main.js 中发出请求，然后使用 worker.port.emit() 将请求数据传递到您的内容脚本中。文档详细介绍了内容脚本通信：

https://addons.mozilla.org/en-US/developers/docs/sdk/1.4/dev-guide/addon-development/content-scripts/using-port.html

示例实现如下所示：

var pm = require("page-mod").PageMod({
    include: [page_url],
    contentScriptFile: [data.url('jquery.min.js'), data.url('panel.js')],
    onAttach: function(worker) {
        Request({
            url: "http://dl.dropbox.com/u/1212936/test.json",
            onComplete: function (response) {
                var parsed = JSON.parse(response.text);
                worker.port.emit('got-request', parsed);
            }
        }).get();
    }
});

在您的内容脚本中：您可以将侦听器附加到 'got-request' 事件：

self.port.on('got-request', function(data) {
    console.log(data);
    $('#data').html(pp(data));
});

这是一个使用此代码的构建器的工作示例 - 它非常非常简单，但希望会有所帮助：

https://builder.addons.mozilla.org/addon/1034982/latest/

【讨论】：