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，因为我不知道jquery中的document_end是什么。
的的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

您似乎没有在content_scripts中包含jQuery。即使您注入代码的网站本身也有jQuery，您也无法通过扩展程序访问它，因此它也应该包含在您的content_scripts中。

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

尝试制作Chrome扩展程序以淡化网页

2 个答案: