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中的属性说明如下：

另一种是只在需要的时候（某事件发生）通过编程注入的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;