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