読み込んでいます...

OK,开始之前,说一下,扩展和插件虽然在FF里都在Addon里面,但是扩展是Extension,而插件是Plugin,我们主要讲的是扩展,所以我改了一下标题。

我们在了解了Firefox插件的基本结构之后,就可以来分析一下插件的代码了,在上一节中我们了解了结构,一些有经验的javascript开发人员基本上已经可以自己上手制作应用了,但是对于初学者来说还是有点难,所以我们就开始讲解插件的代码分析。这里我们首先可以创建一个默认的项目,具体可以参考这里

我们创建了一个空项目之后,系统就会自动为我们生成代码,在代码中,系统兼容了firefox和另一个软件,另一个软件我们不去解释,我们就只看firefox,所以我去掉了代码,只剩下一个干净的页面代码(overlay.xul),代码如下所示。 

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://{appname}/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://{appname}/locale/overlay.dtd">
<overlay id="{appname}-overlay"
xmlns
="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/>  
    
<!– firefox –>
    
<menupopup id="menu_ToolsPopup">
          
<menuitem id="mnu_{appname}" label="&{appname};"
          oncommand
="{appname}.onMenuItemCommand(event);"/>
    
</menupopup>
</overlay>

从上面的代码,我们可以看到虽然代码很少,但是五脏俱全,如下图。 

首先,在前面申明了一个css文件,申明整个XUL文件(页面)所需要使用的样式表,我们可以看到样式表代码如下。 

menuitem#mnu_{appname}
{
     color
: red !important;
}

这也对应了我们XUL文件中mnu_{appname}样式的menuitem。其中,label属性为文本,而不是value也不是夹在标签中间的文字,这里使用了&{appname};作为输出,我们可以看看local里对这个变量的申明。

<!ENTITY {appname} "{appdisplayname}">

我们可以看到这里{appname}变量的值是{appdisplayname},而实际上就是你的扩展或插件的命名(在项目已开始就有,这可以看作是ff内部的一个标量)。所以这里我们将扩展的名字输出到菜单中去了。

当执行了相应的操作后,会触发oncommand方法,当然也可以按照javascript里面写onclick方法,甚至onmouseover等等都可以使用,就看具体的需求了,我们再看看执行oncommand方法会执行什么。

onMenuItemCommand: function()
{
     alert(
this.getString("Continue_Confirm"));
     window.open(
"chrome://{appname}/content/options.xul",
                        
"","chrome,titlebar,toolbar,centerscreen,modal");
}

我们在浏览器中可以看到,上面的方法弹出了一个alert窗口,然后又弹出一个option窗口,弹出窗口可以用window.open方法进行弹出,这里不仅可以弹出网页,还可以弹出XUL文件,让程序运行起来像是一个“程序”,而实际上是弹出的一个新的页面。

注意:这里弹出的是一个新的浏览器窗口,而不是一个tab。

就像上图一样,我们弹出了一个新的可以执行的窗口。我们可以看option.xul文件,看看代码是否和他相同,答案是肯定的。

OK,现在我们就知道了一个扩展是怎样运行的了。PS,一个小技巧,在同一个浏览器打开新tab并指向新的tab的方法不是使用window.open方法,是使用一个内置的方法(当然了)。示例代码如下。

gBrowser.selectedTab=gBrowser.addTab(link); 

Cool 

364路过 4评论 Firefox Addon 阅读全文..
  1. 阿祠 @

    alert跟window.open都是弹出窗口。。。
    把示例代码放出来看看

  2. Meta @

    great job. :-)

  3. 阿祠 @

    糊涂了。。
    我还是先研究下js

  4. 置顶的更新,文章汇总 : GuoJing's Blog | 用心对待每一行代码 @

    [...] Firefox Add-on – 扩展代码分析 [...]

:-D :-? 8) :cry: 8-O :lol: :-x :-| :?: :-P :oops: :roll: :( :) :-o :wink: more »