chrome扩展开发：[9]Content Scripts

简单介绍Content Scripts并通过实例加以说明

工具/原料

chrome浏览器

文本编辑器

概述

1、Content Scripts是运行在网殳陌抻泥页上下文中的js脚本，它可以读取网页的DOM，也可以修改。但不能访问樘论罪朋网页js中定义的函数和变量，也不能访问其它Content Scripts中定义的函数和变量。可以认为Content Scripts是被插入到网页中了。下面一段摘自官方文档：

2、Content Scripts主要用来干什么呢？作为初学者的话，可以简单地认为它可以：读取网页信息（文字，图片等）修改网页信息模拟用户操作（填充表单、点击按钮等）代表网页发送ajax请求

3、要把Content Scripts加入扩展，需要在manifest文件中添加相关说明。其中，js对应的是要插入的Content Scripts的js文件数组matches对应的是一个字符串数组，每一项表示要插入其中的网页的地址更详细的说明请访问官方文档

4、下一步我们做一个小例子，读取csdn首页里的部分内容。以此来说明Content Scripts的使用。

读取网页内容的实例

1、为了将Content Scripts加入到扩展当中，首先新建一个js文件，放在test目录下。可以命名为cs1.js，

2、在manifest.json文件里添加以下说明，"content_scr坡纠课柩ipts": [ { 艘早祓胂 "js": [ "jquery-2.0.3.min.js","cs1.js"], "matches": [ "*://www.csdn.net/*","file://*" ] }]由于我们用到了jquery库，所以js文件数组里要引入jquery-2.0.3.min.js，然后就是我们自己的js文件cs1.jsmatches里包含了要插入js文件的url修改后的manifest.json如下：

3、现在编辑cs1.js。注意cs1.js是运行在csdn网页上下文中的。我们想读取csdn首页的新闻列表，就是这部分：

4、它的html源码大约如下：

5、我们佯镧诱嚣只读取链接的标题，所以可以些么写：function getCSDNNews(){ var alist=$('.news_list ul l足毂忍珩i a'); var len=alist.length; for(var i=0;i<len;i++){ alert($(alist[i]).attr('title')); } }getCSDNNews();'.news_list ul li a' 是一个jquery的selectoralist得到的是新闻的<a>元素的列表$(alist[i]).attr('title') 用来获取<a>元素的属性title上面这段代码会在网页刚加载时执行。

6、重新加载扩展，然后打开www.csnd.net，看到效果了吧

模拟用户点击的实例

1、接上节，本节介绍模拟用户点击，打开我们刚刚读取的<a>元素。我们只点击第一个<a>。在cs1.js中加一行代码：alist[0].click();

2、重新加载扩展，刷新csdn。当点击万alert窗口后，浏览器会把第一个<a>打开