Chrome浏览器扩展开发系列之十二：Content Scripts
Content Scripts是运行在Web页面的上下文的JavaScript文件。通过标准的DOM，Content Scripts
可以操作（读取并修改）浏览器当前访问的Web页面的内容。
Content Scripts通常用于如下场景：
- 找到Web页面中的无效链接并修复
- 增大字体以突出显示
- 查找并处理DOM中的microformat
Content Scripts的使用限制条件：
- 不能访问如下chrome.* API
chrome.extensionAPI- chrome.i18n API
chrome.runtimeAPIchrome.storageAPI
- 不能访问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"
|
|
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的时候）处于活动状态的tab 3 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.png 2 var imgURL = chrome.extension.getURL("images/myimage.png"); 3 document.getElementById("someImage").src = imgURL;
