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

老规矩先放效果图

😔原理

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

😈开始

创建一个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画点什么奇奇怪怪的图形什么的。

😉下雨的代码实现

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

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

这个demo的zip

固然只是作为一个乐子，各位大佬们也能够尽情的修改网页里面的DOM元素。

🤓最后

：）

喜欢酷炫交互和动画的大佬加加个人微信，咱们一块儿探讨一下视觉

wechat: ouzz413