写一个chrome插件让你的codepen下雨

使用chrome插件，让插件往网页内注入代码，让下雨的特效显示在背景层中

:smiling_imp:开始

建立一个 manifest.json ，这个文件是写插件必须建立的规则文件，包涵了注入文件的文件名，资源的文件白名单等等。详细文档

{
  "name": "rain",
  "version": "0.0.1",
  "manifest_version": 2,
  "web_accessible_resources": ["img/*"],
  "content_scripts": [
    {
      "css": ["style.css"],
      "matches": ["http://*/*", "https://*/*"],
      "js": ["index.js"]
    }
  ]
}
复制代码

ok,文件定义完成我们可以开始写代码了。 首先定义一个css样式让我们的canvas背景层永远在最顶部，并且不能响应鼠标事件。

.ouzz__top {
    z-index: 999999999;
    left: 0;
    top: 0;
    mix-blend-mode: multiply;
    position: fixed;
    pointer-events: none;
}
复制代码

然后在js中创建一个canvas标签并设置上面这个css样式

var $canvas = document.createElement("canvas");
$canvas.width = document.body.clientWidth;
$canvas.height = document.body.clientHeight;
$canvas.classList.add("ouzz__top");
document.body.appendChild($canvas);
复制代码

现在你把整个项目添加到chrome插件中，你可以在控制台中看到真的注入了一个canvas节点。当然你现在就有能力在这个canvas中干任意你想做的事情，比如用canvas2d画点什么奇奇怪怪的图形什么的。

:wink:下雨的代码实现

代码是来自 codrops大佬2015年末的项目 令人十分惊叹，在15年末的时候前端就已经玩的这么花哨了，然而我们当时还在jquery的时代，webgl?不存在的。

因为项目作者使用了打包工具，我将里面的源码提取了出来并放在了 index.js 中，省去了各位安装环境编译代码的过程。

这个demo的zip

当然只是做为一个乐子，各位大佬们也可以尽情的修改网页里面的DOM元素。