Chrome扩展,应用开发学习笔记之2---恶搞百度一下
Chrome扩展,应用开发学习笔记之2
恶搞百度一下
前面我们介绍了一个最简单的chrome扩展时钟,如今我来介绍一下一个恶搞百度一下的chrome扩展程序。
前面说过,manifest.json文件是用来描写叙述这个扩展的,是整个扩展的入口,同一时候也是告诉chrome怎么处理这个扩展。
恶搞百度一下:
以下我们来编写一个恶搞百度一下的扩展程序,希望从这个实例中,对于chrome拓展有一个更好的认识。先看看这个拓展的效果,例如以下图:
从图中我们能够猜到,其功能就是让你无法点击百度一下那个button。
先新建一个目录,取名“egao_baidu”(这个名字任意能够)。然后在目录中新建一个menifest.json的文件
以下看一下menifest.json文件的内容。
{
"manifest_version": 2,
"name": "永远点不到的搜索button",
"version": "1.0",
"description": "让你永远也点击不到baidu的搜索button",
"content_scripts": [
{
"matches": ["*://www.baidu.com/"], //这里匹配随意的包括://www.baidu.com/,意思是当訪问的页面url匹配时,以下的脚本文件就会自己主动运行
"js": ["js/haha.js"] // 这里的脚本文件是haha.js
}
]
}
先看一下百度一下html源文件的一些信息:
从源文件的内容上看,百度一下的id是su,看以下haha.js怎样使用它
从上面的manifest.json文件内容看,主要吸引人的部分是haha.js。来看一下这个文件的内容。
function btn_move(el, mouseLeft, mouseTop){
var leftRnd = (Math.random()-0.5)*20;
var topRnd = (Math.random()-0.5)*20;
var btnLeft = mouseLeft+(leftRnd>0?100:-100)+leftRnd;
var btnTop = mouseTop+(topRnd>0?30:-30)+topRnd;
btnLeft = btnLeft<100?(btnLeft+window.innerWidth-200):(btnLeft>window.innerWidth-100?btnLeft-window.innerWidth+200:btnLeft);
btnTop = btnTop<100?( btnTop+window.innerHeight-200):(btnTop>window.innerHeight-100?btnTop-window.innerHeight+200:btnTop);
//随机生成一些数,然后简单地推断一下位置的信息,不要超出窗体显示范围。 el.style.position = 'fixed';
el.style.left = btnLeft+'px';
el.style.top = btnTop+'px';
} function over_btn(e){
if(!e){
e = window.event;
}
btn_move(this, e.clientX, e.clientY);
} document.getElementById('su').onmouseover = over_btn; // 从源文件里的信息 百度一下 button的 id 是su,通过它获取button,设置鼠标移至button上的反应
好了,这个恶搞百度一下扩展的内容介绍完成,完整的代码能够从这里获取。https://github.com/ZHONGHuanGit/Chrome_extensions_example/tree/master/egao_baidu
扩展安装方式和前面一篇介绍的一样。能够看这里http://blog.csdn.net/zhonghuan1992/article/details/40269647
參考资料:
Chrome扩展及应用开发 (PS:非常赞赏该作者的人格,不仅书籍共享,而且将全部捐款奉献给壹基金。献上购买电子版的地址:http://www.ituring.com.cn/book/1472)
Chrome扩展,应用开发学习笔记之2---恶搞百度一下的更多相关文章
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- Rest API 开发 学习笔记(转)
Rest API 开发 学习笔记 概述 REST 从资源的角度来观察整个网络,分布在各处的资源由URI确定,而客户端的应用通过URI来获取资源的表示方式.获得这些表徵致使这些应用程序转变了其状态.随着 ...
- 步步为营 SharePoint 开发学习笔记系列总结
转:http://www.cnblogs.com/springyangwc/archive/2011/08/03/2126763.html 概要 为时20多天的sharepoint开发学习笔记系列终于 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址
驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址 最近重新看了乾龙_Heron的<ARM 上电启动及 Uboot 代码分析>(下简称<代码分析>) ...
- android开发学习笔记000
使用书籍:<疯狂android讲义>——李刚著,2011年7月出版 虽然现在已2014,可我挑来跳去,还是以这本书开始我的android之旅吧. “疯狂源自梦想,技术成就辉煌.” 让我这个 ...
- 高性能Cordova App开发学习笔记
高性能Cordova App开发学习笔记 文件结构 添加插件 构建准备 各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...
- Kinect开发学习笔记之(一)Kinect介绍和应用
Kinect开发学习笔记之(一)Kinect介绍和应用 zouxy09@qq.com http://blog.csdn.net/zouxy09 一.Kinect简单介绍 Kinectfor Xbox ...
- ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
随机推荐
- css3-11 如何让html中的不规则单词折行
css3-11 如何让html中的不规则单词折行 一.总结 一句话总结:用word-wrap属性:word-wrap:break-word; 1.word-break和word-wrap的区别? 推荐 ...
- angular表单经验分享
原文 https://www.jianshu.com/p/af359bd04f32 大纲 1.表单的名字不可以和传入的值的名字相同 2.在模板驱动表单的时候要使用angular表单的验证功能,需要将n ...
- 【36.86%】【codeforces 558B】Amr and The Large Array
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- 从0開始学习 GitHub 系列之「07.GitHub 常见的几种操作」
之前写了一个 GitHub 系列,反响非常不错,突然发现居然还落下点东西没写,前段时间 GitHub 也改版了,借此机会补充下. 我们都说开源社区最大的魅力是人人多能够參与进去,发挥众人的力量,让一个 ...
- 【solr专题之三】Solr常见异常 分类: H4_SOLR/LUCENCE 2014-07-19 10:30 3223人阅读 评论(0) 收藏
1.RemoteSolrException: Expected mime type application/octet-stream but got text/html 现象: SLF4J: Fail ...
- Java NIO学习笔记之基本概念
一.缓冲区操作 缓冲区,以及缓冲区如何工作,是所有 I/O 的基础.所谓"输入/输出"讲的无非就是把数据移进或移出缓冲区. 进程使用 read( )系统调用,要求其缓冲区被填满.内 ...
- [Typescript] What is a Function Type ? Function Types and Interfaces - Are They Related ?
Function Type: type messageFn = (name: string) => string; function sayHello(name: string): string ...
- Git提交到多个远程仓库(多看两个文档)
Git提交到多个远程仓库(多看两个文档) 一.总结 一句话总结: 二. Git提交到多个远程仓库(多看两个文档) 有两种做法,先看第一种 一.通过命令行进行操作 例如我有下面两个仓库: Mybatis ...
- Opencv Surf算子中keyPoints,描述子Mat矩阵,配对向量DMatch里都包含了哪些好玩的东东?
Surf算法是一把牛刀,我们可以很轻易的从网上或各种Opencv教程里找到Surf的用例,把例程中的代码或贴或敲过来,满心期待的按下F5,当屏幕终于被满屏花花绿绿的小圆点或者N多道连接线条霸占时,内心 ...
- Qt Roadmap for 2018(对3D有很多改进)
When it comes to new features, we have many things ongoing related to graphics, so I’ll start with t ...