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背景色,更改字体等等等