寫一個chrome外掛讓你的codepen下雨

ouzz發表於2018-07-28
Chrome

老規矩先放效果圖

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

相關文章