火狐插件油猴Greasemonkey系列一

ChromeHearts 2016-03-08

油猴Greasemonkey是火狐浏览器user script插件,类似于浏览器端的页面拦截器,对于补充修改增强遗留系统功能有不错的效果。缺点在于插件是安装在浏览器端,部署不是很方便,所以只能是个小众软件。

本系列主要测试油猴插件引用jQuery库的操作。火狐版本25.0,油猴插件版本1.15.1-signed。

引入的两个测试jQuery版本为:页面版本2.2.1,插件版本1.12.1。

新建web项目,测试页面page.html,位于上下文的根部,用户脚本为test.user.js,位于userscripts目录下。

文件结构如图:

火狐插件油猴Greasemonkey系列一
 

测试情形1:page.html没有引入jquery,元数据@grant none,此时用户脚本运行在非特权无沙盒中:

page.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游猴插件测试页面</title>
</head>
<body>
	<div id="container">
		<button onclick="alert('page button click event:' + $.fn.jquery)">content button</button>
	</div>
	<div id="install"><a href="userscripts/test.user.js">用户脚本安装</a></div>
</body>
</html>

 test.user.js

// ==UserScript==
// @name        test
// @namespace   http://yc.telecomjs.com/gm
// @description 油猴jQuery库测试
// @include     http://localhost:8080/gm/page.html
// @require		http://localhost:8080/gm/libs/jquery/jquery-1.12.1.min.js
// @grant none
// @version     1.0
// ==/UserScript==

console.log($.fn.jquery);

$('#container').append('<button id="script_btn">script button</button>');

$('#script_btn').click(function(){
	alert('script button click event');
});

 经过firebug查看控制台,jQuery版本号能够正确显示,扩充的按钮能够正常显示,单击事件正常,点击页面按钮,显示:page button click event:1.12.1,说明用户脚本的库入侵了页面,要避免这样使用jQuery。

测试情形2:page.html没有引入jquery,元数据@grant unsafeWindow,此时用户脚本运行于沙盒中:

修改 test.user.js中的@grant none为@grant unsafeWindow,测试正常。

测试情形3:page.html中引入jquery,元数据@grant none,此时用户脚本运行在非特权无沙盒中:

 page.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游猴插件测试页面</title>
<script type="text/javascript" src="libs/jquery/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
	console.log('page jquery:' + $.fn.jquery);
	$(function(){
		$('#page_btn').click(function(){
			alert('page button click event:' + $.fn.jquery);
		});
	});
</script>
</head>
<body>
	<div id="container">
		<button id="page_btn">content button</button>
	</div>
	<div id="install"><a href="userscripts/test.user.js">用户脚本安装</a></div>
</body>
</html>
 test.user.js

相关推荐