dev2dev 首页 > 资源中心 > 技术文章
更多的混搭：使用Greasemonkey将一些新特性编入Web站点
在本文中，我将继续阐述如何帮助您利用工具建立混搭（mashup）这一主题。在本例中，我们介绍如何将Greasemonkey工具作为构建浏览器端混搭的有力方法。Greasemonkey是Firefox的一个插件，它允许脚本开发者把有用的Javascript注入到任何Web页面中。这一特性让您能够将新特性添加到不属于自己的站点中。在本文中，我将介绍如何将一些新特性添加到dev2dev Web站点中，而不必拥有dev2dev代码的访问权。随后，在后续的文章中将介绍如何利用同样的技术在引用了不同Web站点数据的dev2dev中创建特性，并产生正确的混搭。
使用Greasemonkey注入客户端代码 Greasemonkey真是太棒了，它为我带来了很多的乐趣。它的运行原理很简单，但正是这种简单性交付了强大的功能。 Javescript开发人员可以使用Greasemonkey编写脚本，然后添加到用户通过Firefox浏览器访问的Web页面中。这个脚本的确是无所不能，但是它通常用于将HTML元素注入到页面中或者更新页面中的HTML元素，从而为该Web站点创建全新的特性。目标Web站点不需要知道正在发生什么：当原始页面从Web服务器返回之后，Greasemonkey脚本会在浏览器中执行。 考虑到实用性，Greasemonkey脚本通常都面向特定的Web站点，不过使用通用脚本也是可行的。开发人员可以指定哪些URL（带有通配符的）对于脚本有效。Firefox中的Greasemonkey插件程序将静默地监控用户所浏览的URL，并且在适当的时候注入脚本。 明确的说，Greasemonkey不是默认安装的，您所编写的脚本也不是。无论是Greasemonkey，还是以后用户想要拥有的每一个脚本，安装与否都是由用户自行决定的。这就意味着Greasemonkey不像我已经讲过的其他混搭解决方案那样易于访问——此处的混搭不是URL。用户必须达到足够的熟练程度，才能安装Greasemonkey和自己的脚本。 
Greasemonkey中的Hello World示例 安装Greasemonkey的方法很简单：可以在Greasemonkey主页中找到下载链接。当然您需要使用Firefox，但是使用其他浏览器也不会出错。完成安装之后，下一步需要安装您的第一个Greasemonkey脚本。 与网上的一些最先进的项目有所不同，Greasemonkey拥有众多优秀的文档。首先，获得介绍、指南及文档的最佳地方就是Mark Pilgrim撰写的在线书籍：Dive Into Greasemonkey。这本书的内容很容易理解，而且它可以让您很快就进入实践阶段。 说到这一点，我将要展示的Greasemonkey中的Hello World 示例就正好出自Mark的这本书。下面的示例除了没有简短注解之外，其他方面与可从此处下载的 原始示例 是相同的。这个脚本以名为 helloworld.user.js 的公用文件提供。通过文件扩展名，我们可以看出它不过是一个JaveScript脚本。如果仔细看的话，您就会发现在注解中包含着许多元数据和一个对alert()的JaveScript函数调用。 元数据很容易看懂：它指示Greasemonkey对所有（*）站点执行脚本，除了一些例外情况。如果您安装了Greasemonkey，则可以通过单击 helloworld.user.js 链接安装这个脚本，您将看到它会为每一个页面请求弹出一个警告框。
// Hello World! example user script
// version 0.1 BETA!
// 2005-04-22
// Copyright (c) 2005, Mark Pilgrim
// Released under the GPL license
// http://www.gnu.org/copyleft/gpl.html
// ==UserScript==
// @name Hello World
// @namespace http://diveintogreasemonkey.org/download/
// @description example script to alert "Hello world!"
// @include *
// @exclude http://diveintogreasemonkey.org/*
// @exclude http://www.diveintogreasemonkey.org/*
// ==/UserScript==
alert('Hello world!');
Mr. Wong以及BE A dev2dev 如果访问BEA dev2dev站点，您会注意到Jon在所有的文章和博客中都引用了流行的标记服务链接。这样可以允许我们利用del.icio.us、Digg、Dzone、Furl或Reddit快速地标记文章或博客。该站点目前的运行情况，请参见下图： 
但是，如果所列的内容不能满足您的需求时怎么办呢？这就是我所面对的问题——我所使用的一个标记站点就没有列出来。顺便说一下，我一直在探究Web 2.0在中国的普及情况。在这项工作的过程中，我标记了一些自己找到的中文文章和一些有用的英文文章。我没有使用英文标记站点，而使用的是 Mr. Wong 这一中文标记站点。在浏览dev2dev站点时，我喜欢将Mr. Wong作为标记选项之一。但是，因为没有权力使用dev2dev的代码，所以我不能添加它。
使用Greasemonkey将Mr. Wong编入BEA dev2dev中 登录Greasemonkey。 在dev2dev中开发Mr. Wong特性的过程如下：
- 访问dev2dev，查看博客和文章的HTML的源文件
- 通过寻找带有class box_gray的最后一个div标记，可以很容易找到标记链接框（tagging links box）的记录
- div标记中包含了一个简单的HTML表格，我们需要做的只是新加入一行
- 建立到Mr. Wong的链接是很容易的：我们只需要知道文件名称和url。而这两样在JaveScript上都可以容易获取
- 编写JaveScript！
在展示脚本代码之前，请先查看一下最终效果： 
如您所见，虽然没有使用dev2dev代码的权力，但是我仍然可以轻松地为它添加一个全新的特性！
Mr. Wong脚本 以下是用于向dev2dev站点添加此特性的脚本。但是，如果您想要试验一下，或查看现有版本的话，可以访问Greasemonkey的 脚本存储库（如果那个链接无效，请单击 此处）。安装名为dev2dv Mr Wong的脚本。代码大致遵循以下的步骤执行：
- 在页面中找到最后一个box_gray div标记，这就是标记框
- 在这个div中找到内部table
- 在该表格中新添加一行
- 在这个行中添加Mr. Wong的图像和链接
// ==UserScript==
// @name dev2dev Mr Wong
// @namespace http://dev2dev.bea.com
// @description Injects a link to Mr Wong on each blog/article link
// @include http://dev2dev.bea.com/blog/*
// @include http://dev2dev.bea.com/pub/*
// ==/UserScript==
var divTagsWithClass, taggingDiv;
GM_log('Running dev2dev Mr Wong script');
// get the existing tagging div box
// by looking for the class (box_gray)
divTagsWithClass = document.evaluate(
"//div[@class='box_gray']",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
// the tagging div appears last
taggingDiv = divTagsWithClass.snapshotItem(divTagsWithClass.snapshotLength-1);
if (taggingDiv)
{
// find the table
tableTag = taggingDiv.getElementsByTagName('table')[0];
if (tableTag)
{
// create the new row
var lastIndex = tableTag.rows.length;
newLinkTR = tableTag.insertRow(lastIndex);
// create the td for image and set styles
var newLinkTD = newLinkTR.insertCell(0);
newLinkTD.valign = 'bottom';
newLinkTD.width = '20';
// build the HTML
newLinkTD.innerHTML = '<img src='+
'"http://www.mister-wong.cn/favicon.ico"'+
' alt="Mr. Wong" border="0" height="18" '+
'hspace="8" width="18">';
// create the td for the image
var newLinkTD = newLinkTR.insertCell(1);
// set the styles
newLinkTD.nowrap = 'nowrap';
newLinkTD.valign = 'bottom';
// build the HTML
newLinkTD.innerHTML =
'<a href="http://www.mister-wong.cn/index.php?'+
'action=addurl&v=1&bm_url='+
window.location+
'&bm_description='+
document.title+
'">'+
'Mr. Wong</a>';
}
else {
GM_log(' Error: did not find the tagging inner table');
}
}
else {
GM_log(' Error: did not find a tagging div');
}
优点与缺点 希望您已经注意到Greasemonkey插件的强大性及其简易性。在后续文章中我将向您介绍如何进一步利用这项技术，即通过从其他站点注入数据来创建正确的混搭。下面是我总结的这个工具的优点及缺点：
- 优点：对于开发者来说安装插件和脚本都相当容易
- 优点：经验丰富的JaveScript开发者可以在很短的时间内创建出新特性
- 优点：不需要拥有Web站点的代码使用权就能添加新特性
- 优点：围绕Greasemonkey的文档和开发人员社区相当出色
- 缺点：通过Greasemonkey创建的混搭不是确切的可访问的URL，它需要安装步骤
- 缺点：除了Firefox以外，IE或任何其他的浏览器都不支持Greasemonkey
- 缺点：这里还存在着一个重大的安全问题，我将在下一篇文章中讨论
参考资料
原文出处：http://dev2dev.bea.com/blog/plaird/archive/2007/07/mashups_using_g.html
| 作者简介 |
Peter Laird |
Peter Laird 是BEA WebLogic Portal工程小组的一名高级架构师。目前，Peter致力于将企业门户技术与一些新兴的思想结合在一起，比如说混搭和面向服务架构。 |
作者其它文章
|
