Trying to make a Chrome extension to fade a webpage - google-chrome

Question

I'm trying to make my first Chrome extension. Basically, the idea is to make a coloured filter that covers every page. (I have a monitor that won't get any darker, so I want to put a translucent black filter over every site I visit.)
From my understanding, I can run javascript by using a "Content script," with the script executing on every page. This is my manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["mystyles.css"],
"js": ["contentscript.js"]
}
]
}
I want to do something like this: http://jsfiddle.net/GM2Z6/14/
Great, so I've gotten that far, by making mystyles.css like this:
#cover {
height:100%;
width:100%;
background-color:#000;
display:none;
position:absolute;
top:0;
left:0;
z-index:99999999;
}​
And I've got my contentscript.js looking like this:
$(function(){
$('#cover').fadeTo("fast",0.5);
});​
So now how do I make my #cover div overlay on top of the page?

Answer 1

A couple of things...As rvmook said, you didnt include jquery and you also never create the div in the page.
Following is some code that works. Notice in the css I changed a couple of things...Position is now "fixed", otherwise your div scrolls with the page and pointer-events:none; allows you to click through the div to the elements below it. Also now rely on the content scripts "run_at" option to decide when to run the script and not jquery, because I dont know what document_end is in jquery.
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["mystyles.css"],
"js": ["jquery-1.7.1.min.js","contentscript.js"] ,
"run_at" : "document_end"
}
]
}
mystyles.css
#cover {
height:100%;
width:100%;
background-color:#000;
display:none;
position:fixed;
top:0;
left:0;
z-index:99999999;
pointer-events:none;
}​
contentscript.js
(function(){
$('<div/>', {
id: 'cover'
}).appendTo(document.documentElement);
$('#cover').fadeTo("fast",0.5);
})();

Answer 2

It seems that you haven't inlcuded jQuery in your content_scripts. Even if the website you're injecting your code in has jQuery itself, you can't access it with your Extension, so that's why it should also be included in your content_scripts.
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["mystyles.css"],
"js": ["contentscript.js", "your/path/to/jquery-1.7.1.min.js"]
}