Page CSS is not changed, what is not working? - firefox

Question

I am building a firefox addon through the Mozilla Addon Builder https://builder.addons.mozilla.org
I'm starting really basic, I figure it doesn't get any more simple than changing google.com to red. I made the css change the body, html, and divs and added important, so I could be sure that if the stylesheet displays, it will change the background red, and will overwrite the current css.
However, when I activate it (through the testing button which installs the addon), nothing happens. The CSS is not injected into the page.
Here is what the extension looks like:
Here is the code:
main.js
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.google.com/*",
contentStyleFile: data.url("data/style.css")
});
style.css
html, body, div {
background: red !important;
}
I also tried using the following urls, all which did not work either:
http://google.com/*
https://google.com/*
http://www.google.com/*
https://www.google.com/*
http://google.com/
https://google.com/
http://www.google.com/
https://www.google.com/
I also tried changing the following locations to style.css, which did not make any difference either:
style.css
data/style.css
../data/style.css
I also tried removing the sdk/ from the data and pagemod variables, but that did not work either.
Why is it not working and how can I fix it?

Answer 1

Match patterns contain only one *.
The pattern "*.google.com" matches all the Google url's in your list. Match pattern can also be a regular expression. You can match http://google.ie and all the other google.*'s with
pageMod.PageMod({
include: /.*\/(\/\w*\.)?google\.[A-Za-z]{2,3}\/.*/,
contentStyleFile: data.url("style.css")
});