Need to use jQuery in content process of Mozilla Firefox

**Gowravaram** · 02-02-2012

I am getting an issue while developing fennec extension. Is there any one who has managed to use jQuery on content process? I tried to load by using loadScriptFrame at overlay process but it not able to extend either window or content global variable. Let me know if you are having any solution for the same. thanks a lot in advance.

**FarhaS** · 02-02-2012

Let me know whether you are using any add-on SDK. If you are having content script then you can load jquery by using following addon script.

Code:

var data = require("self").data;
 
var reddit_panel = require("panel").Panel({
  width: 240,
  height: 320,
  contentURL: "http://www.reddit.com/.mobile?keep_extension=True",
  contentScriptFile: [data.url("jquery-1.4.4.min.js"),
                      data.url("panel.js")]
});
 
reddit_panel.port.on("click", function(url) {
  require("tabs").open(url);
});
 
require("widget").Widget({
  id: "open-reddit-btn",
  label: "Reddit",
  contentURL: "http://www.reddit.com/static/favicon.ico",
  panel: reddit_panel
});

Following is panel.js content script which would intercepts with link clicks

Code:

$(window).click(function (event) {
  var t = event.target;
 
  // Don't intercept the click if it isn't on a link.
  if (t.nodeName != "A")
    return;
 
  // Don't intercept the click if it was on one of the links in the header
  // or next/previous footer, since those links should load in the panel itself.
  if ($(t).parents('#header').length || $(t).parents('.nextprev').length)
    return;
 
  // Intercept the click, passing it to the addon, which will load it in a tab.
  event.stopPropagation();
  event.preventDefault();
  self.port.emit('click', t.toString());
});

**Beatricef** · 02-02-2012

Well Content script requires access to DOM objects in the arbitrary web pages, however this could cause potential security problem. Any malicious page can be redefined as standard functions and properties of DOM objects. In order to deal with content scripts should access the DOM objects through proxy.
The proxy would be based on XRayWrapper. This particular wrapper would give the access to the native values of DOM functions as well as properties even if the scripts has been redefined. Proxy would be transparent to content scripts. content script will access DOM directly.

**Haleema** · 02-02-2012

In case you have loaded number of content scripts the same document can interact with the each other and web content as well. This particular thing will make you to load jQuery and then you have to load your scripts which is making use of jQuery. Content scripts which has been loaded into the different document will not be able to interact with each other.

**DamarisK** · 02-02-2012

You will be able to communicate between content script and page scripts by making use of postmessge(). In the previous version of the SDK global postMessage() function in the content scripts used for communicating between content script and add-on code. You will not be able to make use of usewindow.postMessage(). Rather than you will need to use document.defaultView.postMessage()
Below mentioned is window.addEventListener to listen the message.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <script>
      window.addEventListener("message", function(event) {
        window.alert(event.data);
      }, false);
    </script>
</head>
</html>

Content script can send the message by using

Code:

document.defaultView.postMessage()

var widgets = require("widget");
var tabs = require("tabs");
var data = require("self").data;
 
var widget = widgets.Widget({
  id: "postMessage",
  label: "demonstrate document.defaultView.postMessage",
  contentURL: "http://www.mozilla.org/favicon.ico",
  onClick: function() {
    tabs.activeTab.attach({
      contentScript: "document.defaultView.postMessage('hi there!', '*');"
    });
  }
});
 
tabs.open(data.url("listener.html"));

**AliyaK** · 02-02-2012

if you wanted to access e underlying DOM then you can use global unsafeWindow object. But personally I don’t recommend to make use of unsafeWindow it is same as that of Greasemonkey’s unsafeWindow. Also it is not having support for any API and it could be about to removed or change the future version of SDK.