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);

})();