從PageMod ContentScriptFile發出Ajax請求

我正在測試版生成器中構建此應用程序，我真的失去了如何讓我的contentScriptFile內發生ajax調用。我想拉動ajax請求動態地將數據綁定到腳本中，這樣我就可以改變頁面內容。我一直在尋找和尋找，顯然是錯誤的。幫助表示讚賞！由於從PageMod ContentScriptFile發出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請求即使它在瀏覽器中工作也不會返回任何內容。假設它是第三方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'); 
    } 
}); 
*/

來源

2012-01-24 user550574

的可能的複製[JSONP回調錯誤]（http://stackoverflow.com/questions/8961091/jsonp-callback-error）。至少，我的答案也適用於你的問題。 –

所以請求將在主要部分 - main.js和回調將在mozilla.top.js？請求知道如何等待，直到pagemod準備好了？另外文檔說不使用不安全的窗口 - 所以必須有更好更正確的方法。 – user550574

一個你有直接的問題是，mozilla.top.js添加爲內容腳本，並嘗試使用請求模塊。您不能在內容腳本中使用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(); 
    } 
});

在您的內容腳本：你會附加一個監聽器「獲得請求「事件：

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

下面是一個使用此代碼生成器上工作的例子 - 這是非常非常簡單的，但希望可以幫助：

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

來源

2012-01-25 01:14:31 canuckistani

從PageMod ContentScriptFile發出Ajax請求

回答

相關問題