操作用户正在浏览的页面

参考原文

知识点：

• content_scripts

---

通过 Chrome 扩展我们可以对用户当前浏览的页面进行操作，实际上就是对用户当前浏览页面的 DOM 进行操作。

通过 Manifest 中的 content_scripts 属性可以指定将哪些脚本何时注入到哪些页面中，当用户访问这些页面后，相应脚本即可自动运行，从而对页面 DOM 进行操作。

Manifest 的 content_scripts 的属性包括：

• matches 属性定义了哪些页面会被注入脚本
• exclude_matches 定义了哪些页面不会被注入脚本
• css 和 js 对应要注入的 css 和 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 的值，则不会被注入。

---

下面先看一个百度首页的例子，我们编写一个插件让百度首页的搜索按钮无法点击。

首先创建 Manifest 文件，内容如下：

{
    "manifest_version": 2,
    "name": "永远点不到的搜索按钮",
    "version": "1.0",
    "description": "让你永远也点击不到百度的搜索按钮",
    "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/ 时就会触发脚本。

右键单击搜索按钮，选择“审查元素”，我们发现百度搜索按钮的 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;
    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;

由于 Manifest 将此脚本的位置指定到了 js/cannot_touch.js，所以要记得将这个脚本保存到扩展文件夹中的 js 文件夹下，否则会出现错误。

加载插件后我们看到运行效果，搜索按钮会偏移。