Chrome浏览器扩展开发系列之⼗⼆：ContentScripts Content Scripts是运⾏在Web页⾯的上下⽂的JavaScript⽂件。通过标准的DOM，Content Scripts
可以操作（读取并修改）浏览器当前访问的Web页⾯的内容。
Content Scripts通常⽤于如下场景：
到Web页⾯中的⽆效链接并修复
增⼤字体以突出显⽰
查并处理DOM中的microformat
chrome浏览器是什么浏览器图标Content Scripts的使⽤限制条件：
不能访问如下chrome.* 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": ["le/*"],
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    "le/*" //要注⼊Content Scripts的Web页⾯所在的域
5  ],
6 }
这种⽅式能够针对个别Web页⾯有条件地注⼊Content Scripts。
声明必要的权限后，就可以在发⽣某些事件的时候动态注⼊必要的Content Scripts，⽰例如下：
1 Clicked.addListener(
2function(tab) { //tab对象表⽰当前（⽤户点击browser action的时候）处于活动状态的tab
3    uteScript({
4//设置活动状态的tab显⽰的页⾯的document对象的属性
5      code: 'document.body.style.backgroundColor="red"'//通过JS代码
6    });
7    uteScript({file: "content_script.js"});//通过JS⽂件
8 });
Content Scripts的执⾏位于⼀个特殊的环境，我们称为isolated world。在这个环境中，Content Scripts能够访问当前Web页⾯的DOM，但是Content Scripts与当前Web页⾯⾃带的JavaScript变量和函数是不能直接互相访问的。⽽且被注⼊的每个Content Script之间也彼此独⽴，互不⼲扰。此外，对于⼀些共享的JavaScript对象，如load事件对象，也都是彼此独⽴互不⼲扰的。
虽然Content Scripts与Web页⾯的JavaScript彼此独⽴，但是他们都能够访问Web页⾯的DOM，因此通过共享的DOM和消息机制，Content Scripts可以与Web页⾯的JavaScript进⾏通信。
另外，Content Scripts中要考虑安全问题，特别是Content Scripts通过跨域XMLHttpRequest对象获取的第三⽅结果，在作⽤于当前Web页⾯的时候要注意脚本注⼊攻击。
Content Scripts可以通过如下⽅式访问扩展中的其他⽂件：
1//显⽰图⽚<extensionDir>/images/myimage.png
2var imgURL = URL("images/myimage.png");
ElementById("someImage").src = imgURL;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。