这是我最近的电子书的后续文章，构建您自己的Firefox扩展名 - 我从我在为Firefox构建扩展方面的经验中收集的额外选择的技巧，技巧和黑客，包括Codeburner，包括SitePoint参考扩展。假定如何构建Firefox扩展程序的基本知识，因此，如果您还没有这样做，您可能想先获取电子书的免费副本。
>
在Mozilla开发人员中心（MDC）上，这里的大部分内容都没有明确记录，要么是因为它仍在他们的“待办事项”列表中，要么是因为我自己编造了。 Some of it is well documented, but it’s so useful that I thought it was worth directing your attention to it anyway.
The tips are listed in order of complexity, beginning with the shortest and simplest, and moving onto the longer and more complex ideas.
Please note: in many places throughout this article, I’ll be creating little methods to package-up self-contained techniques, and in all cases I’ll create them as顶级函数（使用函数关键字）。但是，实际上，您应该将它们创建为主要扩展对象的方法。>
钥匙要点
>利用`列表式图像'将图标添加到Xul元素中，例如`
'，`'，'和`
通过添加``tabindex =''0'0''使Mac OS X键盘访问中的Firefox中的元素可使用``tabindex =''0''``启用箭头键启用导航。 >使用“ popupnode”属性在Firefox中访问上下文菜单事件的原始鼠标 - 目标，该属性简化了自定义上下文菜单中的交互。
通过使用中间包装器元素而无需`flex'属性，从而防止XUL布局中“ Flex”属性的不需要继承，从而确保对子元素的大小进行更精确的控制。
>
>在Firefox扩展中实现平台特定样式表，以适应Windows，Linux和Mac OS X的不同UI约定，从而通过遵守本机界面标准来增强用户体验。
1。添加带有列表风格的图标
>许多XUL元素不支持CSS背景图像属性，但是其中许多元素 do> do>支持列表式式图像。这包括，和。您可以将其用于将应用程序的图标添加到其主菜单项中，也可以将一个小放大玻璃图标固定到用于搜索的文本框中：
2。 make 元素在Mac OS X
> >中可访问，一旦完成，您就可以使用箭头键在选项卡之间切换，与Windows和Linux和Linux中的相同。
3。引用上下文菜单事件的原始鼠标目标
当您单击XUL上下文菜单中的项目时，事件目标引用是您单击的。但是，如果您想引用>原始 目标元素该怎么办呢？也就是说，您右键单击以首先为菜单产生菜单的元素吗？它称为弹出式插图，是文档的属性。使用它的最简单方法是通过菜单项的命令事件将其传递：
textbox[type="search"] <br>{ <br> list-style-image:url(chrome://myextension/content/images/magglass.png); <br>} 4。防止元素继承Flex
如果将FLEX属性添加到大多数XUL元素中，它们将展开以填充可用空间。但是Flex是继承的，因此它的孩子也会
也会扩展，在某些情况下，这是高度不受欢迎的。例如，如果子元素是，则希望它具有精确的尺寸；但是，没有办法明确否定继承的flex。，但它仅继承一个级别，因此您 可以通过添加中间包装器元素来否定它，而没有声明的flex属性：
>
<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:
>
>一种解决方案是将OpenDialog或Alert功能包装在快速的SetteMeTimeout中。这样可以确保主窗口在对话框启动之前大小，因此将正确定位：
<tab label="About" tabindex="0"/> 6。添加Windows的自定义对话框图标和Linux 元素的ID相同名称的图标。
>因此，例如，如果对话框具有ID myExtension-preferences，则将创建一个称为myExtension-preferences.ico的图标（windows，for Windows，for linux，或.png）。 MDC文档说将使用XPM图像用于Linux，但它们缺乏对α通道透明度的支持。 png文件确实提供了支持，并且它们也可以正常工作。
Windows xp
>中的一个自定义对话框图标>这与Mac OS X不同，因为其对话框在没有图标的情况下显示。>7。获取对最近打开的窗口
>的引用，您可以使用Firefox的窗口中介接口获取对最近打开的浏览器窗口的引用。如果您想从外部对话框打开一个Web链接，并且比Windows.opener。从上一个提示中获取每个打开选项卡的URL
，我们可以通过当前所有打开的浏览器窗口，提取其URL，然后将它们包装到层次结构数组中（首先按窗口分组，然后按tab）。
>，以下方法确切地做到了。最终矩阵的每个成员本身都是一个数组，其中包含选项卡的URL和布尔标志（选定），以指示该窗口中是否是当前选择的选项卡：textbox[type="search"] <br>{ <br> list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}
9。使您的界面响应窗口焦点更改 >大多数Mac Windows在窗口失去焦点时会更改外观：例如，较轻的背景，窗口装饰或灰色的按钮。为了对自己的接口控件实现此效果，您需要知道何时窗口获得并失去焦点。 >您的第一个本能可能是使用窗口焦点和模糊事件，但是事实证明它们是否对此目的是不可靠的，因为它们有时会表现不直觉。例如，如果应用程序焦点移至嵌入式中的文档，则即使窗口仍然是重点的窗口，主窗口模糊事件也会触发。这是因为元素本身不再具有应用程序焦点。尽管这种行为是合乎逻辑的，但也可能是出乎意料的。好消息是，Firefox的主界面窗口具有一个主动属性，当窗口真正失去焦点时，该属性从真实变为“”（一个空字符串）。您可以使用DOM突变事件侦听器观看此属性，并将其用作您需要做的任何事情的触发器：
请小心如何使用此触发。例如，如果您用它来触发模态对话框，例如警报，那么产卵对话框的动作将导致窗口失去焦点；解散它将重新恢复焦点，它将重新触发对话框！
<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order: ，如果您想实现的效果可以通过纯CSS来实现，则可以将属性选择器与否定伪级一起使用。例如，要在其正常和残疾状态之间切换图标：>textbox[type="search"] <br>{ <br> list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}
10。在多个平台上可以使用实施特定于平台的样式表 firefox，并且在接口组件的外观甚至放置方面都有自己的约定。一个很好的例子是“确定”和“取消”按钮在警报对话框中：在Windows和Linux上，OK按钮位于CANCEL按钮的左侧，而在Mac OS上，则是相反的。近距离和最小化窗口按钮的外观是另一个实例，因为它们在每个平台上都不同。
因此，鉴于这些变化，能够将特定于平台的样式表应用于您自己的扩展界面通常很有用。这使您能够实现诸如按钮的备用图标，自定义接口控件的不同字体等变体。下图中的顶级平台文件夹应在扩展程序的根文件夹中 - 与Chrome文件夹相同。所有文件夹名称和文件名必须完全如下所示（它们也对案例敏感），除了样式表本身的名称；这可以是您喜欢的任何东西，但是当然，每个平台的副本都必须相同。
>平台特定样式表的文件夹层次结构
<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:
，以防万一它不太明显，以防万一，“ darwin”是Mac os X，“ Winnt”是Windert Windows，是Windows，是“ Linux”和“ Linux”。每个chrome.manifest文件都应包含此相同的选项卡 - 删除行（用扩展名的名称替换“ myExtension”）：
<tab label="About" tabindex="0"/>
要将样式表添加到您的界面中，只需添加带有以下URL模式的XML-StyleSheet处理指令：
11。将URL添加到浏览器的历史记录上，这是一个额外的奖励提示。 MDC上的XUL参考告诉您如何使用“自动完整”的文本框创建文本框。不幸的是，它无法告诉您如何在历史记录中添加新的URL，因此我必须通过浏览Firefox的源代码来艰难地解决这个问题。我要在这里向您展示的方法添加了URL，检索和保存Favicons，并将基本历史记录自动填写包含在讨价还价中！>>>一个带有历史记录自动完整菜单的文本框，显示对象，我们以编程方式添加了 >
textbox[type="search"] <br>{ <br> list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}
note ：添加到浏览器的历史记录中，在Firefox 3或更高版本中可以使用3.5或以后的flationber，weledboins才能使用3.5或以后的文字 >
>类型和自动填充属性是触发主要自动完整行为的类型和自动填充属性。完整的indectex属性是这样，因此当您从“自动完成”菜单中选择一个项目时，其值会自动写入文本框中；这使您可以立即按Enter键以触发命令功能。 Newlines属性仅仅是为了使我们可以避免手动解析不需要的Whitespace的值（例如前导或尾随空间）。元素缺少一个命令事件。通常用于它的事件是输入的（输入可显示的文本时触发）和onchange（值时触发）。由于该值经常会因自动完成建议而经常发生变化，其中大多数是不需要的值，因此我们将命令操作推迟到按下Enter键为止。您可以在文本框中键入或粘贴文本，并根据输入的内容进行过滤，将出现一个下拉菜单。然后，您可以从该菜单中进行选择，您的选择将写入文本框中。>
您还可以添加一个箭头按钮，通过添加enable History =“ true”。在实践中，您将继续执行另一个任务（例如将指定的URL加载到中），但我将重点关注如何将其添加到历史记录上。我将首先向您展示代码，然后一点一点地浏览：
>首先，我们进行了一些验证，如果URL没有一个，则添加协议（以便用户可以键入“ www。”），然后将[修改后的] URL编写回文本框。然后，如果它包含除CGI参数以外的任何空格或多个点，我们将在畸形的语法上发出警报并退出函数。这是我们真正需要阻止Firefox窒息的所有验证。您可能希望更优雅地处理错误，例如，将错误扔给控制台或实现自定义方法以提醒用户发生错误。接下来，我们开展业务，实际上将URL添加到历史记录中。历史服务不会接受普通的URI字符串，因此我们需要创建所谓的IURI。这是一个包含各种元数据的URI对象，包括其主机，以后会派上用场。我们使用IO服务创建IURI对象，然后将其传递给Global History Service，将其添加到浏览器的历史记录中。
该代码的其余部分用于抓住Favicon，并且将其包裹在try ... Catch Block中，原因有两个。首先，如果出于任何原因，Favicon无法使用预期的URL，其次，因为它仅在Firefox 3.5或更高版本中起作用，因此不会出错。因此，我们首先初始化Favicon服务，然后为Favicon的地址创建一个IURI对象（使用原始IURI中的主机名）。然后，我们将Favicon Iuri对象传递到Favicon服务，以加载和保存Favicon。
>我们有！下次我们在文本框中键入相同的地址时，它将显示在自动完成菜单中，以及其favicon。如果要立即在文本框中显示它，则需要运行一个setInterval循环以不断检查它是否存在。您可以使用这样的代码来做到这一点：
此代码有点棘手：每500毫秒（SetInterval的第二个参数），我们向页面的Favicon询问Favicon服务。它将返回使用Moz-Anno：Favicon：协议（如果已下载Favicon）或使用Chrome：协议（如果返回默认图像）的URI。如果我们尝试了20次（总共10秒），或者如果我们成功下载了该页面的Favicon（如Moz-Anno：Favicon：Favicon：在URI中所示），那么我们将其设置为文本框的列表式图像URL。如果您还没有这样做，请下载我的电子书构建自己的Firefox扩展名，该扩展名随附CodeBurner扩展名。 textbox[type="search"] <br>{ <br> list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}
>请注意另一篇有关建造Firefox扩展的文章，以及对Codeburner家族的一些新补充，即将推出！
经常询问有关Firefox扩展的问题（常见问题解答）
>如何安装firefox扩展？
安装firefox扩展是一个简单的过程。首先，打开Firefox浏览器，然后单击菜单按钮，该按钮由右上角的三个水平线表示。从下拉菜单中，选择“附加组件”。这将打开“附加管理器”选项卡。在搜索栏中，键入要安装的扩展名的名称，然后按Enter。单击要安装的扩展名旁边的“添加到Firefox”按钮。弹出窗口将出现，要求您允许添加扩展名。单击“添加”，然后将安装扩展名。
为什么我的Firefox扩展不起作用？这可能是由于Firefox的过时版本，与其他扩展的冲突或扩展本身的问题。尝试将Firefox更新为最新版本，禁用其他扩展以检查冲突或重新安装问题的扩展。如果问题持续存在，请联系扩展开发人员以寻求支持。
>如何管理Firefox扩展名？
管理Firefox扩展程序，打开Firefox菜单并选择“附加组件”。这将打开“附加管理器”选项卡。在这里，您可以启用或禁用扩展，删除延伸或访问每个扩展程序的选项。 是否可以放慢我的浏览器？
是的，有些firefox延伸器可以放慢浏览器的速度，尤其是如果您安装了许多扩展程序。每个扩展程序都使用一些系统资源，并且拥有太多的系统可以减慢浏览器。如果您注意到浏览器正在缓慢运行，请尝试禁用一些扩展程序以查看它是否有所改进。>
>大多数Firefox Extensions都可以安全使用。但是，像任何软件一样，他们可能会被恶意演员利用。为了确保您的安全性，仅安装受信任来源的扩展，保持扩展名的更新，并定期查看您的扩展的权限。 >>如何更新我的firefox扩展名？
firefox自动检查了您的扩展更新。但是，您还可以通过打开Firefox菜单，选择“附加组件”，然后单击齿轮图标，然后选择“检查更新”。> 我可以在移动？
上使用Firefox扩展，目前只有有限的Firefox扩展名可用于移动。要检查是否可用于移动设备可用于移动设备，请访问Firefox附加组件网站上的扩展页面，并寻找“可用于Android”标签的标签。> >我如何开发自己的Firefox扩展名？
最佳使用的Firefox扩展是什么是什么？>使用最佳的Firefox扩展名取决于您的需求。一些流行的扩展包括用于广告封锁的Ublock Origin，用于密码管理的LastPass和Dark Mode的Dark Reader。但是，由于两个浏览器如何处理扩展的差异，并非所有的铬扩展都会在Firefox上工作。
以上是他们从未在Firefox扩展学校告诉您的10件事的详细内容。更多信息请关注PHP中文网其他相关文章！
