Firefox extension inject script before loading any page

Question

I've written an Firefox extension to inject some script and css to all web pages loaded while this extension is installed.

Up to now, everything works fine. As soon I open a new page it loads en the script and css are injected. But what I want is that the extension is loaded before the page.

Example; I'm loading the twitter intent page. With my extension I'm customising this page. Right now I first see the twitter page, then the extension is loaded and my changes to the intent page are implemented.

What I want is the opposite. I first want to load everything from the extension, so as soon as the twitter page loads it is directly visible with my custom changes implemented trough my extension.

Currently I'm using the following lines to implement the scripts/styles. Although I've got the "contentScriptWhen" set to start, this won't fix my problem..

include: '*',
contentScriptFile: [data.url('jq.js'), data.url('js.js')],
contentStyleFile: data.url("css.css"),
contentScriptWhen: 'start',

Answer 1

I've 'solved' this problem. I'm loading the Twitter Intent (TI) page in the background as soon my index page is loaded.

While the TI page is loaded, it closes again. The page is in cache now, next time TI is loaded everything is instant correctly.

You can find more about background loading here: developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs

In this fiddle is shown how I did the trick; FIDDLE

Answer 2

You can also start by preventing the document from getting parsed then on the side fetch the same document, make any modifications on the fetched document and inject it in the page. Here is what I currently use https://stackoverflow.com/a/36097573/6085033