Firefox add-on to add a .css and a .js file to a page

Question

I want to make a Firefox add-on that adds a custom CSS and JavaScript file to the pages on http://*.example.com. Doing it with Chrome Extensions is pretty simple, but Firefox add-ons are a little bit confusing. What is the most simple way to do that? How can I make that add-on, step by step?

Answer 1

You should use the page-mod api, here is the documentation ( including simple code examples ):

https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod

In particular, you add js files using the contentScriptFile option, and css files using the contentStyleFile option. Here's a very simple example:

var data = require('sdk/self').data;

require('sdk/page-mod').PageMod({
  include: ["*"],
  contentScriptFile: [data.url('script.js')],
  contentScriptFile: [data.url('style.css')],
  attachTo: ["existing", "top"]
}); 

This code should be in ./lib/main.js in your add-on project directory and the files script.js and style.css should be located in the ./data/ sub-folder of your add-on project directory.