（三）操作用户当前浏览页面

tips： DomTree

---

1. • Manifest的content_scripts属性值为数组类型，数组的每个元素可以包含matches、exclude_matches、css、js、run_at、all_frames、include_globs和exclude_globs等属性。
     
     • 其中matches属性定义了哪些页面会被注入脚本
     • exclude_matches则定义了哪些页面不会被注入脚本
     • css和js对应要注入的样式表和JavaScript
     • run_at定义了何时进行注入
     • all_frames定义脚本是否会注入到嵌入式框架中
     • include_globs和exclude_globs则是全局URL匹配
     • 最终脚本是否会被注入由matches、exclude_matches、include_globs和exclude_globs的值共同决定
     • 简单的说，如果URL匹配mathces值的同时也匹配include_globs的值，会被注入；如果URL匹配exclude_matches的值或者匹配exclude_globs的值，则不会被注入。
     • content_scripts中的脚本只是共享页面的DOM，而并不共享页面内嵌JavaScript的命名空间。如果当前页面中的JavaScript有一个全局变量a，content_scripts中注入的脚本也可以有一个全局变量a，两者不会相互干扰。当然你也无法通过content_scripts访问到页面本身内嵌JavaScript的变量和函数。

2. 小项目

manifest

{
    "manifest_version": 2,
    "name": "永远点不到的搜索按钮",
    "version": "1.0",
    "description": "让你永远也点击不到Baidu的搜索按钮",
    "content_scripts": [
        {
            "matches": ["*://www.baidu.com/"],
            "js": ["js/cannot_touch.js"]
        }
    ]
}

在content_scripts属性中我们定义了一个匹配规则，当URL符合://www.baidu.com/规则的时候，就将js/cannot_touch.js注入到页面中。其中代表任意字符，这样当用户访问http://www.baidu.com/和https://www.baidu.com/时就会触发脚本。

右键单击搜索按钮，选择“审查元素”，我们发现Baidu搜索按钮的id为’su’。

---

cannot_touch.js

function btn_move(el, mouseLeft, mouseTop){
    var leftRnd = (Math.random()-0.5)*20;
    var topRnd = (Math.random()-0.5)*20;
    //Rnd 值为100或-100
    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);
    //fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，
    //通过"left"、 "top"、 "right"、 "bottom" 属性进行定位
    //简单说就是加了这个属性滑动滚条位置也看起来不变
    el.style.position = 'fixed';
    el.style.left = btnLeft+'px';
    el.style.top = btnTop+'px';
}

function over_btn(e){
    if(!e){
        e = window.event;
    }
    //client 事件属性返回当事件被触发时鼠标指针向对于浏览器页面的坐标
    btn_move(this, e.clientX, e.clientY);
}

document.getElementById('su').onmouseover = over_btn;

js 说明：
window.event
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
解决方法：var event = event || window.event;
example:

function test(event) { var event = event || window.event; //do Something }

简单的方法是 e = e||window.event

“`