如何制作一个简单的firefox插件，该插件仅在每个新页面上执行独立的JS脚本？

Question

I'm trying to make a simple firefox add-on, executing a simple stand-alone JS-script on every new page (say, just a simple alert after page loaded).

First, I've tried add-on sdk. It have been installed successfully, run tests, but was not able to execute even examples from any tutorial, so i tried to try XUL.

I downloaded 'xulschoolhello.xpi', unpacked it, modified content/browserOverlay.xul to this:

<?xml version="1.0"?>    

<!DOCTYPE overlay SYSTEM
  "chrome://xulschoolhello/locale/browserOverlay.dtd">

<overlay id="xulschoolhello-browser-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script type="application/x-javascript"
    src="chrome://xulschoolhello/content/browserOverlay.js" />
</overlay>    

and content/browserOverlay.js to this just to see if something happens:

window.alert(123)    

but nothing happens after zip packing, installation and rebooting.

I'm quiet new to firefox extensions, so thanks for any help.

---

UPD.

I tried to make a very simple bootstrap.js :

var WindowListener = {
    onOpenWindow: function(window) {
        window.alert(123)
    }
}

function startup(data, reason) {
    var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
    .getService(Components.interfaces.nsIWindowMediator);

    wm.addListener(WindowListener);
}

function shutdown(data, reason) {}
function install(data, reason) {}
function uninstall(data, reason) {}

But it doestn alert. What am i doing wrong here?

Answer 1

This is a fully working bootstap addon that runs javascript everytime a url matching hostPatern of bing.com is loaded. Download the xpi from this gist here and install it to see it working: https://gist.github.com/Noitidart/9287185

If you want to use this for yourself, then just edit the addDiv and removeDiv functions on the js you want to run. And to control which site edit hostPattern global var and decide if you want to listen to frames by setting global var of ignoreFrames .

To accomplish this with addon-sdk you do it like this:

var pageMod = require("page-mod");
const data = require("self").data;


exports.main = function() {
  pageMod.PageMod({ 
    include: ["https://www.bing.com/*","http://www.google.com/*"],
    contentScriptWhen: 'ready',
    /*contentScriptFile: [data.url("jquery.js"),data.url("script.js")],*/
    onAttach: function(worker) {
       console.log('loaded a page of interest');
    }
});

I'm not too familiar with addon-sdk like i dont know how to set up the environment, but i heard once you get it setup its pretty simple. As you can see by comparing the amount of code. But in the bootstrap version you have fine control over everything thats why I prefer bootstrap, and most of the codes are cookie-cutter copy and paste.