他們從未在Firefox擴展學校告訴您的10件事

這是我最近的電子書的後續文章，構建您自己的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:

5。在Chrome Load事件中產生一個對話框，如果使用Window.opendialog在Chrome Load事件中使用Modal和Centerscreen功能產生對話框，則該對話框將在Mac OS X中大部分不可見，隱藏在屏幕上左上角。這是因為對話框是在建立窗口大小之前定位的，因此中心屏幕屬性無法按預期工作。警報功能也會出現同樣的問題，如果您將其用作快速且臟的調試工具，這可能是一個問題。

>

>一種解決方案是將OpenDialog或Alert功能包裝在快速的SetteMeTimeout中。這樣可以確保主窗口在對話框啟動之前大小，因此將正確定位：

<tab label="About" tabindex="0"/>

6。添加Windows的自定義對話框圖標和Linux

以在對話框中添加自定義圖標，首先在擴展程序的Chrome目錄中創建一個名為Icons的文件夾。然後，在圖標文件夾中，創建另一個稱為Default的文件夾。在默認文件夾中，保存具有與

元素的ID相同名稱的圖標。

>因此，例如，如果對話框具有ID myExtension-preferences，則將創建一個稱為myExtension-preferences.ico的圖標（windows，for Windows，for linux，或.png）。 MDC文檔說將使用XPM圖像用於Linux，但它們缺乏對α通道透明度的支持。 png文件確實提供了支持，並且它們也可以正常工作。

在Windows中，圖標也將顯示在Taskbar中：
> Windows xp

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處理指令：

>請參閱您所需要做的所有事情就是參考Skin Directory，而Firefox將使用哪個特定樣式表來包括在內的平台。您可以根據需要使用盡可能多的不同樣式表擴展原理：只需在每個平台文件夾中創建一個版本，然後使用相同的URL模式將其添加到XUL文檔中。

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 Extensions都可以安全使用。但是，像任何軟件一樣，他們可能會被惡意演員利用。為了確保您的安全性，僅安裝受信任來源的擴展，保持擴展名的更新，並定期查看您的擴展的權限。

>

>如何更新我的firefox擴展名？

firefox自動檢查了您的擴展更新。但是，您還可以通過打開Firefox菜單，選擇“附加組件”，然後單擊齒輪圖標，然後選擇“檢查更新”。

>

我可以在移動？

上使用Firefox擴展，目前只有有限的Firefox擴展名可用於移動。要檢查是否可用於移動設備可用於移動設備，請訪問Firefox附加組件網站上的擴展頁面，並尋找“可用於Android”標籤的標籤。

>

>我如何開發自己的Firefox擴展名？

以開發自己的firefox擴展，您將需要對Web Technologies進行基本的了解，例如Html，css css css css css c.cav，javs css ccs＆jav。 Mozilla提供了有關如何在其開發人員網站上開發Firefox擴展的綜合指南。

最佳使用的Firefox擴展是什麼是什麼？ >使用最佳的Firefox擴展名取決於您的需求。一些流行的擴展包括用於廣告封鎖的Ublock Origin，用於密碼管理的LastPass和Dark Mode的Dark Reader。但是，由於兩個瀏覽器如何處理擴展的差異，並非所有的鉻擴展都會在Firefox上工作。

以上是他們從未在Firefox擴展學校告訴您的10件事的詳細內容。更多資訊請關注PHP中文網其他相關文章！