Chrome浏览器扩展开发系列之十二：Content Scripts

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

 API

chrome.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的时候）处于活动状态的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;