Попытка сделать расширение Chrome, чтобы исчезнуть веб-страницы

Question

Я пытаюсь сделать свое первое расширение Chrome.По сути, идея состоит в том, чтобы создать цветной фильтр, который покрывает каждую страницу.(У меня есть монитор, который не станет темнее, поэтому я хочу наложить полупрозрачный черный фильтр на каждый сайт, который я посещаю.)

Насколько я понимаю, я могу запускать javascript с помощью «сценария содержимого,"со сценарием, выполняющимся на каждой странице.Это мое 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"]
    }
  ]
}

Я хочу сделать что-то вроде этого: http://jsfiddle.net/GM2Z6/14/

Отлично, поэтому я продвинулся так далеко, сделав mystyles.css вот так:

#cover {
    height:100%;
    width:100%;
    background-color:#000;
    display:none;
    position:absolute;
    top:0;
    left:0;
    z-index:99999999;
}​

И мой contentscript.js выглядит следующим образом:

$(function(){
    $('#cover').fadeTo("fast",0.5);
});​

Итак, как мне теперь сделать #cover div наложение поверх страницы?

Answer 1

Несколько вещей ... Как сказал rvmook, вы не включили jquery, и вы также никогда не создавали div на странице.

Ниже приведен код, который работает.Заметьте, что в CSS я изменил несколько вещей ... Положение теперь «фиксировано», иначе ваш div прокручивает страницу и pointer-events:none; позволяет вам щелкнуть через div для элементов под ним.Также теперь используйте опцию «run_at» для скриптов содержимого, чтобы решить, когда запускать скрипт, а не jquery, потому что я не знаю, что за document_end в 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

Похоже, вы не включили jQuery в ваш content_scripts. Даже если веб-сайт, на котором вы вводите свой код, имеет сам jQuery, вы не можете получить к нему доступ с помощью своего Расширения, поэтому его также следует включить в ваш content_scripts.

"content_scripts": [
{
  "matches": ["<all_urls>"],
  "css": ["mystyles.css"],
  "js": ["contentscript.js", "your/path/to/jquery-1.7.1.min.js"]
}