5

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?

vahidseo
  • 371
  • 1
  • 3
  • 16
  • 1
    For the css part: http://stackoverflow.com/questions/8373678/inject-a-css-file-into-a-webpage-via-firefox-extension – juvian May 10 '14 at 21:37

1 Answers1

4

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.

therealjeffg
  • 5,790
  • 1
  • 23
  • 24