Javascript, 原创

如何使用 Grease Monkey 创建自定义用户脚本代码Grease Monkey Custom code

如何使用 Grease Monkey 创建自定义用户脚本代码

Grease Monkey 是做什么的？
• 调整Gmail让Google Reader内嵌，因而提供RSS新闻订阅的选项。
• 当线上浏览某本书时同时显示对手网站同本书价钱。
• 去除来自某些站的广告，包括弹出视窗与Google文字广告。
• 改变网页的版面，包括原本该网页作者未考虑到的元素大小与浏览器画面大小。
• 自动完成表单。
• 浏览某些布告栏网站自动过滤特定的发帖人。
• 增删网页上的某些功能。
• 让使用者从某些视频站点如Google Video以及YouTube存下FLV视频档案。
• 从现行网页找寻任何RSS新闻订阅，并将它们显示在可扩展、漂浮于网页上的面板里。
下面我来写个简单的Grease Monkey 自定义代码
1. 启用Grease Monkey；
2. 新建用户脚本；
3. 填写名字，命名空间，描述，应用到的网页
4. 填写好上面信息点击确认就会弹出，请先选择您喜欢用的文本编辑器，您可以使用editplus，Notepad，Dreamweaver等等
5. 打开后您会看到一些注释信息，这些信息就是我们刚才配置的内容
例子：

// ==UserScript==
// @name           abc
// @namespace      www.google.com.hk
// @description    abc
// @include        http://www.google.com.hk
// ==/UserScript==

6. 下面就可以自定义脚本了，

很多人喜欢使用jquery，如果你也想用jquery来做，来加个判断把
下面的代码是参考12306的脚本来做的，

function withjQuery(callback, safe){
	if(typeof(jQuery) == "undefined") {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";

		if(safe) {
			var cb = document.createElement("script");
			cb.type = "text/javascript";
			cb.textContent = "jQuery.noConflict();(" + callback.toString() + ")(jQuery, window);";
			script.addEventListener('load', function() {
				document.head.appendChild(cb);
			});
		}
		else {
			var dollar = undefined;
			if(typeof($) != "undefined") dollar = $;
			script.addEventListener('load', function() {
				jQuery.noConflict();
				$ = dollar;
				callback(jQuery, window);
			});
		}
		document.head.appendChild(script);
	} else {
		setTimeout(function() {
			//Firefox supports
			callback(jQuery, typeof unsafeWindow === "undefined" ? window : unsafeWindow);
		}, 30);
	}
}

使用的时候呢

withjQuery(function($, window){
//这里填写你使用的代码吧
}, true);

在来一个我们在使用jquery的时候跟网站上本身的jquery冲突的方法

(function(){
	//这里将jquery的代码直接粘贴过来（比如 jquery-1.7.1的代码），

   //接下来是你自己的代码（记得使用jQuery(),而不是 $()）
})();

好了，这样就可以完成，您可以使用hello world 来看是否执行哦，
希望能对您有所帮助如何使用 Grease Monkey 创建自定义用户脚本代码

How to use Grease Monkey to create custom user script code

What is Grease Monkey ?

• adjust Gmail, Google Reader embedded, thus providing the option of the RSS news feed.
• when browsing a book online shows the price of the rival site  at the same time.
• remove advertising from some stations, including pop-up window and Google text ads.
• change the layout of the pages, including the element size of the browser screen size which the author of that page does not take into.
• auto-complete forms.
• Browse some bulletin board site automatically filters the specific post.
• add or delete certain features on the page.
• Let the user from some of the video sites such as Google Video and YouTube able to save FLV video files.
• find any RSS news feed from the current page, and displays them in a scalable, floating in the panel on the page.

Now let me write a simple example code for Grease Monkey

1. start Grease Monkey;
2. create user code;
3. Write the name,namespace,description,include
4.click OK, and choose a editor ,such as editplus,Notepad,Dreamweaver and so on.
5. when you open this script code,you can see some info mathion which you just write

// ==UserScript==
// @name           abc
// @namespace      www.google.com.hk
// @description    abc
// @include        http://www.google.com.hk
// ==/UserScript==

6. Now let’s write custom script code,
A lot of people like use jquery,If you want to use jquery to ,you need to add some judgement
the info down is the code which get from 12306 script code

function withjQuery(callback, safe){
	if(typeof(jQuery) == "undefined") {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";

		if(safe) {
			var cb = document.createElement("script");
			cb.type = "text/javascript";
			cb.textContent = "jQuery.noConflict();(" + callback.toString() + ")(jQuery, window);";
			script.addEventListener('load', function() {
				document.head.appendChild(cb);
			});
		}
		else {
			var dollar = undefined;
			if(typeof($) != "undefined") dollar = $;
			script.addEventListener('load', function() {
				jQuery.noConflict();
				$ = dollar;
				callback(jQuery, window);
			});
		}
		document.head.appendChild(script);
	} else {
		setTimeout(function() {
			//Firefox supports
			callback(jQuery, typeof unsafeWindow === "undefined" ? window : unsafeWindow);
		}, 30);
	}
}

and this is how to use

withjQuery(function($, window){
    //Here write your code
}, true);

another way to use jquery (There are some conflict when you use jquery)

(function(){
	//here pase the jquery code form jquery-1.7.1 or other (such as  jquery-1.7.1.js's code),

   //Here write your custom code (remember use jQuery() rather than $())
})();

OK,It is over, you can write a hello world to test it.
Hope can help you.Wish you a good day.

(3039)

Related Post