寫一個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