Chrome浏览器扩展开发系列之十二:Content Scripts
来源:互联网 发布:网络彩票诈骗2017 编辑:程序博客网 时间:2024/06/05 00:27
Content Scripts是运行在Web页面的上下文的JavaScript文件。通过标准的DOM,Content Scripts
可以操作(读取并修改)浏览器当前访问的Web页面的内容。
Content Scripts通常用于如下场景:
- 找到Web页面中的无效链接并修复
- 增大字体以突出显示
- 查找并处理DOM中的microformat
Content Scripts的使用限制条件:
- 不能访问如下chrome.* API
chrome.extension
API- chrome.i18n API
chrome.runtime
APIchrome.storage
API
- 不能访问Chrome扩展页面中定义的JavaScript变量和函数
- 不能访问Web页面或其他Content Scripts中定义的JavaScript变量和函数
乍一看,Content Scripts似乎无法与Chrome扩展的其他部分进行任何交互,但是通过Chrome的消息传递机制,Content Scripts可以间接地调用chrome.* API,访问Chrome扩展的数据,调用Chrome扩展的方法等,详见Chrome的消息传递部分。
此外,Content Scripts还可以通过“跨域XMLHttpRequest对象”访问Chrome扩展的其他部分。Content Scripts还可以与Web页面通过共享DOM进行通信。
在Chrome浏览器扩展中使用Content Scripts有两种方式。一种是在Chrome浏览器扩展中一直存在的Content Scripts,这需要在manifest.json文件中声明content_scripts如下:
1 {2 "content_scripts": [3 {4 "matches": ["http://www.google.com/*"], 5 "css": ["mystyles.css"],6 "js": ["jquery.js", "myscript.js"]7 }8 ],9 }
这种方式非常灵活,可以为Web页面注入多个JavaScript文件和CSS文件。
content_scripts中的属性说明如下:
名称
类型
必选/可选
说明
matches
string数组
必选
Content Script注入的Web页面
exclude_matches
string数组
可选
Content Script不注入的Web页面
include_globs
string数组
可选
对于matches匹配的Web页面,进一步限定URL
exclude_globs
string数组
可选
对于matches匹配的Web页面,进一步排除URL
match_about_blank
boolean
可选
是否注入Content Script到about:blank和about:srcdoc页面,默认false
css
string数组
可选
注入到匹配的Web页面中的CSS文件,顺序相关
js
string数组
可选
注入到匹配的Web页面中的JS文件,顺序相关
run_at
string
可选
控制JS文件注入的时机,如"document_start", "document_end", "document_idle"。默认"document_idle"
- "document_start"表示在CSS文件之后,DOM构建或其他脚本运行之前,注入JS文件。
- "document_end",表示在DOM构建结束之后,图片或框架加载之前,注入JS文件。
- "document_idle"表示在"document_end"与触发window.onload事件之间的某个时间,注入JS文件,具体时间可以根据页面的内容和加载的进度优化。
all_frames
boolean
可选
控制JS文件是否在匹配的Web页面中的所有框架中运行。默认false表示只在顶层框架中运行
另一种是只在需要的时候(某事件发生)通过编程注入的Content Scripts,这需要在manifest.json文件中声明permissions如下:
1 {2 "permissions": [3 "tabs", 4 "http://www.google.com/*" //要注入Content Scripts的Web页面所在的域5 ],6 }
这种方式能够针对个别Web页面有条件地注入Content Scripts。
声明必要的权限后,就可以在发生某些事件的时候动态注入必要的Content Scripts,示例如下:
1 chrome.browserAction.onClicked.addListener(2 function(tab) { //tab对象表示当前(用户点击browser action的时候)处于活动状态的tab3 chrome.tabs.executeScript({4 //设置活动状态的tab显示的页面的document对象的属性5 code: 'document.body.style.backgroundColor="red"'//通过JS代码6 });7 chrome.tabs.executeScript({file: "content_script.js"});//通过JS文件8 });
Content Scripts的执行位于一个特殊的环境,我们称为isolated world。在这个环境中,Content Scripts能够访问当前Web页面的DOM,但是Content Scripts与当前Web页面自带的JavaScript变量和函数是不能直接互相访问的。而且被注入的每个Content Script之间也彼此独立,互不干扰。此外,对于一些共享的JavaScript对象,如window.onload事件对象,也都是彼此独立互不干扰的。
虽然Content Scripts与Web页面的JavaScript彼此独立,但是他们都能够访问Web页面的DOM,因此通过共享的DOM和消息机制,Content Scripts可以与Web页面的JavaScript进行通信。
另外,Content Scripts中要考虑安全问题,特别是Content Scripts通过跨域XMLHttpRequest对象获取的第三方结果,在作用于当前Web页面的时候要注意脚本注入攻击。
Content Scripts可以通过如下方式访问扩展中的其他文件:
1 //显示图片<extensionDir>/images/myimage.png2 var imgURL = chrome.extension.getURL("images/myimage.png");3 document.getElementById("someImage").src = imgURL;
- Chrome浏览器扩展开发系列之十二:Content Scripts
- Chrome的Content Scripts扩展开发
- Chrome 56 扩展开发入门:Content Scripts
- chrome content scripts 开发
- Chrome浏览器扩展开发系列之十九:扩展开发示例
- chrome扩展之content scripts与web pages 交互
- Chrome浏览器扩展开发系列之二:Google Chrome浏览器扩展的调试
- Chrome浏览器扩展开发系列之三:Google Chrome浏览器扩展的架构
- Chrome浏览器扩展开发系列之四:Browser Action类型的Chrome浏览器扩展
- Chrome浏览器扩展开发系列之五:Page Action类型的Chrome浏览器扩展
- Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API
- Chrome浏览器扩展开发系列之二:Google Chrome浏览器扩展的调试
- Chrome浏览器扩展开发系列之三:Google Chrome浏览器扩展的架构
- Chrome浏览器扩展开发系列之九:Chrome浏览器的chrome.alarms.* API
- Chrome扩展中的重要概念:Content Scripts
- Chrome浏览器扩展开发系列之六:options 页面
- Chrome浏览器扩展开发系列之七:override页面
- Chrome浏览器扩展开发系列之十:桌面通知Notification
- ios中各种插件的使用
- 关于Mysql中实现随机查询
- Java堆、栈和常量池以及相关String的详细讲解
- 求二次、三次贝塞尔曲线的某个时间的位置及切线方向
- Linux系统挂载存储只读改成读写
- Chrome浏览器扩展开发系列之十二:Content Scripts
- 堆排序
- 集群(cluster)原理
- jquery中获取兄弟元素的方法
- 从函数或方法返回一个内存地址
- java enum(枚举)使用详解
- 错误
- Ajax+SpringMVC+Spring+Mybatis+MySql+js用户注册实例
- ElasticSearch使用过程中遇到的问题