需求:可能会有在页面加载的时候想执行某个js,例如统计页面的DOM等等。
那么这里就需要用到content_scripts
.
在这之前,先放一个类似通用的模版,基本上大部分的扩展程序都可以在上面修改。
manifest.json配置
{
"manifest_version":2,
"app":{
"background":{
"scripts":["background.js"]
}
},
"name":"your extension name",
"version":"1.0",
"default_locale":"en",
"description":"your extension description",
"icons":{
"16":"img/icon16.png",
"48":"img/icon48.png",
"128":"img/icon128.png"
},
"browser_action":{
"default_icon":{
"19":"img/icon19.png",
"38":"img/icon38.png"
},
"default_title":"extension title",
"default_popup":"popup.html"
},
"page_action":{
"default_icon":{
"19":"img/icon19.png",
"38":"img/icon38.png"
},
"default_title":"extension title",
"default_popup":"popup.html"
},
"background":{
"scripts":["background.js"]
},
"content_scripts":[
{
"matches":["http://www.byyui.com/*"],
"css":["mystylesheet.css"],
"js":["jquery.js","myjs.js"]
}
],
"options_page":"option.html",
"permissions":[
"*://www.gstyle.com/*"
],
"web_accessible_resources":[
"img/*.png"
]
}
以上这个基本上能满足大部分的扩展需求,以后在开发,可以在这上面进行删减。不认识没关系,一个一个的来练习。
这一节用到的就是content_scripts
.操作用户正在浏览的页面。
通过content_scripts
可以指定将哪些脚本文件注入到哪些页面中,用户访问可以,对应的脚本会自动执行,从而对DOM进行操作。
简单说下content_scripts
里面的属性:
content_scripts 是一个数组,数组里面是对象,对象中包含的字段有:
- matches
- exclude_matches
- css
- js
- run_at
- all_frames
- include_globs
- exclude_glbos
对应的含义是:
- matches 定义哪些页面会被注入脚本
- exclude_matches 定义哪些页面不会被注入脚本
- css ,js 定义注入的样式和js文件
- run_at 定义了何时注入
- all_frames 定义脚本是否会注入到frame框架中
- include_globs 和 exclude_globs 则是全局URL匹配。最终脚本是否会被注入到哪些页面中是由matches exclude_matches include_globs exclude_globs 的值共同决定。
其中要注意的是:__脚本的变量和浏览页面的变量是不通的。__
OK,那么我们现在来做一个最简单的控制,在某个url浏览器在控制台打印出我们的字符串。
manifest.json 如下:
{
"manifest_version":2,
"name":"DOM - DEMO",
"version":"1.0",
"description":"操作DOM 练习",
"content_scripts":[
{
"matches":["http://*.byyui.com/"],
"js":["demo.js"]
}
]
}
demo.js
console.log('my extension print log')
由于没有页面,我们只需要这些就足够了。
chrome浏览器加载后,我们浏览 http://www.byyui.com 就会发现控制台已经打印出我们的字符串了。
后续例子:跨域请求数据