Chrome扩展,应用开发学习笔记之2恶搞百度一下 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

    Chrome扩展,应用开发学习笔记之2

    恶搞百度一下

    前面我们介绍了一个最简单的chrome扩展时钟,现在我来介绍一下一个恶搞百度一下的chrome扩展程序,

Chrome扩展,应用开发学习笔记之2恶搞百度一下

    前面说过,manifest.json文件是用来描述这个扩展的,是整个扩展的入口,同时也是告诉chrome怎么处理这个扩展。

    恶搞百度一下:

    下面我们来编写一个恶搞百度一下的扩展程序,希望从这个实例中,对于chrome拓展有一个更好的认识。先看看这个拓展的效果,如下图:

   

    从图中我们可以猜到,其功能就是让你无法点击百度一下那个按钮。

    先新建一个文件夹,取名“egao_baidu”(这个名字随意可以)。然后在文件夹中新建一个menifest.json的文件

    下面看一下menifest.json文件的内容。

{    manifest_version: 2,    name: 永远点不到的搜索按钮,    version: 1.0,    description: 让你永远也点击不到baidu的搜索按钮,    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,

电脑资料

Chrome扩展,应用开发学习笔记之2恶搞百度一下》(https://www.unjs.com)。来看一下这个文件的内容。

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;   // 从源文件中的信息 百度一下  按钮的 id 是su,通过它获取按钮,设置鼠标移至按钮上的反应

最新文章