Inject CSS in firefox add on sdk

Question

I failed to inject CSS in firefox extension. Here is my code.

var tbb = require('toolbarbutton').ToolbarButton({
  id: 'button',
  label: 'us-button',
  image: self.data.url('img/on.png'),
  onCommand: function () {

    tabs.activeTab.attach ({

        contentScriptFile: [
            self.data.url('jquery/jquery.min.js'),
            self.data.url('jquery/jquery-ui.js'),
            self.data.url('recuperation.js'),
            self.data.url('dialog.js')
      ],
      contentStyleFile: self.data.url('jquery/jquery-ui.css'),

I use toolbar buttons by Erik Vold. contentStyleFile doesn't seem to work. When I click to the button, the JQuery dialog appears but without the css file.

Answer 1

You could get away with using a PageMod which would bring in the style sheet you want and can also inject the JavaScript.

Something like this could work:

var pm = require("sdk/page-mod").PageMod({
  include: tabs.activeTab.url,
  attachTo: ["existing", "top"],
  contentScriptFile: [
    self.data.url('jquery/jquery.min.js'),
    self.data.url('jquery/jquery-ui.js'),
    self.data.url('recuperation.js'),
    self.data.url('dialog.js')
  ],
  contentStyleFile: self.data.url('jquery/jquery-ui.css')
});

Then later you'll want to destroy this PageMod when you're done with it so they aren't just hanging around attached to old pages.

pm.destroy();