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

mixlab

发布于 2018-04-17 15:47:27

8620

发布于 2018-04-17 15:47:27

文章被收录于专栏：MixLab科技+设计实验室MixLab科技+设计实验室

朋友圈都在晒下雪，今天，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 我给微信网页版专门加了个积雪的命令，有兴趣可以给自己想要有积雪效果的网页编写代码。

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

安装拓展体验路径如下：

首先点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择更多工具选项，然后点击扩展程序来启动Chrome浏览器的扩展管理器页面。