喜欢用FireFox,不是因为标签浏览和速度快,只是因为上面的插件很多,比如del.ico.us, View in IE,gladder等等。虽然这些插件的功能很简单,但却大大简化了一些常见的操作。但总有些需求不是每个人必须的,比如看到别人提到一本书一部电影,就想到顺手到豆瓣里查找一下,并收藏。以往都是,打开一个新的浏览器窗口,输入豆瓣地址,再粘贴关键字进行检索。虽然也不是很麻烦,但是为什么不是右键点击开始搜索?类似的功能已经有了,比如在Google搜索关键字......好吧,我也写一个插件吧。
FireFox插件的编写其实很简单,只要会XML和HTML的基础知识,以及Javascript语言即可。照着 例子,步步为营,很快搞定。
首先写一个插件的描述文件(install.rdf)。
其次写一个资源的描述文件(chrome.manifest)
在XUL文件里,通过overlay的方式插入新的UI元素(mydouban.xul)。
在JS文件里,实现响应代码(mydouban.js)
组织好目录结构,压缩成一个zip包,并改名为xpi后缀,就搞定了。直接拖到FireFox窗口里,就可以直接安装了!
运行的结果就是:
几点注意事项
1. 那就是例子里说的文件保存为Unicode啥的,有问题。如果里面没有中文,全部用ansi保存就好了,否则会有些问题,具体就不多说了。
2. 例子里说,不用安装也能运行,试了一下好像不灵啊。还是先安装,然后到插件安装目录(%APPDATA%/Mozilla/Firefox)下去修改调试吧。
参考:
Mozilla Developer Center
http://developer.mozilla.org/
Building an Extension
http://developer.mozilla.org/en/docs/Building_an_Extension
FireFox插件的编写其实很简单,只要会XML和HTML的基础知识,以及Javascript语言即可。照着 例子,步步为营,很快搞定。
首先写一个插件的描述文件(install.rdf)。
<?
xml version="1.0"
?>
< RDF xmlns ="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em ="http://www.mozilla.org/2004/em-rdf#" >
< Description about ="urn:mozilla:install-manifest" >
< em:id > mydouban@optman.net </ em:id >
< em:version > 1.0 </ em:version >
<!-- Target Application this extension can install into,
with minimum and maximum supported versions. -->
< em:targetApplication >
< Description >
< em:id > {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </ em:id >
< em:minVersion > 1.5 </ em:minVersion >
< em:maxVersion > 2.0.0.* </ em:maxVersion >
</ Description >
</ em:targetApplication >
<!-- Front End MetaData -->
< em:name > my douban </ em:name >
< em:description > Search book, video and music on douban </ em:description >
< em:creator > optman/em:creator>
< em:homepageURL > http://blog.csdn.net/optman </ em:homepageURL >
</ Description >
</ RDF >
< RDF xmlns ="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em ="http://www.mozilla.org/2004/em-rdf#" >
< Description about ="urn:mozilla:install-manifest" >
< em:id > mydouban@optman.net </ em:id >
< em:version > 1.0 </ em:version >
<!-- Target Application this extension can install into,
with minimum and maximum supported versions. -->
< em:targetApplication >
< Description >
< em:id > {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </ em:id >
< em:minVersion > 1.5 </ em:minVersion >
< em:maxVersion > 2.0.0.* </ em:maxVersion >
</ Description >
</ em:targetApplication >
<!-- Front End MetaData -->
< em:name > my douban </ em:name >
< em:description > Search book, video and music on douban </ em:description >
< em:creator > optman/em:creator>
< em:homepageURL > http://blog.csdn.net/optman </ em:homepageURL >
</ Description >
</ RDF >
其次写一个资源的描述文件(chrome.manifest)
content mydouban chrome/content/
overlay chrome://browser/content/browser.xul chrome://mydouban/content/mydouban.xul
overlay chrome://browser/content/browser.xul chrome://mydouban/content/mydouban.xul
在XUL文件里,通过overlay的方式插入新的UI元素(mydouban.xul)。
<?
xml version="1.0"
?>
< overlay id ="google-gnotes-overlay"
xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
< popup id ="contentAreaContextMenu" >
< menuitem id ="searchindouban" label ="Search in douban" oncommand ="mydouban.launch(event)" />
</ popup >
< script type ="application/x-javascript" src ="mydouban.js" />
</ overlay >
< overlay id ="google-gnotes-overlay"
xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
< popup id ="contentAreaContextMenu" >
< menuitem id ="searchindouban" label ="Search in douban" oncommand ="mydouban.launch(event)" />
</ popup >
< script type ="application/x-javascript" src ="mydouban.js" />
</ overlay >
在JS文件里,实现响应代码(mydouban.js)
window.addEventListener(
"
load
"
,
function
(){mydouban.init();},
false
);
//
call this function on opening a window
var mydouban = {
init: function (){ // sets up event listeners
document.getElementById( " contentAreaContextMenu " ).addEventListener( " popupshowing " , function (){mydouban.context();}, false ); // call context() when the context menu is opened
},
context: function (){ // control which context menu item is show
document.getElementById( " searchindouban " ).hidden =! gContextMenu.isTextSelected || gContextMenu.onImage || gContextMenu.onTextInput;
},
launch: function (event){window.open( " http://www.douban.com/subject_search?search_text= " + encodeURI(window.content.getSelection()), " doubansearch " , "" )}
}
var mydouban = {
init: function (){ // sets up event listeners
document.getElementById( " contentAreaContextMenu " ).addEventListener( " popupshowing " , function (){mydouban.context();}, false ); // call context() when the context menu is opened
},
context: function (){ // control which context menu item is show
document.getElementById( " searchindouban " ).hidden =! gContextMenu.isTextSelected || gContextMenu.onImage || gContextMenu.onTextInput;
},
launch: function (event){window.open( " http://www.douban.com/subject_search?search_text= " + encodeURI(window.content.getSelection()), " doubansearch " , "" )}
}
组织好目录结构,压缩成一个zip包,并改名为xpi后缀,就搞定了。直接拖到FireFox窗口里,就可以直接安装了!
运行的结果就是:
几点注意事项
1. 那就是例子里说的文件保存为Unicode啥的,有问题。如果里面没有中文,全部用ansi保存就好了,否则会有些问题,具体就不多说了。
2. 例子里说,不用安装也能运行,试了一下好像不灵啊。还是先安装,然后到插件安装目录(%APPDATA%/Mozilla/Firefox)下去修改调试吧。
参考:
Mozilla Developer Center
http://developer.mozilla.org/
Building an Extension
http://developer.mozilla.org/en/docs/Building_an_Extension