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如下:

 {
"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表示只在顶层框架中运行

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

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;

Chrome浏览器扩展开发系列之十二:Content Scripts的更多相关文章

  1. Chrome浏览器扩展开发系列之十四

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59      阅读:1361      评论:0      收藏:0    ...

  2. Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报  分类: PPAPI(27)  通过将浏览器 ...

  3. Chrome浏览器扩展开发系列之十九:扩展开发示例

    翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...

  4. Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  5. Chrome浏览器扩展开发系列之十八:扩展的软件国际化chrome.i18n API

    i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...

  6. Chrome浏览器扩展开发系列之十五:跨域访问的XMLHttpRequest对象

    XMLHttpRequest对象是W3C的标准API,用于访问服务器资源.XMLHttpRequest对象支持多种文本格式,如XML和JSON等.XMLHttpRequest对象可以通过HTTP和HT ...

  7. Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging

    通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的“本地消息主机(native messaging host)”,Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应 ...

  8. Chrome浏览器扩展开发系列之十:桌面通知Notification

    Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...

  9. Chrome浏览器扩展开发系列之十一:NPAPI插件的使用

    在Chrome浏览器扩展中使用HTML和JavaScript非常容易,但是如何重用已有的非JavaScript遗留系统代码呢?答案是将NPAPI插件绑定到Chrome浏览器扩展,从而实现在Chrome ...

随机推荐

  1. HIVE安装配置

    Hive简介 Hive 基本介绍 Hive 实现机制 Hive 数据模型 Hive 如何转换成MapReduce Hive 与其他数据库的区别 以上详见:https://chu888chu888.gi ...

  2. kafka 0.8.2 消息生产者 KafkaProducer

    package com.hashleaf.kafka; import java.util.Properties; import java.util.concurrent.ExecutorService ...

  3. QT环境的搭建

    说到QT大家一定要先了解到底什么是QT,我们通常说的QT是包括:Qt-creactor的集成开发环境(IDE)和Qt的开发工具包(SDK),而Qt-creactor就相当于我们的visio studi ...

  4. ubuntu16.04 开发环境搭建

    1.更换源 sudo gedit /etc/apt/sources.list 2.更新系统 sudo apt-get update sudo apt-get dist-upgrade     3.移动 ...

  5. 对于php内存释放问题

    大家在使用PhpExcel类时,当打开一个比较大的excel数据文档,会出现Fatalerror: Allowed memorysize of 67108864 bytes exhausted (tr ...

  6. hdu5950

    hdu5950 题意 \(给出 f_1 , f_2 ,以及递推式 f_n = 2 * f_{n-2} + f_{n-1} + n^4 ,求 f_n (mod=2147493647)\) 推导一下. \ ...

  7. Unity3d: 资源释放时存储空间不足引发的思考和遇到的问题

    手机游戏第一次启动基本上都会做资源释放的操作,这个时候需要考虑存储空间是否足够,但是Unity没有自带获取设备存储空间大小的 接口,需要调用本地方法分别去android或ios获取,这样挺麻烦的.而且 ...

  8. ios移动端原生滚动条滚动不灵敏问题

    最近开发微信页面的时候遇到了这个问题, 因为移动端浏览器的原生滚动条样式很好,不像pc端那么难看,所以在页面需要滚动的地方用了原生的滚动条,这种滚动条在安卓浏览器中没有任何问题,但是在ios微信浏览器 ...

  9. python之路第一篇

    一.python环境的搭建 1.window下环境的搭建 (1).在 https://www.python.org/downloads/ 下载自己系统所需要的python版本 (2).安装python ...

  10. 关于oracle数据库备份还原-impdp,expdp

    初始化: -- 创建表空间 CREATE TABLESPACE 表空间名 DATAFILE '文件名.dat' SIZE 100M AUTOEXTEND ON NEXT 10M MAXSIZE UNL ...