1、使用声明
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如下：
2、 manifest.json声明
{
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
}
这种方式非常灵活，可以为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表示只在顶层框架中运行 |
3、注入的Content Scripts
另一种是只在需要的时候（某事件发生）通过编程注入的Content Scripts，这需要在manifest.json文件中声明permissions如下：
{
"permissions": [
"tabs",
"http://www.google.com/*" //要注入Content Scripts的Web页面所在的域
],
}
这种方式能够针对个别Web页面有条件地注入Content Scripts。
声明必要的权限后，就可以在发生某些事件的时候动态注入必要的Content Scripts，示例如下：
chrome.browserAction.onClicked.addListener(
function(tab) { //tab对象表示当前（用户点击browser action的时候）处于活动状态的tab
chrome.tabs.executeScript({
//设置活动状态的tab显示的页面的document对象的属性
code: 'document.body.style.backgroundColor="red"'//通过JS代码
});
chrome.tabs.executeScript({file: "content_script.js"});//通过JS文件
});
4、注意事项
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可以通过如下方式访问扩展中的其他文件：
//显示图片<extensionDir>/images/myimage.png
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;
5、使用事例
//manifest.json
"content_scripts": [
{
"matches": [ "https://www.baidu.com/*"],
"css": [ "style/aa.css" ],
"js": ["scripts/jquery.js", "scripts/aa.js" ]
}
],
//style/aa.css
body{
background-color: red;
}
//scripts/aa.js
'use strict';
console.log('content script init')
$(document).ready(() => {
console.log('ready');
console.log($('body'))
})
项目文件结构
log打印在https://www.baidu.com/当前窗口的控制台
网友评论