chrome拓展开发实战
chrome拓展开发实战:页面脚本的拦截注入
原文请访问个人博客: chrome拓展开发实战:页面脚本的拦截注入
目前公司产品的无线站点已经实现了业务平台组件化,所有业务组件的转场都是通过路由来完成,而各个模块是通过 requirejs
进行统一管理,在灰度测试时会通过grunt进行打包操作,虽然工程化的开发流程已经大大提升了效率,但是为了满足不同平台在任意业务入口页面一键注入业务脚本即可进行测试的实际需求,团队尝试通过chrome拓展来进行实现。由于我本人是第一次开发chrome拓展插件,所以开发的过程中遇到不少坑,某些功能的实现方式也未必是最好,但还是有很多难得的收获。接下来就围绕“拦截与注入”的功能点,详细介绍一下开发过程。
首先来看一看开发完成后的组件界面:
拓展的主要功能点:
1,页面脚本的嗅探
2,指定脚本的下载
3,指定域名下脚本的自动拦截(加载时不执行)
4,普通方式直接向页面中注入脚本
5,通过requirejs向页面注入脚本
6,拦截指定域名下资源后弹出通知窗口
在正式开始开发上述功能点之前,还是有必要先对chrome拓展的相关概念进行介绍。
关于chrome拓展
chrome拓展可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能:捕捉特定网页的内容,捕捉HTTP报文,捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为,与别的站点通信,修改网页内容……不过,浏览器插件也有一定的弊端,那就是会带来一些安全隐患,也可能让你的浏览器变得缓慢甚至不稳定。
开始开发chrome拓展的时候,你几乎不需要准备任何东西,只需要一个编辑器,然后准备好API文档随时查阅即可。关于如何开始一个chrome拓展,官方有一篇 文章介绍 ,文章不是特别长,但足够你了解一个chrome拓展是如何产生的。官方的DEMO中一共有4个文件:
manifest.json - 所有插件都要有这个文件,这是插件的配置文件,可看作插件的“入口”。
icon.png - 拓展的小图标,推荐使用19*19的半透明png图片,也就是上图中拓展的入口小图标。
popup.html - 就是你看到的打开拓展后的界面。
popup.js - 拓展界面引用的js文件。
manifest.json
作为配置文件,在拓展中是核心文件,内容也非常显而易见:
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"permissions": [
"https://secure.flickr.com/"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
manifest_version:现在应该总是2。
permissions:很重要的东西,即允许插件做哪些事情,访问哪些站点,假如一个插件的"permissions"里写有“http://*.hacker.com/”,那么这个插件就被允许访hacker.com上的所有内容,包括可能会把你的一些个人信息提交给hacker.com,危险性不言而喻,查看一个插件能访问那些站点的方法是:在chrome的地址栏里输入“chrome://extensions/”,然后点对应插件的旁边的那个“权限”。
default_popup:用来指定点击小图标后弹出的小窗口中默认显示的是哪个html,这个弹出的小窗口就叫做“popup”。
browser_action:这是一个浏览器级的动作,也就是说,不管你现在在访问哪个页面,那个小按钮总是显示出来,而我们的插件如果仅仅是针对某些页面的话,就不适合用这个"browser_action"了,而要用"page_action",如:
{
"manifest_version": 2,
"name": "ihorve.com viewer",
"version": "0.0.1",
"background": { "scripts": ["background.js"] },
"permissions": ["tabs"],
"page_action": {
"default_icon": {
"19": "ihorve_19.png",
"38": "ihorve_38.png"
},
"default_title": "ihorve.com article information",
"default_popup": "popup.html"
}
}
Page Actions与Browser Actions非常类似,除了Page Actions没有badge外,其他Browser Actions所有的方法Page Actions都有。另外的区别就是,Page Actions并不像Browser Actions那样一直显示图标,而是可以在特定标签特定情况下显示或隐藏,所以它还具有独有的 show
和 hide
方法。
chrome.pageAction.show(integer tabId);
chrome.pageAction.hide(integer tabId);
tabId
为标签id,可以通过tabs接口获取,有关tab相关的内容将在后面进行讲解。
在page_action中,“ permissions
”属性里的“ tabs
”是必须的,否则下面的js不能获取到tab里的 url
,而这个url是我们判断是否要把小图标show出来的依据。这样,拓展小图标只会在指定url被打开时出现在地址栏里。
关于拓展的组成文件,可以参考360翻译成中文的 官方文档 ,很好理解,这里不再赘述,有些不好理解的就是拓展中 消息的传递 ,也就是如何通过拓展界面与页面进行通信,在涉及到的地方我会进行详细说明。接下来我们就围绕相关的功能点介绍对应的API及实现过程。我的拓展包中的主要文件如下:
manifest.json - 同上
icon.png - 拓展的小图标
popup.html - 拓展界面html
popup.js - 拓展界面引用的js文件
returnjs.js - 拦截页面脚本时,阻止页面脚本执行的注入脚本
sendlink.js - 嗅探页面脚本时的注入脚本
background.js - chrome拓展的主程序
在这里先介绍一下 background.js
。 background
是什么概念?这是一个很重要的东西,可以把它认为是chrome插件的主程序,理解这个很关键,一旦插件被启用(有些插件对所有页面都启用,有些则只对某些页面启用),chrome就给插件开辟了一个独立的javascript运行环境(又称作运行上下文),用来跑你指定的 background script
,在这个例子中,也就是 background.js
。在 background.js
中,可以指定插件要立即执行的任务,以及配置在哪些域名中要立即执行这些任务。
background.js
通过 manifest.json
文件中的background配置项进行指定:
"background": {
"scripts": ["background.js"]
},
页面脚本的嗅探
嗅探页面脚本的流程大概是:
1,获取当前打开的标签
2,向当前标签注入脚本sendlink.js(在当前标签的页面中执行,收集页面外链脚本并向拓展发送获取到的脚本列表)
3,拓展中监听当前页面发送的脚本列表并展现
上述流程都在 popup.js
文件中实现。首先来看如何获取当前打开的标签,以及如何向当前标签注入一个sendlink.js文件。
chrome.windows.getCurrent(function( currentWindow ) {
//获取有指定属性的标签,为空获取全部标签
chrome.tabs.query( {
active: true, windowId: currentWindow.id
}, function(activeTabs) {
console.log("TabId:" + activeTabs[0].id);
//执行注入,第一个参数表示向哪个标签注入
//第二个参数是一个option对象,file表示要注入的文件,也可以是code
//是code时,对应的值为要执行的js脚本内容,如:code: "alert(1);"
//allFrames表示如果页面中有iframe,是否也向iframe中注入脚本
chrome.tabs.executeScript(activeTabs[0].id, {
file: "sendlink.js",
allFrames: false
});
});
});
获取当前打开标签和向标签中注入脚本文件的操作都已经完成,现在我们来看一看 sendlink.js
文件中的具体内容:
var links = document.getElementsByTagName("script"),
arr = [];
[].forEach.call(links, function(el) {
var href = el.src;
if(/[http|https]:\/\//gi.test(href)){
arr.push(href);
}
});
arr.sort();
//向拓展发送消息,这里就涉及到了消息通讯
chrome.extension.sendMessage(arr);
上述代码中出现了消息通讯,如果你仅仅需要给你自己的扩展的另外一部分发送一个消息(可选的是否得到答复),你可以简单地使用chrome.extension.sendMessage()
方法。这个方法可以帮助你从当前的标签页面到扩展传送一次JSON序列化消息。
而在拓展中,可以使用 chrome.extension.onMessage()
方法进行监听,并且在回调中处理监听到的消息内容。详情请查阅360翻译的中文文档。文档中的 chrome.extension.sendRequest()
和 chrome.extension.sendRequest()
已经被更新的 onMessage
和 sendMessage
代替。下面就来看一看在popup.js中如何监听消息。
chrome.extension.onMessage.addListener(function(links) {
//处理接收到的links,展现在拓展页面中的DOM里
});
这样就完成了一次从拓展向当前标签页注入脚本,在注入的脚本中收集 script
外链脚本,并且将脚本列表通过消息发送给拓展,然后在拓展中接收并处理消息的过程。
指定脚本的下载
下载功能就相对简单,使用chrome拓展的 downloads API
即可。因为下载功能是在拓展中实现的,所以js脚本应该写在 popup.js
文件中。此外,下载功能需要在 manifest.json
文件中配置 permissions
,增加 downloads
权限:
"permissions": ["downloads"],
执行下载链接的逻辑。应该在按钮的点击事件后执行。
//下载所选链接
downloadLinks: function() {
for(var i = 0, n = MainLogic.visibleLinks.length; i < n; i++) {
if (MainLogic.$id("cb" + i).checked){
//chrome拓展的下载API
chrome.downloads.download({url: MainLogic.visibleLinks[i]});
}
}
window.close();
}
指定域名下脚本的自动拦截
资源拦截的功能需要为 manfest.json中
的 permissions
字段配置 webRequest
和 webRequestBlocking
权限。而进行资源拦截的原理也很容易从这两个词的意思上看出来:在web发送请求的时候执行操作。其实 webRequest
的核心意思就是要伪造各种 request
,那么就不单单是写某个对象的数据这么简单,还需要选择合适的时机,在发送某种request之前伪造好它,或者在真实的request到来之后半路截获它,替换成假的然后再发出去。
"permissions": [
"webRequest",
"webRequestBlocking"
],
Chrome提供了较为完整的方法供扩展程序分析、阻断及更改网络请求,同时也提供了一系列较为全面的监听事件以监听整个网络请求生命周期的各个阶段。网络请求的整个生命周期所触发事件的时间顺序如下图所示。
因为我们需要在指定的域名的资源开始发送请求的时候就进行拦截,所以不能等到拓展打开的时候才去执行拦截操作,必须在页面一打开就进行拦截的部署,因此拦截的逻辑应该放在 background.js
中,而非 popup.js
中。
// 监听发送请求
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
console.log(details);
//拦截到执行资源后,为资源进行重定向
//也就是是只要请求的资源匹配拦截规则,就转而执行returnjs.js
return {redirectUrl: chrome.extension.getURL("returnjs.js")};
},
{
//配置拦截匹配的url,数组里域名下的资源都将被拦截
urls: [
"*://*.jquery.top/*",
"*://*.elongstatic.com/*"
],
//拦截的资源类型,在这里只拦截script脚本,也可以拦截image等其他静态资源
types: ["script"]
},
//要执行的操作,这里配置为阻断
["blocking"]
);
在这里,拦截资源我们用到了一个监听事件: chrome.webRequest.onBeforeRequest.addListener()
,只要有匹配域名下的资源将要发送请求,就立即执行回调:
chrome.webRequest.onBeforeRequest.addListener(
callback, filter, opt_extraInfoSpec
);
回调函数所接收到的信息对象均包括如下属性: requestId
、 url
、 method
、 frameId
、 parentFrameId
、 tabId
、 type
和 timeStamp
。其中 type
可能的值包括 main_frame
、 sub_frame
、 stylesheet
、 script
、 image
、 object
、 xmlhttprequest
和 other
。
拦截指定域名下资源后弹出通知窗口
在拦截到指定资源后,比较好的体验是告诉用户页面资源已被拦截,这样就可以使用chrome的通知接口向用户发出通知。 chrome.notifications.create()
可以帮我们做到向用户发出浏览器通知。
// 弹出通知
chrome.notifications.clear("newNotice", function( wasClear ) {
chrome.notifications.create("newNotice", {
type: "basic",
iconUrl: chrome.runtime.getURL("images/logo.png"),
title: "页面JS拦截提醒",
message: "拓展将开启页面JS拦截,若要恢复js执行请关闭拓展。"
}, function( notificationId ) {
console.log(notificationId);
} );
});
chrome通知的API介绍,请阅读这篇文章: Chrome插件桌面通知API的变化 。
普通方式注入js脚本
脚本的注入在前文已经介绍过,就是将指定的脚本资源在合适的时机放到页面中执行。在这里,我需要在拓展中输入远程脚本URL,在点击注入按钮后向页面注入,基本逻辑也很简单,就是通过 ajax
发送请求,在 responseText
返回时,将返回的脚本作为 code
注入到页面里。
//获取远程脚本并进行普通注入
getScript: function() {
MainLogic.setInjectUrl();
var url = MainLogic.injecturl;
if( url ) {
$("#injectValue").removeClass("errbox");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var code = xhr.responseText;
console.log(code);
//第一个参数为null时,表示注入的目标是当前打开的tab
//获取到返回值时,通过code注入到页面中,在回调中打印注入成功的提示
chrome.tabs.executeScript(null, {code: code, allFrames: false}, function(){
console.log("executeScript success!!!!!!!!!");
});
} else {
$('#xhr-errbox').show();
setTimeout(function() {
$('#xhr-errbox').hide();
}, 2000);
}
}
}
var ts = new Date().getTime();
var u;
if(url.indexOf('?') === -1){
u = url + '?_t=' + ts;
} else {
u = url + '&_t=' + ts;
}
xhr.open('GET',u,true);
xhr.send(null);
} else {
$("#injectValue").addClass("errbox");
MainLogic.msgBox("远程脚本不能为空!");
}
},
上述提到的注入方式中,注入时机是响应操作后进行注入,还有一种方式是通过内容脚本的方式如,也就是 content script
。这种方式需要在 manifest.json
中进行配置,即在拓展有访问权限的页面打开时立即向页面注入资源。如:
"content_scripts": [
{
"matches": ["http://*/*"],//匹配url
"js": ["jquery-1.9.1.js"],//向匹配url中注入指定脚本
"css": ["css.css"],//向匹配url中注入css样式
"run_at": "document_end"//注入时机,这里是在document节点加载完成时注入
}
],
具体的配置可参见360翻译的中文API文档。
通过requirejs向页面注入脚本
通过requirejs向页面注入脚本比普通方式稍有特殊,因为 requirejs
的执行需要在页面中引入 require.js
,并在 data-main
属性中配置入口脚本,所以使用普通方式注入显然不符合实际,这里的解决方案就是,在 domready
后向页面通过 document.write
的方式注入脚本。
// 执行注入requirejs
injectRequire: function() {
MainLogic.setInjectUrl();
//require.js打在拓展包中,通过chrome.extension.getURL来获取资源路径
var requireurl = chrome.extension.getURL("require.js");
var datamainjs = MainLogic.injecturl;
if( datamainjs ) {
var executeCode = '' +
'var scripts = document.getElementsByTagName("script");' +
'[].forEach.call(scripts, function(script) {' +
' if(!!script.src && script.src == "' + requireurl + '"){' +
' script.parentNode.removeChild(script);' +
' }' +
'});' +
'var Req_script = document.createElement("script");' +
'Req_script.src = "' + requireurl + '";' +
'Req_script.setAttribute("data-main","' + datamainjs + '");' +
'document.body.appendChild(Req_script);';
chrome.tabs.executeScript(null, {
code: executeCode
});
MainLogic.msgBox("已成功注入!");
} else {
$("#injectValue").addClass("errbox");
MainLogic.msgBox("远程脚本不能为空!");
}
},
从那个面的代码中可以看出,首先需要将拓展包内的资源路径取出,然后将要注入的脚本内容拼接成字符串,最后进行执行。这里还有一个问题,就是通过 chrome.extension.getURL
来获取包内资源的路径。在获取路径的时候,需要通过 manifest.json
文件中的的 web_accessible_resources
属性为资源配置访问权限。
"web_accessible_resources": [
"require.js",
"returnjs.js",
"images/*" //images目录下的所有资源,拓展都将有权访问
]
测试你的chrome拓展
因为在正式上线到chrome拓展托管平台需要将拓展包打包成.crx格式的文件,所以我们刚才所做的一切都只是开发版,那开发版如何测试呢?其实非常简单,你只需要在Chrome浏览器中打开 chrome://extensions/
,点击“加载已解压的拓展程序”,选中你的拓展开发目录,拓展小图标就出来了。当你拓展的代码有更改时,记得点一下“重新加载”按钮,重新加载你的拓展程序,以保证你能看到的拓展是最新的版本。
里面的“权限”就是你在 manifest.json
文件的 permissions
中配置的 url
。
到这里,开发流程和功能点相关的API都已介绍完毕,整体来说开发一个chrome拓展并不复杂,只要找到对应的API,然后理清 background.js
和拓展页面js以及要注入到标签页面中的js之间的逻辑关系,并且知道如何通过监听事件互相发送和接受消息,一个满足你不同需求的chrome拓展就很容易开发出来。因博主也是第一次接触chrome拓展开发,如果在文章中有地方描述有误,欢迎在评论中指出。也希望本文的分享能为大家带来一些解决问题的思路。
项目源码已经开放到github: 点击这里 ,欢迎各种fork star~
外部API资源文档
360极速浏览器开放平台(chrome官方API的中文版本,但不是最新): http://open.chrome.360.cn/extension_dev/overview.html
chrome插件中文开发文档(非官方,与官方文档一致,不用FQ): http://chrome.liuyixi.com/overview.html
Chrome扩展及应用开发(电子书): http://www.ituring.com.cn/book/1472
原文请访问个人博客: chrome拓展开发实战:页面脚本的拦截注入
chrome拓展开发实战的更多相关文章
- chrome拓展开发实战:页面脚本的拦截注入
原文请访问个人博客:chrome拓展开发实战:页面脚本的拦截注入 目前公司产品的无线站点已经实现了业务平台组件化,所有业务组件的转场都是通过路由来完成,而各个模块是通过requirejs进行统一管理, ...
- 【包教包会】Chrome拓展开发实践
首发于微信公众号<前端成长记>,写于 2019.10.18 导读 有句老话说的好,好记性不如烂笔头.人生中,总有那么些东西你愿去执笔写下. 本文旨在把整个开发的过程和遇到的问题及解决方案记 ...
- chrome扩展开发实战入门之二-自动搜索
目标:产生随机数,用于百度搜索:像看电视一样观看搜索结果 参考上一篇,新建目录hellocrx,其中三个文件:manifest.json content_script.js 和jquery-3.4. ...
- chrome扩展开发实战入门之一-hellocrx
后记:在写这篇文章时,我还没搞懂chrome扩展的基本原理.后来才明白,最简单(且实用)的扩展只需要manifest.json和content_scripts.js两个文件,无需background. ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- 一个Chrome拓展——HttpPost
周末花了点时间做了一个chrome拓展,叫HttpPost,顾名思义是用来测试http的post请求. 先直接看效果 插件与拓展 在说这个做的过程前,先说明什么是Chrome插件.Chrome拓展 1 ...
- 《Visual C++开发实战1200例 第1卷》扫描版[PDF]
[内容简介:] <Visual C++开发实战1200例(第1卷)>是“软件开发实战1200例”丛书之一.<Visual C++开发实战1200例(第1卷)>,编程实例的四库全 ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
- “融而开放、合以创新”T-HIM融合通信技术开发实战
本文来自腾讯云技术沙龙,本次沙龙主题为T-HIM融合通信技术开发实战 2018年,企业的数字化转型大规模兴起,"数字化经济"时代来临.如何利用数字化技术来支持业务的转型.增长与创新 ...
随机推荐
- iOS开发笔记10:圆点缩放动画、强制更新、远程推送加语音提醒及UIView截屏
1.使用CAReplicatorLayer制作等待动画 CALayer+CABasicAnimation可以制作很多简单的动画效果,之前的博客中介绍的“两个动画”,一个是利用一张渐变色图片+CABas ...
- winform dateTimePicker选择时间控件-选择小时、分钟、秒
今天对公司项目进行改版(一个c/s客户端程序),要求dateTimePicker 能够选择小时,分钟.但找了很久,发现没有相关的简化控件,都是web的,没有winform的. 可是功夫不负有心人啊. ...
- 网站的SEO
提高网站SEO排名的策略除了要有高质量的内容,还有几种方案可以使用 1.关键词的设定 合适的关键词可以提升搜索引擎中的排名 ①最重要的是html中的title标签,这也是一个页面的最重要的概括,所以尽 ...
- cocos2d-x之多点触碰初试
bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...
- 从零开始学习Mysql的学习记录
2015/06/18 16:23更新,由于QQ邮件的图片链接失效了,请在云笔记链接查看 http://note.youdao.com/share/?id=f0b2ed30a3fc8e57c381e3d ...
- CentOS 6.5安装MongoDB
1.创建mongodb.repo文件在/etc/yum.repos.d/目录下创建文件mongodb.repo,它包含MongoDB仓库的配置信息,内容如下: [mongodb] name=Mongo ...
- SQL TUNNING
In a Nested Loops Join, for example, the first accessed table is called the outer table and the seco ...
- git的使用(二)
1.几个概念 (1)工作区指当前编辑代码的地方,是.git仓库所在的文件夹. (2)暂存区是一个概念,并不存在这个区. (3)仓库是.git文件夹,是运行git init命令时自动创建的,默认是隐藏的 ...
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- HOJ 2275 Number sequence
题意:问你有多少个序列满足Ai < Aj > Ak and i < j < k. 思路:对每个数求它之前和之后分别有多少个个数比它小,两边相乘.最后求和.具体实现先用树状数组正 ...