如何用浏览器看雪?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

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

2

解压下载的文件(百度网盘),保存到系统的一个任意文件夹下。

3

勾选开发者模式选项以后,在该页面就会出现加载正在开发的扩展程序等按钮,点击“加载正在开发的扩展程序”按钮,并选择刚刚解压的文件夹的位置。

链接:

4

任意打开一个网页即可体验,打开微信网页版,会有积雪效果哦~

本文分享自微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏灯塔大数据

别用大数据混淆试听 驳《大数据告诉你,电商会把假货卖给谁》

先看封面贴图,说的大数据与实际的大数据就是这个样子,太形象不过了。 ? 双十一期间看《大数据告诉你,电商会把假货卖给谁》,原文地址(http://mt.so...

38580
来自专栏逸鹏说道

几个比较有意思的JS脚本

1.获取内网和公网真实IP地址(引用地址) 代码太长,见原文链接 2.获得flash版本(在线地址) ? <!DOCTYPE html> <html> <hea...

31470
来自专栏技术博文

可编辑DIV设置光标位置

平时我们使用文本框input, textarea时,我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足,就是不能满足我们插入图片或者其他的一...

41940
来自专栏逸鹏说道

Dapper扩展之~~~Dapper.Contrib

平台之大势何人能挡? 带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4822808.html#skill 上一篇文章...

49750
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

40250
来自专栏菜鸟计划

javascript 基本概念

一、在HTML中使用javascript 1.直接是用<script></script>标签。 2.外部引入 <script type="javascript"...

27530
来自专栏菜鸟计划

webpack学习(三)html-webpack-plugin插件

一、html-webpack-plugin插件 简单创建 HTML 文件,用于服务器访问 例如:我们要为输出文件添加哈希值标记,避免老的不变的文件重新加载,避免...

33570
来自专栏逸鹏说道

only supports an entity with a [Key] or an [ExplicitKey]

Dapper.Contrib:GetAsync<T> only supports an entity with a [Key] or an [ExplicitK...

34460
来自专栏逸鹏说道

视图必须派生自 WebViewPage 或 WebViewPage<TModel>

后端汇总:http://www.cnblogs.com/dunitian/p/4523006.html#efmvc ? 后来发现原来吧web.config给删了...

38370
来自专栏calmound

JavaScript实例---表格隔行变色以及移入鼠标高亮

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>index</title> <style...

39170

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励