FF插件开发——GridSystem

最新推荐文章于 2025-02-18 23:34:27 发布

阿娇

最新推荐文章于 2025-02-18 23:34:27 发布

阅读量784

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ajiao5198/article/details/7746140

本文详细介绍了将helloworld更名至gridSystem的过程，包括插件ID更改、目录结构调整、DOM和CSS的插入与动态设置、菜单栏与工具栏的集成，以及如何在菜单栏和帮助模块中显示插件。此外，还分享了自定义尺寸弹出框的代码实现和popup.xul文件的写法。最后，探讨了引入外部CSS文件的问题以及popup.js的调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 由helloworld改名为gridSystem的注意点：

①install.rdf的插件ID改为：gridSystem@mozilla.doslash.org。同时，调试目录下%APPDATA%\Mozilla\Firefox\Profiles下的gridSystem@mozilla.doslash.org文件相应的改名。

②相应的目录结构发生变化，overlay.xul中需要改写两处路径。chrome.manifest下要改写5处路径。至于overlay.xul中的overlay id不改也没什么关系。

2. 向页面中写入DOM和CSS。

①向头部加入CSS，加入了但不生效

var styleElement = document.createElement("style");
styleElement.setAttribute("type","text/css");
var message = "#E-GS{position:absolute;top:0;left:0;width:200px;height:200px;background-color:red;}";
var styleNode = document.createTextNode(message);
styleElement.appendChild(styleNode);
doc.head.appendChild(styleElement);

②在DOM前加入css，加入了但不生效

doc.body.appendChild(styleElement);

③插入到原页面的CSS文件中，OK

④只好直接写到标签里了。

3. 对插入的DOM div 动态设置高度。

4.寻找合适的覆盖点插入我的组件:

<menubar id="main-menubar">
    <menu id="alexa-relatedlinks1" label="hello" persist="hidden" accesskey="r">
      <menupopup id="alexa-relatedlinks-menu"
                 onpopupshowing=""
                 />
    </menu>
  </menubar>

插入菜单栏，与文件平级，在帮助的后面。

<toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="GridSystem-button" class="chromeclass-toolbar-additional toolbarbutton-1" label="GridSystem" tooltiptext="GridSystem" oncommand=""/>
        <toolbarbutton id="GridSystem-disable-toolbar" label="显示栅格" tooltiptext="显示栅格" type="menu" onmouseover="">
            <menupopup onpopupshowing="webdeveloper_updateDisableMenu('toolbar')">
                <menuitem id="GridSystem-disable-cache-toolbar" accesskey="" label="javascript" type="checkbox" oncommand=""/>
	    </menupopup>
	 </toolbarbutton>
  </toolbarpalette>

这个是像web developer一样订到工具栏面板上的。没有具体了解。暂时这样。

5. 把插件显示在菜单栏帮助的后面

  <menubar id="main-menubar">  //id不能改变
    <menu id="myextension" label="我的插件" persist="hidden" accesskey="r">  
      <menupopup id="menu_ToolsPopup">
	    <menu id="GridSystem" accesskey="" 
		class="menuitem-iconic" image="chrome://webdeveloper/skin/toolbar/disable.png" label="显示栅格">
			
	    </menu>
      </menupopup>
    </menu>  
  </menubar>

-------------------------------------------

终于把栅格系统做完了，所做总结如下：

1. 自定义尺寸时的弹出框代码：

window.openDialog("chrome://GridSystem/content/popup.xul", "", "centerscreen,chrome,modal");

不需要计算弹出框的大小和如何居中显示

2.overlay.xul的代码如下：

<menubar id="main-menubar">  
    <menu id="myextension" label="我的插件" persist="hidden">  
      <menupopup id="menu_ToolsPopup">
	    <menu id="GridSystem" 
		class="menuitem-iconic" image="chrome://webdeveloper/skin/toolbar/disable.png" label="显示栅格">
			<menupopup id="menu_ToolsPopup">
				<menuitem id="GridSystem-type1" label="50*20" oncommand="GridSystem.onMenuItemCommand(event,{columnWidth:50,gutterWidth:20});"/>
				<menuitem id="GridSystem-type2" label="60*30" oncommand="GridSystem.onMenuItemCommand(event,{columnWidth:60,gutterWidth:30});"/>
				<menuitem id="GridSystem-type3" label="自定义" oncommand="GridSystem.onMenuItemCommand(event);"/>
			</menupopup>
	    </menu>
      </menupopup>
    </menu>  
  </menubar>

同时包含一级菜单和二级菜单

3. popup.xul的写法值得借鉴一下：

<dialog buttons="accept, cancel"
        id="webdeveloper-resize-dialog"
        ondialogaccept="GridSystem_saveResize()"
        ondialogcancel=""
        onload="webdeveloper_initializeResize()"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	
	<script type="application/x-javascript" src="chrome://GridSystem/content/popup.js"/>

<vbox>
        <grid>
            <columns>
                <column/>
                <column/>
            </columns>
            <rows>
                <row align="center">
                    <label control="GridSystem.resize.width" value="列宽度"/>
                    <hbox>
                        <textbox id="GridSystem.resize.width" size="4"/>
                        <spacer flex="1"/>
                    </hbox>
                </row>
                <row align="center">
                    <label control="GridSystem.resize.height" value="渠宽度"/>
                    <hbox>
                        <textbox id="GridSystem.resize.height" size="4"/>
                        <spacer flex="1"/>
                    </hbox>
                </row>
            </rows>
        </grid>
    </vbox>

</dialog>

默认accept、cancel为确定、取消按钮。取消事件不需要额外添加。

引入新的popup.js,路径为全路径

注意表格布局

4. popup.js

function GridSystem_saveResize(){
	var columnWidth = document.getElementById("GridSystem.resize.width").value;
	var gutterWidth = document.getElementById("GridSystem.resize.height").value;
	window.opener.GridSystem.onMenuItemCommand(null,{columnWidth:columnWidth,gutterWidth:gutterWidth});
}

可囍的是popup.js中可以通过window.opener.GridSystem来调用其方法。

5. 遗憾的是，无法引入外部css文件，skin/overlay.css还未被使用。