Creating an Ajax Request from a PageMod ContentScriptFile

Question

I create this in a beta builder and I am really lost in how to get ajax call in my contentScriptFile. I want to pull out an ajax request in order to dynamically pull out the database in a script so that I can modify the contents of the page. I searched and searched for apparently the wrong conditions. Help is appreciated! Thanks

main.js

code:

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

code:

 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'); 

old code to shed light on the final goal - the HTTP request does not return anything, even if it works in the browser. Suppose these were permissions issues with third-party ajax tools and were run above using the add-ons request tool.

code:

 /* $.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'); } }); */ 

Answer 1

One of the immediate problems is that mozilla.top.js is being added as content script and trying to use the Request module. You cannot use SDK modules such as a request in the script content, you need to instead execute the request in main.js and then deliver the request data to your content script using employee.port.emit (). The docs describe script messages in detail:

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

An example implementation would look like this:

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

In your script content: you attach the listener to the "got-request" event:

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

Here is a working example for a builder who uses this code - it is very simple, but hopefully helps:

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