如何用浏览器看雪？Chrome扩展开发

朋友圈都在晒下雪，今天，MixLab 教大家如何在屏幕上看雪。

使用 chrome 的扩展，注入下雪的代码到任意网页，如下图：

如何实现的？

chrome 扩展主要的文件是 manifest.json 这个文件。

{  
   "manifest_version": 2,  
   "name": "SnowHere",
    "version": "1.0",
    "description": "by Design-AI-Lab",
    "browser_action": {
        "default_icon": "icon.png",  
        "default_popup": "popup.html"      },  
    "permissions": [  
         "*://*/*","tabs"      ],  
     "content_scripts":[{  
          "js":["jquery.min.js","snowfall.jquery.min.js","app.js"],
          "matches":["<all_urls>"],
          "run_at": "document_idle"    }]}

记住 manifest_version 必须为 2

在 app.js 写入要注入的 js 代码即可实现。

var url=window.location.host;

if (url.match('wx.qq.com')) {  $(document).snowfall({
       collection : '.ng-scope',
       flakeCount :250,
       maxSpeed : 8,
       maxSize : 5});} else {  $(document).snowfall({
       flakeCount : 280,
       maxSpeed : 18,
       maxSize : 6});}

url.match 我给微信网页版专门加了个积雪的命令，有兴趣可以给自己想要有积雪效果的网页编写代码。

源文件很简单，有兴趣下载查看。

安装拓展体验路径如下：

1