How do you use firefox Extensions to change CSS of a web site?

I'm looking to create an extension for personal and possibly personal friend usage as well that simply changes a few colors that are displayed on a website I visit.

I would like to know how to edit or inject CSS code to this website so that the colors used in the website are what I would like them to be when I view the page. Mind you, this is of course just in my browser or in another firefox browser using my extension.

Solution

I think you are looking for how to inject the style to a webpage using Firefox extension. You can try this way:

pageMod.PageMod( {
  include: '*',
  contentStyleFile: [
    data.url( 'style1.css' ),
    data.url( 'style2.css' )
  ]
})

For more information please refer: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod