Chrome扩展程序制作（三）—控制内容脚本

之前的最小化应用实际上chrome插件后台界面的应用

该js文件可以依据浏览器的生命周期和事件响应做出不同的反应，但是无法对当前访问的内容做修改

也就是拥有者浏览器的权限，比如控制窗口，控制标签，存储等。

要控制当前访问的网页内容，就需要另外设置配置文件。

首先，在manifest.json文件里增加一段代码，这段代码为当前网页添加的内容

因为代码被过滤了，所以补充图示

"content_scripts": [
    {
      // 指定插件有效的域名（设置单个域名则只对单个域名有效，比如google.com）
      "matches" : ["http://<em>/</em>", "https://<em>/</em>"],
      // 向当前访问的页面注入脚本（可以更改当前页面）
      // 当页面加载完后依次注入
      "js": ["js/jquery.min.js","js/test.js"],
      // 向当前访问的页面注入样式（可以更改当前页面）
      // 当页面加载完后依次注入
      "css":["css/index.css"]
    }
  ]

然后，确保代码里的文件一一对应，数组里的资源会依次注入当前访问的网页

例子中把index.css添加到当前网页，把jquery注入到网页，然后把test.js注入当网页，此刻的目录

test.js内容如下（当网页加载完毕后，内容被重置为hello world）

$(document).ready(function(){
    $("body").html("Hello World")
})

index.css内容如下

body{
    font-size:50px;
}
body:hover{
    font-size:50px;
    color:blue;
}

加载插件，并查看效果

至此，所有能在网页上做的行为，都可以写在插件里

比如，回到顶部，更改body背景色，更改字体等等等