IncludeCSS not working on IE

Question

I want to create a browserAction on my extension and when I click on the browserAction's icon open an options page (similar what we can do in chrome). I created the code to do what I am describing, and when I click on the icon on FF, all works fine and the page style looks well. On IE11 instead, when I click on the icon, the page is showed without any style.

I uploaded to my resources, all the files I needed, my options.html, css/style.css and my images. Here is my code...

And my background.js looks like this:

appAPI.ready(function($) {

  // Sets the initial browser icon
  appAPI.browserAction.setResourceIcon('48x48.png');

  // Sets the tooltip for the button
  appAPI.browserAction.setTitle('My title');

  // Sets the initial onClick event handler for the button
  appAPI.browserAction.onClick(function(){
  appAPI.openURL({
                resourcePath: "options.html",
                where: "tab",
                focus: true
            });
  });
});

and my extension.js like this:

if (document.title == "My options page title") {
  appAPI.resources.includeCSS('css/style.css');
}

The code above, check if it is the page I want based on its title (it is not a nice way, I know, but I am testing right now... if you have some advice about that, I will appreciate too)

What am I doing wrong?

@Crossrider support: my app id is 81180

Thanks for your help

Answer 1

The options.html page runs in an isolated context (i.e. extension.js is not guaranteed to run on it on all browsers) and hence you should embed the CSS in the HTML page.

[Disclosure: I am a Crossrider employee]