Firefox扩展开发 -2

最新推荐文章于 2023-06-06 22:59:50 发布

iteye_9715

最新推荐文章于 2023-06-06 22:59:50 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： Firefox 插件开发文章标签： Firefox Chrome CSS XML

本文链接：https://blog.youkuaiyun.com/iteye_9715/article/details/81815463

Firefox 插件开发专栏收录该内容

2 篇文章

订阅专栏

[b]FirefoxOverlay.xul[/b]
顾名思义，overlay就是覆盖的意思。我们已经看过FF默认的browser.xul文件了，那么可以理解在上一节中的chrome.manifest中overlay一行便是要用后者来覆盖前者的内容。

先看firefoxOverlay.xul文件：


<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://huang/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://huang/locale/huang.dtd">
<overlay id="huang-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="overlay.js"/>
  <stringbundleset id="stringbundleset">
    <stringbundle id="huang-strings" src="chrome://huang/locale/huang.properties"/>
  </stringbundleset>

  <menupopup id="menu_ToolsPopup">
    <menuitem id="huang-hello" label="&huang.label;" 
              oncommand="huang.onMenuItemCommand(event);"/>
  </menupopup>
</overlay>

整段代码是被包在Overylay节点中的，其中的前两个节点在上一节中已经提到，script代表导入该js代码，StringBundleset则是用来添加stringbundle。

menupopup对于我们来说是个新鲜东西，可是从字面上我们还是可以猜测出它的用处，menu的弹出框。

既然是overlay，那么这段代码显然有相应的内容在browser.xul文件里面，而id则是用来标识将被overlay的节点的，果然在brwoser.xul中，我们也找到了ID名为menu_ToolsPopup的节点。这样一来，这段代码的含义就显而易见了，很简单，在menu_ToolsPopup这个节点中增加一个名为menuitem的子节点，我相信label中的&符号表意是指从huang.properties中寻找这样一个value并作为label。oncomand大概就是时间处理吧。至于为什么是huang.为前缀呢？这个倒是没有明白，难道是应该我自己在哪个地方实现这个方法？最有可能的就是overlay.js文件了。不过我们还是接着往下看吧。

[b]Overlay.js[/b]
果然，就在FirefoxOverlay.xul旁边，我们发现了Overlay.js:


var huang = {
  onLoad: function() {
    // initialization code
    this.initialized = true;
    this.strings = document.getElementById("huang-strings");
  },
  onMenuItemCommand: function(e) {
    var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"].getService(Components.interfaces.nsIPromptService);
    promptService.alert(window, this.strings.getString("helloMessageTitle"), this.strings.getString("helloMessage"));
  },
};
window.addEventListener("load", function(e) { huang.onLoad(e); }, false);

正如我们之前所猜想的，overlay.js文件中包含了onMenuItemCommand方法。

这个方法倒也简单，先获取一个服务类，然后这个服务类弹出一个对话框。至于这个类到底是个什么东东，我估计不外乎是ff自己提供的一些服务。有意思的是对话框中这一段：this.strings.getString("helloMessageTitle")。我觉得应该还是从某个地方获取值，但是this.strings究竟是什么东西呢？

在onLoad函数里面，似乎给了我们一些解释。但是不明确，还是接着往下看吧。

[b]locale[/b]
locale文件夹下只有一个子文件en-US，打开之后有两个文件，huang.properties和huang.dtd。两者都很好理解，而且我们发现huang.properties 文件中的内容跟this.strings里面的一样，那么，我们就可以认为document.getElementById("huang-strings")，通过locale，获取了正确的properties文件。虽然目前我们还不知道具体是什么原因。

再回头看FirefoxOverlay.xul文件：


<stringbundleset id="stringbundleset">
    <stringbundle id="huang-strings" src="chrome://huang/locale/huang.properties"/>

原来是从这里获得的。

Skin文件夹里面的东西就比较简单了，就是一个css文件。


/* This is just an example.  You shouldn't do this. */
#huang-hello
{
  color: red ! important;
}