Firefox plugin that modify page DOM

Question

I'm working on a Firefox sidebar plugin, using Jetpack, able to interact with the browser contents, in particular my goal is to be able from the plugin to select the web page DOM objects and collect informations from the page inside my plugin.

My main point is that I would like to access to the web page from a script that is not directly inside the plugin itself:

the plugin may load an external service (from my server) and may access to the web browser page DOM.

This due the fact I would like to separate the sidebar-firefox plugin from the real business logic, in order to change that without releasing another plugin...

Is it possible? And, if yes, how?

Answer 1

You can attach a worker to any new tab such as: main.js:

var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: "*",
  contentScriptWhen: 'ready',
  contentScriptFile: [
    data.url("jquery.min.js"),
    data.url("script.js")
  ]
});

The above code just attaches jquery and you script.js to any page. You can find more options about attaching scripts here. Note: the script.js and the jquery.min.js should be in the ./data/ folder of the extension.

Now, we have the script.js running on every page. How we can execute code from another server?

You can use the jQuery.getScript() to achieve that.

For example in your script.js:

var url = "https://code.jquery.com/color/jquery.color.js";
$.getScript( url, function() {
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
});

You can modify the script.js to your own needs.