套件開發指南 - Googlebar Lite
出自 MozTW Wiki
joe cell videos new videos out this week military surplus gun and ammunition movie wallapapers anti thyroid drugs adult movie moviemonster.com american pie video clips auto loans asian girls naked candle manufacturer Ã¥ÂÂæÂÂ: Creating a Firefox Toolbar Extension (Firefox 1.5)[å·²æÂÂæ¬Â]
ä½Âè Born Geek
內容大綱
- 1 Ã¥ÂÂ訠(Instruction)
- 2 第ä¸Âç« ï¼ÂæºÂÃ¥ÂÂéÂÂ姠(Getting Started)
- 3 第äºÂç« ï¼Â建ç«Âæ¶æ§Â(Creating the Framework)
- 4 第ä¸Âç« ï¼Â建æ§Â工堷å (Structuring the Toolbar)
- 5 第åÂÂç« ï¼ÂÃ¥ÂÂæ ÂéÂÂç¼ (Dynamic Development)
- 6 第äºÂç« ï¼Âé¢æ¿製你(Skinning the Toolbar)
- 6.1 æ´æ°æªÂæ¡ÂçµÂ槠(Updating the File Structure)
- 6.2 æ´æ° Chrome 渠å® (Updating the Chrome Manifest)
- 6.3 建ç«ÂÃ¥ÂÂçÂÂæªÂæ¡ (Creating the Image Files)
- 6.4 èÂÂç±串æ¥樣å¼Â表å¥Âç¨åÂÂç (Applying the Images with CSS)
- 6.5 使ç¨樣å¼Â表 (Using the Style Sheet)
- 7 第åÂ
Âç« ï¼Â主ç¨Âå¼ (Scripting the Toolbar)
- 7.1 é£絠XUL è JavaScript (Tying XUL to JavaScript)
- 7.2 çºæÂÂéÂÂå ä¸ÂÃ¥ÂÂè½ (Adding Functionality to the Buttons)
- 7.3 æÂÂéÂÂé¸å®çÂÂ注æÂÂäºÂé  (A Special Note About Button-Menu Buttons)
- 7.4 çºæÂÂå°ÂÃ¥ÂÂå 堥åÂÂè½ (Adding Functionality to the Search Box)
- 7.5 Ã¥ÂÂæ Â置堥é¸å® (Dynamically Populating a Menu)
- 7.6 Ã¥ÂÂæ Âå 堥工堷åÂÂæÂÂé (Dynamically Adding Toolbar Buttons)
- 7.7 éÂÂéÂÂèÂÂÃ¥ÂÂÃ¥ÂÂæÂÂé (Disabling and Enabling Buttons)
- 7.8 Ã¥ÂÂæ Â顯示èÂÂé±èÂÂæÂÂé (Dynamically Showing and Hiding Buttons)
- 7.9 è®ÂÃ¥ÂÂèÂÂå²åÂÂ使ç¨è è¨Âå® (Reading and Storing User Preferences)
- 8 第ä¸Âç« ï¼Âå°Â裠(Packaging the Toolbar)
- 8.1 æ´æ° Chrome 渠å® (Updating the Chrome Manifest)
- 8.2 建章JAR æªÂæ¡ (Creating the JAR File)
- 8.3 建章XPI æªÂæ¡Â(Creating the XPI File)
- 8.4 å¥Â件å®Âè£Â測試 (Installing Your Toolbar Extension)
- 8.5 å éÂÂå°Âè£ÂéÂÂ稠(Speeding Up the Packaging Process)
- 8.6 (Ant Support)
- 9 第åÂ
«ç« ï¼Â測試 (Testing Our Extension)
- 9.1 ç¶ Firefox æÂÂæ¯ÂæÂÂ該æÂÂ麼辦 (What to Do if Firefox Breaks)
- 9.2 æÂÂç¨çÂÂçÂÂ覽å¨è¨Âå® (Useful Browser Settings)
- 9.3 JavaScript 主æ§å°ç´Âé (Logging to the JavaScript Console)
- 9.4 æ¨ÂæºÂ主æ§å°ç´Âé (Logging to the Standard Console)
- 9.5 æÂÂ件ç©件模åÂÂ檢æÂ¥å¨ (The DOM Inspector)
Ã¥ÂÂ訠(Instruction)
éÂÂ份æÂÂÃ¥ÂÂå°Â說æÂÂå¦Âä½Â建章Firefox çÂÂ工堷åÂÂå¥Â件(æ¯æ´ 1.5 æÂÂæ´æ°çÂÂçÂÂæ¬)ãÂÂ
éÂÂ份æÂÂ件æÂÂä¾Âå¥Â件å¦Âä½ÂéÂÂç¼çÂÂæ¦Âè¦ÂãÂÂå¿ è¦ÂçÂÂ工堷ãÂÂ以åÂÂ建ç«Â工堷åÂÂçÂÂç´°ç¯ÂãÂÂå¥Â件éÂÂç¼æ¯ä¸Âé£çÂÂï¼ÂÃ¥ÂÂ管忠é Âå ·åÂÂæÂÂäºÂåºç¤ÂçÂÂç¨Âå¼Âè¨Âè¨ÂçÂ¥èÂÂãÂÂ
æÂÂä¸Â種æÂÂè¡Âæ¯æÂÂ建è°你忠é Âç¨Âå¾®çÂÂæÂÂçÂÂï¼ÂXMLãÂÂJavaScriptãÂÂCSSãÂÂéÂÂä¸ÂÃ¥ÂÂæÂÂè¡Âå¸ç¿Âèµ·ä¾Âé½ä¸Âé£ï¼ÂèÂÂä¸Â網路ä¸ÂæÂÂ許å¤Âä¸Âé¯çÂÂæÂÂå¸ãÂÂ
Firefox 1.5 çÂÂå¨å¥Â件éÂÂç¼ä¸ÂæÂÂå¾Â大çÂÂæ¹åÂÂï¼ÂéÂÂÃ¥ÂÂçÂÂæ¬æ¯Âå ÂÃ¥ÂÂçÂÂçÂÂæ¾´容æÂÂ建ç«Âå¥Â件ã éÂÂ份æÂÂÃ¥ÂÂå©ç¨äºÂæ¹åÂÂçÂÂé¨份ï¼Âå¿ è¦ÂæÂÂï¼ÂæÂÂæÂÂæÂÂåºè®ÂÃ¥ÂÂçÂÂé¨份ãÂÂå¦ÂæÂÂä½ ç¼ç¾é¯誤çÂÂå°æ¹ï¼ÂæÂÂæ¯æÂÂä»»ä½Â建è°ï¼Âè«Âè¯絡ä½Âè ãÂÂ
第ä¸Âç« ï¼ÂæºÂÃ¥ÂÂéÂÂ姠(Getting Started)
éÂÂå§Âä¹Âå (Before We Start)
å¨æÂÂÃ¥ÂÂéÂÂå§Â製ä½Â第ä¸Â份工堷åÂÂå¥Â件ä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸ÂäºÂéÂÂ常æÂÂç¨çÂÂæ±西æ¯你忠é Âè¦Âå ÂçÂ¥éÂÂçÂÂãÂÂ
ä¸Âè¼ÂæÂÂå (Tutorial Downloads)
å¨éÂÂ份æÂÂÃ¥ÂÂçÂÂæÂÂå¾Âï¼ÂæÂÂÃ¥ÂÂå°Â建ç«Âä¸Âå Googlebar Lite çÂÂç°¡åÂÂçÂÂæ‹ÂÂçºäºÂå°ÂéÂÂç¨ÂçÂÂå¸ç¿ÂæÂÂæÂÂ幫å©ï¼Âä½ å¯以ä¸Âè¼ÂéÂÂÃ¥ÂÂ工堷åÂÂçÂÂéÂÂç¼çÂÂæ‹ÂÂ堩份å¯å¾Âå°çÂÂçÂÂæ¬ï¼Â
- Example Toolbar XPI : éÂÂæ¯æÂÂÃ¥ÂÂå°Âè¦Â建ç«ÂçÂÂå¥Â件çÂÂå®Âè£ÂçÂÂæ‹ÂÂ
- Example Toolbar Source Code: éÂÂ份 zip æªÂæ¡Âå å«建ç«Â工堷åÂÂçÂÂÃ¥ÂÂå§Â碼ãÂÂ
注æÂÂå°éÂÂ份 xpi æªÂæ¡Âä¹Âå å«äºÂÃ¥ÂÂå§Â碼ãÂÂæÂÂè¡Âä¸ÂèÂÂè¨Âï¼Âä½ åªè¦Âä¸Âè¼ xpi çÂÂæªÂæ¡Âï¼Â並ç¨ zip çÂÂ解å£Â縮ç¨Âå¼Â解é xpi æªÂï¼Â以åÂÂå ¶ä¸Âç jar æªÂãÂÂ第äºÂ份æªÂæ¡Âåªæ¯çºäºÂæ¹便èÂÂå·²ãÂÂ
æÂÂç¨çÂÂÃ¥ÂÂèÂÂæÂÂç» (Useful References)
æÂÂå¼·çÂÂ建è°你å°Âä¸ÂÃ¥ÂÂçÂÂ網åÂÂå 堥æ¸籤ï¼Âå¨æÂÂå¸ç¿Âå¥Â件éÂÂç¼çÂÂéÂÂç¨Âï¼ÂéÂÂäºÂ網é Âå°ÂæÂÂéÂÂ常çÂÂæÂÂ幫å©ï¼ÂæÂÂç¸信å°Âä½ ä¾Â說ä¹Âæ¯ãÂÂ(Ã¥ÂÂÃ¥ÂÂé  çºåÂÂä½Âè æÂÂä¾Â)
- XUL Planet Element Reference(è±)
- MozillaZine Extension Development Forum(è±)
- Search the Firefox Source Code(è±)
- roachfiend.com Extension Tutorial(è±)
- Building an Extension - Mozilla Developer Center(è±)
- Ã¥ÂÂæÂÂæ û Hello WorldâÂÂâÂÂéÂÂç¼你çÂÂ第ä¸ÂÃ¥ÂÂFirefoxæ´å±Â(ç°¡)
- limodouçÂÂå¸ç¿Âè¨Âé - XUL(ç°¡)
- The Art of IT û åºæ¼ Mozilla çÂÂæ´å±ÂéÂÂç¼(ç°¡)
å¿ éÂÂå Âå¸ç¿Âç (Learning the Prerequisites)
å¦ÂæÂÂä¹ÂÃ¥ÂÂæÂÂæÂÂå°çÂÂï¼ÂFirefox å¥Â件éÂÂç¼éÂÂè¦Âå ÂçÂ¥éÂÂä¸Âé»ÂéÂÂæ¼ XMLãÂÂJavaScriptãÂÂÃ¥ÂÂCSS çÂÂæÂÂè¡ÂãÂÂéÂÂä¸ÂÃ¥ÂÂ主é¡Âé½æ¯ç¸ç¶容æÂÂäºÂ解çÂÂï¼ÂæÂÂä¹ÂæÂÂæÂÂä¾ÂäºÂä¸ÂäºÂéÂÂæ¼éÂÂä¸Âé  æÂÂè¡ÂçÂÂ說æÂÂãÂÂ
ä½ å°ÂæÂÂéÂÂè¦ÂçÂÂ工堷 (Tools You Will Need)
çºäºÂè¨Âè¨Âå¥Â件ï¼Âä½ éÂÂè¦Âå¹¾åÂÂ工堷è»Âé«Âï¼ÂéÂÂäºÂè»Âé«Âé½æ¯å Âè²»å¯åÂÂå¾ÂçÂÂãÂÂæÂÂÃ¥ÂÂè¦Âè¨Âè¨ÂçÂÂå¹¾åÂÂæªÂæ¡Âé½æ¯æ¨ÂæºÂæÂÂÃ¥ÂÂæªÂãÂÂå æ¤ï¼Âä½ éÂÂè¦Âä¸ÂÃ¥ÂÂä¸Âé¯çÂÂæÂÂÃ¥ÂÂ編輯å¨ãÂÂæÂÂå¼·çÂÂÃ¥ÂÂå°Â使ç¨é¡Âä¼¼ Microsoft Word çÂÂç¨Âå¼ÂãÂÂ網路ä¸ÂæÂÂä¸ÂäºÂÃ¥ÂÂåºçÂÂå Âè²»ç¨Âå¼Âè¨Âè¨ÂæÂÂÃ¥ÂÂ編輯å¨ï¼ÂéÂÂäºÂ編輯å¨å°Âä½ æÂÂéÂÂ常大çÂÂ幫å©ï¼Âä¾Âå¦ÂèªåÂÂ縮æÂÂãÂÂ強調èªÂæ³ÂçÂÂçÂÂãÂÂå¹¾åÂÂÃ¥ÂÂæ¡è¿ÂçÂÂ編輯å¨å å« Crimson EditorãÂÂTextPadãÂÂå JCreatorãÂÂEmEditorãÂÂ
第äºÂÃ¥ÂÂä½ æÂÂç¨å°çÂÂ工堷æ¯ zip æªÂçÂÂå£Â縮è»Âé«ÂãÂÂéÂÂç¶æÂÂå ¶ä»ÂéÂÂå¤ÂæÂÂç¨çÂÂ工堷ï¼ÂÃ¥ÂÂæ¯ 7-ZipãÂÂå WinRARï¼Âä½ÂæÂÂÃ¥ÂÂ人æ¯使ç¨ WinZipãÂÂç¶å°Âè£Âå¥Â件æÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂç¨å°éÂÂÃ¥ÂÂ工堷ãÂÂå¦ÂæÂÂä½ æÂÂç®ÂÃ¥ÂÂå¾Âå¤Âå¥Â件çÂÂéÂÂç¼ï¼ÂæÂÂ建è°你æ¾æÂÂå½令åÂÂä»Âé¢çÂÂå£Â縮工堷ãÂÂ使ç¨å½令åÂÂå¯以è¼ÂæÂÂå°å°Âå°Âè£ÂéÂÂç¨ÂèªåÂÂÃ¥ÂÂï¼Âä¹ÂçÂÂä¸Â你大éÂÂçÂÂæÂÂéÂÂãÂÂ
æªÂæ¡ÂçµÂæ§Âä½Âå± (File Structure Layout)
å¥Â件éÂÂç¼éÂÂè¦Âç¹å®ÂçÂÂå §é¨çµÂæ§Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿ é Â確å®ÂéÂÂä¸ÂæÂ¥æ¯æ£確çÂÂãÂÂå¦åÂÂï¼Âå°Âä¸ÂæÂÂç¼çÂÂä½Âç¨ãÂÂé¦Âå Âï¼ÂçºæÂÂÃ¥ÂÂçÂÂå¥Â件建ç«ÂæÂÂä¸Â層çÂÂç®éÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂ使ç¨ TutToolbar ç¶ä½Âç®éÂÂÃ¥ÂÂ稱(é¿å Â使ç¨空ç½æÂÂÃ¥ÂÂ)ãÂÂå¨éÂÂÃ¥ÂÂæ°建ç«Â好ç TutToolbar ç®éÂÂ裡ï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂÃ¥ÂÂ建ç«Â第äºÂÃ¥ÂÂç®éÂÂãÂÂéÂÂÃ¥ÂÂç®éÂÂå½åÂÂçº chrome (使ç¨å°Â寫) ãÂÂæ¢ç¶æÂÂÃ¥ÂÂéÂÂ麼åÂÂæ¡建ç«Âç®éÂÂï¼Âé£就åÂÂä¾Â建ç«Â第ä¸ÂÃ¥ÂÂå§ï¼ÂéÂÂ次å¨ chrome ç®éÂÂ裡建ç«Âä¸ÂÃ¥ÂÂÃ¥ÂÂ稱çº content çÂÂç®éÂÂ(使ç¨å°Â寫)ãÂÂéÂÂ裡æ¯æÂÂÃ¥ÂÂçÂÂç®éÂÂçµÂæ§ÂçÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼Â
+- TutToolbar/ +- chrome/ +- content/
æÂÂè æ¯
TutToolbar/ TutToolbar/chrome/ TutToolbar/chrome/content/
第äºÂç« ï¼Â建ç«Âæ¶æ§Â(Creating the Framework)
å¥Â件çÂÂæ¶æ§Âæ¯ç¨ä¾ÂÃ¥ÂÂ訴 Firefox å¥Â件æ¯å¦Âä½Â被延伸çÂÂï¼ÂæªÂæ¡ÂçÂÂçµÂæ§ÂãÂÂ被誰建ç«ÂãÂÂæÂÂæ¯å¥Â件çÂÂå ¨çÂÂå¯ä¸Â代èÂÂ(GUID)ãÂÂå¨ Firefox 1.5 éÂÂÃ¥ÂÂçÂÂæ¬ï¼Âå¥Â件éÂÂç¼å¨éÂÂÃ¥ÂÂé¨份æÂÂå¾Â大çÂÂè®ÂÃ¥ÂÂãÂÂÃ¥ÂÂæά 1.0.x çÂÂæ¯å¾Âæ²ÂéÂÂçÂÂæÂÂå·§ï¼Âå¨ 1.5 çÂÂå·²ç¶Âè®Âå¾Âæ´æ´æ½ÂãÂÂæ´簡å®ãÂÂ
å®Âè£Â渠å® (Installer Manifest)
éÂÂ份渠å®æ¯ç¨ä¾ÂæÂÂä¾ Firefox éÂÂæ¼å¥Â件çÂÂç´°ç¯ÂãÂÂæÂÂä¸ÂäºÂéÂÂè¦ÂçÂÂé  ç®æ¾置å¨éÂÂÃ¥ÂÂæªÂæ¡Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿ é Â確å®ÂéÂÂé¨份æ¯æ£確çÂÂãÂÂå¨你çÂÂæÂÂä¸Â層ç®éÂÂ裡ï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂæ¡ install.rdf ãÂÂç¶你建ç«Â好éÂÂÃ¥ÂÂæªÂæ¡Âï¼Âä½ æÂÂçÂÂå°éÂÂ樣çÂÂçµÂæ§Âï¼Â
+- TutToolbar/ +- install.rdf +- chrome/ +- content/
å¨æÂÂÃ¥ÂÂéÂÂå·¥åÂÂï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂéÂÂÃ¥ÂÂç¯Âä¾ÂãÂÂæÂÂæÂÂæÂÂÃ¥ÂÂå¿ é Â編輯çÂÂé¨份已ç¶Â被çªÂ顯åºä¾ÂäºÂï¼Âæ²ÂæÂÂ被çªÂ顯çÂÂé¨份æ¯ä¸Âå¯以修æ¹çÂÂãÂÂæÂ¥èÂÂï¼ÂæÂÂÃ¥ÂÂä¾ÂçÂÂéÂÂ份æªÂæ¡ÂçÂÂ堧容ï¼ÂæÂÂå°ÂæÂÂ解éÂÂæ¯ÂÃ¥ÂÂé¨份çÂÂç´°ç¯Âï¼ÂèÂÂä¸Âå¯以éÂÂå§Â編輯屬æ¼èª己çÂÂå¥Â件ãÂÂ
<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <!-- Required Items --> <em:id>yourextension@yoursite.com</em:id> <em:name>Your Extension's Name</em:name> <em:version>1.0</em:version> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>1.5.0.*</em:maxVersion> </Description> </em:targetApplication> <!-- Optional Items --> <em:creator>Your Name</em:creator> <em:description>A description of the extension</em:description> <em:homepageURL>http://www.yoursite.com/</em:homepageURL> </Description> </RDF>
å¨æÂÂä¸Âé¢第ä¸Âè¡Â表示éÂÂæ¯ä¸Â份 XML æ ¼å¼ÂçÂÂæªÂæ¡ÂãÂÂ第äºÂè¡Âï¼Â以 <RDF> éÂÂé ÂçÂÂï¼Âæ¯éÂÂ份æÂÂ件çÂÂåºæ¬å Âç´ (root element)ãÂÂå®ÂçÂÂ責任æ¯辨åÂ¥éÂÂé¨份æ¯ RDF (Resource Description Framework) æ ¼å¼ÂãÂÂä¸Âä¸ÂÃ¥ÂÂæ¨Â籤(Tag) <Description> Ã¥ÂÂ樣å°æ¯ç¨ä¾Â辨åÂ¥çºå®Âè£Â渠å®ãÂÂç¾å¨ï¼Âä¹Âå³çÂÂæ±西é½çµÂæÂÂäºÂï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂ第ä¸Âé¨份忠é Âè¦Â編輯çÂÂï¼Â
<em:id>yourextension@yoursite.com</em:id> <em:name>Your Extension's Name</em:name> <em:version>1.0</em:version>
第ä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂéÂÂè¦ÂæÂÂå¿ÂçÂÂæ¯å¥Â件çÂÂèÂÂå¥èÂÂ碼ãÂÂå¨ Firefox 1.5 ä¹ÂÃ¥ÂÂçÂÂçÂÂæ¬ï¼Âå¿ é Â使ç¨堨çÂÂå¯ä¸Â代èÂÂ(globally unique identifier)ï¼Âå³ GUIDãÂÂÃ¥ÂÂ管 GUID éÂÂæ¯被æ¯æ´çÂÂï¼Âæ°çÂÂæ ¼å¼ÂÃ¥ÂȾ´容æÂÂ使ç¨ãÂÂå å éÂÂè¦Â使ç¨你çÂÂå¥Â件åÂÂ稱ï¼Â@符èÂÂï¼ÂÃ¥ÂÂå ä¸Âä½ çÂÂ網ç«ÂçÂÂæÂÂä¸Â層網åÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂçºéÂÂÃ¥ÂÂ工堷åÂÂ使ç¨éÂÂÃ¥ÂÂå¼ tuttoolbar@borngeek.com ãÂÂ
æÂ¥èÂÂæ¯å¥Â件çÂÂÃ¥ÂÂ稱(éÂÂæÂÂ顯示å¨å¥Â件管çÂÂå¡裡)ãÂÂå¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Â裡ï¼Â使ç¨ Toolbar Tutorial çºéÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂ稱ãÂÂ確å®ÂéÂÂÃ¥ÂÂÃ¥ÂÂ稱ä¸Âå å«çÂÂæᬏÂÂï¼Âå çºçÂÂæᬏÂÂæÂÂå®Âèª己å°Â屬çÂÂæ¨Â籤ãÂÂæÂÂÃ¥ÂÂè¦Â編輯çÂÂéÂÂÃ¥ÂÂæ¨Â籤就å¨ä¸Âä¸Âè¡ÂãÂÂæ¢ç¶éÂÂæ¯æÂÂÃ¥ÂÂ試åÂÂè¦ÂÃ¥ÂÂçÂÂ第ä¸ÂÃ¥ÂÂ工堷åÂÂå¥Â件ï¼Âè®ÂéÂÂÃ¥ÂÂå¼çº 1.0 ãÂÂè¦Â注æÂÂå°ï¼Âå¨çÂÂ實çÂÂæ æ³Â裡ï¼Âç¶你ç¼表æ°çÂÂæÂÂå¥Â件æÂÂï¼Âå¿ é Âæ´æ°éÂÂÃ¥ÂÂå¼ï¼ÂæÂÂ述解è¯ç¨Âå¼Â(Scripter)å¨èªåÂÂæ´æ°éÂÂç¨ÂæÂÂä¸ÂæÂÂç¼çÂÂÃ¥ÂÂé¡ÂãÂÂå¨æÂÂçÂÂå¥Â件裡ï¼ÂæÂÂå©ç¨äºÂæÂÂè¿°èªÂæ³ (以 Perl 寫æÂÂ)ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂçÂÂ第ä¸Âç« ï¼ÂæÂÂå°ÂæÂÂÃ¥ÂÂ訴你æÂÂå¦Âä½Â使ç¨ãÂÂ
ä¸Âä¸ÂÃ¥ÂÂÃ¥ÂÂå¡Âä¹Âæ¯éÂÂÃ¥ÂÂå®Âè£Â渠å®éÂÂè¦ÂçÂÂä¸Âé¨åÂÂï¼ÂæÂ¥èÂÂä¾ÂçÂÂçÂÂéÂÂé¨份ï¼Â
<em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>1.5.0.*</em:maxVersion> </Description> </em:targetApplication>
éÂÂÃ¥ÂÂÃ¥ÂÂå¡Âæ¯ç¨ä¾ÂæÂÂ示å¥Â件è¦Âç¨å¨åªåÂÂç¨Âå¼ÂãÂÂå¨éÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂè¦ÂéÂÂç¼ Firefox çÂÂå¥Â件ãÂÂå æ¤ï¼Â<em:id> éÂÂÃ¥ÂÂå Âç´ æÂÂå®Â亠Firefox ç GUID ãÂÂä½ ä¸ÂæÂÂ該æ¹è®ÂéÂÂÃ¥ÂÂå¼ï¼Âå¦åÂÂï¼ÂæÂÂè®Âä½ çÂÂå¥Â件ç¡æ³Â被æ£確å°å®Âè£ÂãÂÂ
å¯ä¸Âå ©åÂÂæÂÂÃ¥ÂÂéÂÂè¦Âè®ÂÃ¥ÂÂçÂÂï¼Âæ¯éÂÂå ©åÂÂå Âç´ ï¼Â<em:minVersion> ã <em:maxVersion> ãÂÂéÂÂå ©åÂÂå Âç´ æÂÂæÂÂå¥Â件é©åÂÂç¨å¨ Firefox çÂÂåªåÂÂçÂÂæ¬ ( minVersion æ¯æÂÂä½Âæ¯æ´çÂÂæ¬ï¼Âè maxVersion æ¯æÂÂé«Âæ¯æ´çÂÂæ¬) ã å¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂæÂÂ使ç¨ 1.5 (minVersion) è 1.5.0.* ï¼ÂmaxVersion)ãÂÂå çºæÂÂÃ¥ÂÂå©ç¨ Firefox 1.5 çÂÂéÂÂç¼ç°å¢Âï¼ÂæÂÂ以ä¸Âå¯以æ minVersion è¨Âå®ÂçÂÂ毠1.5 éÂÂå°ÂãÂÂ
注æÂÂå°ï¼Âä½ æÂÂ使ç¨çÂÂçÂÂæᬏÂÂå¿ é Âéµå®Âæ¨ÂæºÂÃ¥ÂÂå®ÂãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂãÂÂ1.5 Release Candidate 1ãÂÂæ¯ä¸Âè¡ÂçÂÂãÂÂç®å Firefox çÂÂçÂÂæ¬çµÂæ§Âæ¯ç¸ç¶å´謹çÂÂï¼Âå¨ Mozilla Developer Center çÂÂæÂÂç« Toolkit Version Format æÂÂ詳細çÂÂæÂÂè¿°ãÂÂæÂÂ建è°你è®ÂéÂÂç¯ÂæÂÂç« ï¼Â以äºÂ解æÂÂ樣çÂÂÃ¥ÂÂ串æ¯被å Â許çÂÂãÂÂ
å¨å®Âè£Â渠å®çÂÂæÂÂå¾Âï¼Âæ¯ç¨ä¾ÂæÂÂè¿°å¥Â件çÂÂè³ÂæÂÂå®Â義ï¼ÂæÂÂ稱ä¸Âç¹¼è³ÂæÂÂ(meta-data)ï¼Â
<!-- Optional Items --> <em:creator>Your Name</em:creator> <em:description>A description of the extension</em:description> <em:homepageURL>http://www.yoursite.com/</em:homepageURL>
å°±å¦Â註éÂÂä¸Â樣ï¼ÂéÂÂäºÂå Âç´ æ¯éÂÂå¿ è¦ÂçÂÂãÂÂ<em:creator> å Â許å¥Â件ä½Âè æÂÂæÂÂèª己çÂÂÃ¥ÂÂÃ¥ÂÂï¼ÂéÂÂ樣å¥人就çÂ¥éÂÂæ¯誰製ä½ÂéÂÂÃ¥ÂÂå¥Â件ãÂÂä¸Âä¸ÂÃ¥ÂÂï¼Â<em:description> å Â許æÂÂÃ¥ÂÂå°ÂæÂÂÃ¥ÂÂçÂÂå¥Â件åÂÂä¸ÂäºÂ說æÂÂï¼ÂéÂÂÃ¥ÂÂ說æÂÂæÂÂ顯示å¨å¥Â件管çÂÂå¡ä¸ÂçÂÂå¥Â件åÂÂ稱åºÂä¸ÂãÂÂæÂÂå¾Âï¼Â<em:homepageURL> å Â許æÂÂÃ¥ÂÂæÂÂæÂÂå¥人å¯以å¨åª裡æ¾å°æÂÂÃ¥ÂÂçÂÂå¥Â件ãÂÂ
注æÂÂå°ï¼ÂéÂÂäºÂä¸Âæ¯å¯ä¸ÂçÂÂè³ÂæÂÂå®Â義ï¼ÂÃ¥ÂÂæÂÂä¹ÂæÂÂ許å¤Âå ¶ä»Âå¯é¸ç¨çÂÂé  ç®ãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂå Âç´ å¯以å¨å¥Â件管çÂÂå¡ä¸Â使ç¨æÂÂÃ¥ÂÂèª己çÂÂÃ¥ÂÂ示(icon)ã å¦ä¸ÂÃ¥ÂÂå Âç´ å Â許æÂÂÃ¥ÂÂæÂÂå®Âèªè¨Âé¸頠çÂÂä½Âç½®æÂÂæ¯ãÂÂéÂÂæ¼ãÂÂçÂÂå°Â話è¦ÂçªÂãÂÂå ¨é¨å¯ç¨çÂÂå Âç´ (ä¹Âå«åÂÂ屬æ§ properties )ï¼Âå¯以çÂÂçÂÂå¨Mozilla Developer Center ä¸ÂçÂÂæÂÂç« Installer Manifests ãÂÂæÂÂå¾Âä¸Âé»Âè¦Â注æÂÂçÂÂï¼ÂæÂÂæÂÂçÂÂå Âç´ æ¯ä¸ÂéÂÂè¦ÂæÂÂç §é ÂåºÂçÂÂãÂÂä¹Âå°±æ¯說ï¼Âä½ å¯以å°Âå®ÂÃ¥ÂÂæ¾å¨æªÂæ¡Âä¸Âä»»ä½Âå°æ¹ï¼Âå å è¦Â注æÂÂçÂÂæ¯ï¼Âå°Âå®ÂÃ¥ÂÂæ¾置å¨ <Description> è </Description> ä¹ÂéÂÂãÂÂ
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂäºÂ解äºÂå®Âè£Â渠å®ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂæÂÂå¾ÂçÂÂ樣åÂÂï¼ÂéÂÂÃ¥ÂÂçÂÂæ¬å°Â被使ç¨å¨éÂÂ份æÂÂÃ¥ÂÂä¸ÂãÂÂä½ å¯以ç´æÂ¥å°Âä¸Âé¢çÂÂé¨份ï¼Âè¤Â製å¨ install.rdf ä¸ÂãÂÂ
<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <!-- Required Items --> <em:id>tuttoolbar@borngeek.com</em:id> <em:name>Tutorial Toolbar</em:name> <em:version>1.0</em:version> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>1.5.0.*</em:maxVersion> </Description> </em:targetApplication> <!-- Optional Items --> <em:creator>Jonah Bishop</em:creator> <em:description>An example toolbar extension.</em:description> <em:homepageURL>http://www.borngeek.com/firefox/</em:homepageURL> </Description> </RDF>
Chrome 渠å® (Chrome Manifest)
Chrome 渠å®æ¯ Firefox 1.5 æÂÂéÂÂå§ÂæÂÂçÂÂãÂÂå¨ä¹ÂÃ¥ÂÂï¼ÂæÂÂæÂÂçÂÂè³ÂæÂÂ被è¨Âå®Âå¨堩åÂÂå°æ¹ï¼Âå®Âè£Â渠å®(installer manifest)ãÂÂå contents.rdf ãÂÂèÂÂç¾å¨ï¼Âæ°çÂÂæ ¼å¼Â顯å¾Âæ´簡å®ãÂÂÃ¥ÂÂ次å¨æÂÂä¸Â層ç®éÂÂ建ç«Âå¦å¤Âä¸ÂÃ¥ÂÂæªÂæ¡ chrome.manifest ãÂÂä¸Âé¢æ¯æªÂæ¡ÂçµÂæ§ÂçÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/
Chrome 渠å®æ¯ç¨ä¾ÂÃ¥ÂÂ訴 Firefox ï¼ÂæÂÂÃ¥ÂÂçÂÂå¥Â件æÂÂä¾ÂçÂÂå°Âè£Â(package)èÂÂè¦Âè¼Â(overlay)ãÂÂå¨æÂÂÃ¥ÂÂéÂÂå§Â建ç«Âä¹ÂÃ¥ÂÂï¼Âå ÂçÂÂÃ¥ÂÂç¯Âä¾Âï¼Â
content myextension chrome/content/ overlay chrome://browser/content/browser.xul chrome://myextension/content/overlay.xul locale myextension en-US chrome/locale/en-US/ skin myextension classic/1.0 chrome/skin/
èÂÂæ©å Â使ç¨ç contents.rdf (éÂÂ常趠éÂÂ20è¡Â) æ¯Âè¼Âï¼Âç¾å¨çÂÂæ¹å¼Âè®Âå¾ÂéÂÂ常簡å®ï¼Â第ä¸Âè¡Â使ç¨你æÂÂå®ÂçÂÂå°Âè£ÂÃ¥ÂÂ稱ä¾ÂçÂȎÂÂï¼Â並æÂÂæÂÂæ¾置å¨ content ç®éÂÂãÂÂéÂÂå°Âå Â許 chrome è³ÂæºÂèÂÂå¥åÂÂ串(Uniform Resource Identifierï¼Â簡稱 URI) ï¼Â妠chrome://myextension/content/ï¼Âå¨æÂÂÃ¥ÂÂçÂÂå¥Â件層ç´Âä¸ÂæÂÂÃ¥ÂÂé©ç¶çÂÂå°æ¹ãÂÂ注æÂÂï¼Âå°Âè£ÂÃ¥ÂÂ稱åªè½以å°Â寫表示ï¼Âå ¶ä»Âæ··åÂÂ大å°Â寫ï¼ÂæÂÂæ¯堨é¨大寫çÂÂÃ¥ÂÂ稱é½æ¯ä¸Âå Â許çÂÂãÂÂ
注æÂÂå°ï¼Âcontent ç®éÂÂçÂÂä½Âç½®æ¯ç¸å°Âæ¼å¥Â件çÂÂæ ¹ç®éÂÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂï¼ÂæÂÂÃ¥ÂÂ使ç¨ tuttoolbar ç¶ä½Âå°Âè£ÂÃ¥ÂÂ稱ãÂÂ
第äºÂè¡ÂçÂȎ chrome://browser/content/browser.xul çÂÂè¦Âè¼Â(overlay)ï¼ÂéÂÂå Â許你æ°å¢ÂæÂÂä¿®æ¹ Firefox 主è¦ÂçªÂçÂÂ使ç¨è ä»Âé¢(user interface)ãÂÂ
å¨ä¸Âé¢çÂÂç¯Âä¾Âï¼Âchrome://myextension/content/overlay.xul æÂÂå®ÂäºÂè¦Âè¼Â(overlay)çÂÂXUL æªÂæ¡ÂãÂÂ
æÂÂå¥話說ï¼Âä½Âæ¼å¥Â件丠content ç®éÂÂç overlay.xul æªÂæ¡Âï¼Âæ¯æÂÂÃ¥ÂÂå°Âè¦Âæ°å¢ÂçÂÂ使ç¨è ä»Âé¢(工堷åÂÂ)ãÂÂå¨éÂÂÃ¥ÂÂé¨份ï¼ÂæÂÂÃ¥ÂÂè¦Â使ç¨çÂÂå¼çº chrome://tuttoolbar/content/tuttoolbar.xul ã ä¸Âä¸Âè¡Â說æÂÂå°åÂÂÃ¥ÂÂå¦Âä½Â建ç«Â(how a locale can be created)ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂä¸Âè¨Âè¨Âå°åÂÂÃ¥ÂÂ(éÂÂç¶éÂÂç¨Âå¾Âç°¡å®)ï¼ÂéÂÂå°Âå¨æªä¾ÂÃ¥ÂÂÃ¥ÂÂè¨Âè«ÂãÂÂ
æÂÂå¾Âä¸Âè¡Âè¨Âå®ÂäºÂé¢æ¿(skin)ï¼ÂæÂÂÃ¥ÂÂå°Â使ç¨éÂÂÃ¥ÂÂæÂÂå·§ä¾Âç¾ÂÃ¥ÂÂæÂÂÃ¥ÂÂçÂÂ工堷åÂÂãÂÂç¾å¨ï¼Âå ÂçÂ¥éÂÂå®Âï¼ÂæÂÂÃ¥ÂÂå°Âå¨第äºÂç« åÂÂÃ¥ÂÂä¾Âè¨Âè«ÂéÂÂé»Âã ä¸ÂÃ¥ÂÂé½å¾Âç°¡å®ï¼Âä¸Âæ¯åÂÂï¼Âä¸Âé¢æ¯æÂÂÃ¥ÂÂå°ÂæÂÂ使ç¨ç chrome 渠å®ï¼ÂéÂÂåªæ¯åÂÂæÂÂÃ¥ÂÂï¼Âä¹Âå¾ÂæÂÂÃ¥ÂÂå°ÂæÂÂå 堥é¢æ¿çÂÂè³Âè¨ÂãÂÂÃ¥ÂÂä¸Â次ï¼Âå°Âä¸Âé¢çÂÂç¨Âå¼Â碼è¤Â製å°æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç chrome.manifest ãÂÂ
content tuttoolbar chrome/content/ overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul
ç¾å¨æ¶æ§Âå·²ç¶Âå¯以äºÂï¼ÂæÂ¥èÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂäºÂæÂÂ趣çÂÂäºÂå§ï¼Â
第ä¸Âç« ï¼Â建æ§Â工堷å (Structuring the Toolbar)
Firefox å¥Â件çÂÂ使ç¨è ä»Âé¢é¨份æ¯使ç¨ XUL æÂÂè¡ (é³ï¼Âzool)ï¼ÂéÂÂæ¯ä¸Â種ç¨ä¾Âè¨Âè¨Â使ç¨è ä»Âé¢çÂÂæ¨Â示èªÂè¨ÂãÂÂXUL å¯以æ³æÂÂæ¯ä¸Â種 XML çÂÂ調å³æÂÂ(æÂÂæ¨æÂÂéÂÂå åÂÂè½çÂÂ)ï¼ å®Âä¸ÂéÂÂæ¯使ç¨é Âè¨Âå Âç´ ç XML (ä¹Âå«å widgets)ãÂÂ使ç¨ XUL çÂÂ好èÂÂï¼Âæ¯å çºå®Â使ç¨äºÂÃ¥ÂÂæ Âè¦Âè¼Â(dynamic overlays)çÂÂæÂÂè¡ÂãÂÂÃ¥ÂÂæ Âè¦Âè¼ÂæÂÂè¡Âå¯以è®ÂéÂÂç¼è ä¸ÂéÂÂè¦Âæ¹è®ÂÃ¥ÂÂæ¬ä»Âé¢çÂÂç¨Âå¼Â碼çÂÂæ æ³Âä¸Âï¼Âå»修æ¹è¦ÂçªÂçÂÂ使ç¨è ä»Âé¢ãÂÂå¨ä¸ÂéÂÂæ´åÂÂÃ¥ÂÂå§Âç¨Âå¼Â碼çÂÂæ æ³Âä¸Âï¼Âå¯以è®ÂæÂÂÃ¥ÂÂå°Â注æ¼è¨Âè¨ÂæÂÂÃ¥ÂÂçÂÂå¥Â件ï¼ÂèÂÂä¸Âç¨æÂÂå¿ÂéÂÂè¦ÂéÂÂè¤ÂéÂÂç¼çÂÂÃ¥ÂÂé¡ÂãÂÂå¨éÂÂÃ¥ÂÂç« ç¯Âï¼ÂæÂÂÃ¥ÂÂè¦Âä¾ÂçÂÂçÂÂè¨Âè¨Â工堷åÂÂç XUL å¿ è¦Âæ¨Â示ãÂÂè¨Âä½Âï¼ÂXUL å å æ¯ç¨ä¾Â建æ§Â工堷åÂÂèÂÂå·²ãÂÂçºäºÂè®Â工堷åÂÂå¯以éÂÂä½Âï¼ÂæÂÂÃ¥ÂÂå¿ é Â使ç¨ JavaScript ï¼ÂéÂÂé¨份å°Âå¨第å Âç« æÂÂå°ãÂÂ
å¨ content ç®éÂÂ裡ï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂÃ¥ÂÂçº tuttoolbar.xul çÂÂæªÂæ¡ÂãÂÂå¨你建ç«Â好ä¹Âå¾Âï¼Âç®éÂÂçÂÂçµÂæ§ÂæÂÂæ¯éÂÂ樣ï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶Â建ç«Â好éÂÂÃ¥ÂÂæªÂæ¡Âï¼Âå¯以éÂÂè¡Âå°éÂÂå§Âè¨Âè«Â堧容ãÂÂé¨èÂÂé²è¡ÂçÂÂè ³æÂ¥ï¼ÂæÂÂæÂÂå°ÂæªÂæ¡ÂçÂÂæÂÂæÂÂ堧容ï¼Âä¸ÂæÂ¥ä¸ÂæÂ¥å°ä»Âç´¹ãÂÂéÂÂæÂÂè®ÂéÂÂç¨ÂçÂÂèµ·ä¾Âæ´簡å®ï¼Âå¨éÂÂç« ç¯ÂçÂÂæÂÂå¾Âï¼ÂéÂÂÃ¥ÂÂæªÂæ¡ÂæÂÂç¸ç¶å¥堨ãÂÂ
å çº XUL åªæ¯ä¸Â種 XML çÂÂ調å³æÂÂï¼ÂæÂÂ以第ä¸Âè¡Âå¿ é Âæ¯使ç¨ XML çÂÂ宣åÂÂï¼Â
<?xml version="1.0"?>
ç¾å¨ï¼Â宣åÂÂéÂÂæ¯ä¸Âå XML çÂÂæªÂæ¡Âä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå°±å¯以éÂÂå§ÂèÂÂç± overlay å Âç´ è¨Âè¨Âè¦Âè¼ÂäºÂãÂÂéÂÂÃ¥ÂÂå Âç´ å°ÂæÂÂæ¯éÂÂæ´份æÂÂ件çÂÂæ ¹å Âç´ ãÂÂæÂÂå¥話說ï¼ÂæÂÂæÂÂå ¶ä»ÂçÂÂå Âç´ å¿ é Âå¨ <overlay> è </overlay> ä¹ÂéÂÂãÂÂéÂÂæ¯ overlay çÂÂèµ·ä¾ÂçÂÂ樣åÂÂï¼Â
<overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> </overlay>
éÂÂÃ¥ÂÂå Âç´ æÂÂå ©åÂÂ屬æ§ï¼Âid è xmlns ãÂÂéÂÂè· HTML é¡Âä¼¼ï¼Âid çÂÂå¼忠é Âæ¯å¯ä¸ÂçÂÂãÂÂæ´éÂÂè¦ÂçÂÂæ¯ï¼ÂéÂÂä¹Âå¿ é Âæ¯æ´åÂÂçÂÂ覽å¨å¯ä¸ÂçÂÂå¼ãÂÂéÂÂ裡æÂÂä¸ÂÃ¥ÂÂå¯以è®Â你確å®ÂæÂÂ使ç¨ç ID æ¯å¯ä¸ÂçÂÂæ¹æ³ÂãÂÂä¾Âå¦Âï¼Âä¸Âé¢çÂÂç¯Âä¾ÂãÂÂä½ å¯以注æÂÂå°æÂÂ使ç¨亠TutTB éÂÂé ÂçÂÂÃ¥ÂÂç¼ä¾Âå®Â義 id 屬æ§çÂÂå¼ãÂÂ使ç¨符åÂÂä½ çÂÂå¥Â件åÂÂ稱éÂÂé ÂçÂÂÃ¥ÂÂç¼ï¼ÂéÂÂæÂÂ使 ID æ¯å¯ä¸ÂçÂÂå¯è½æ§æÂÂé«ÂãÂÂ並ä¸Â注æÂÂå°ï¼Â實éÂÂçÂÂå¼æ¯ä¸ÂéÂÂè¦Âå å« overlay çÂÂÃ¥ÂÂç¼ï¼ÂæÂÂéÂÂ麼åÂÂæ¯æ¹便æÂÂ追蹤æÂÂ使ç¨çÂÂÃ¥ÂÂ稱æ¯åÂÂä»Â麼ç¨çÂÂãÂÂ
第äºÂÃ¥ÂÂ屬æ§ï¼Âxmlnsï¼Âç¨ä¾ÂæÂÂå®Â使ç¨æ¼è¦Âè¼ÂçÂÂå½åÂÂ空éÂÂãÂÂæ¢ç¶éÂÂæ¯ XUL æÂÂ件ï¼ÂæÂÂÃ¥ÂÂå¿ é Âå®Â義 XUL çÂÂå½åÂÂ空éÂÂï¼ÂéÂÂæ¯你æÂÂä¸Âç´ç¨å°çÂÂå¼ãÂÂ
工堷箱èÂÂ工堷å (The Toolbox and Toolbar)
æÂÂæÂÂçÂÂ工堷åÂÂæÂÂ該被éÂÂä¸Âå¨工堷箱ä¸ÂãÂÂæÂÂÃ¥ÂÂ使ç¨ toolbox å Âç´ ä¾ÂæÂÂå®Âä¸ÂÃ¥ÂÂ工堷箱(è¨Âä½Âï¼ÂéÂÂÃ¥ÂÂå Âç´ å¿ é Â被æ¾置å¨ overlay ä¹ÂéÂÂãÂÂ)ï¼Â
<toolbox id="navigator-toolbox"> </toolbox>
注æÂÂå°ï¼ÂéÂÂå id 屬æ§æÂÂä¸ÂÃ¥ÂÂé Âè¨Âå¼ï¼Ânavigator-toolbox ã éÂÂÃ¥ÂÂç¹å®ÂçÂÂå¼表示çº Firefox è¦ÂçªÂä¸Â主è¦ÂçÂÂ工堷箱å Âç´ ï¼Âè·ÂçÂÂ覽工堷åÂÂãÂÂé¸å®åÂÂãÂÂ網åÂÂÃ¥ÂÂï¼ÂæÂÂæ¯堶ä»Âé¡Âä¼¼çÂÂæ§å¶é¸頠ä¸Â樣ãÂÂèÂÂç±æÂÂå®ÂéÂÂÃ¥ÂÂç¹åÂ¥çÂÂ工堷åÂÂï¼ÂæÂÂÃ¥ÂÂå¯以確å®ÂéÂÂÃ¥ÂÂ工堷åÂÂæÂÂèÂÂå ¶ä»ÂçÂÂ工堷åÂÂé æÂÂå¨ä¸Âèµ·ãÂÂæÂÂ建è°你總æ¯è®Âä½ çÂÂ工堷åÂÂæ¾å¨éÂÂÃ¥ÂÂç¹å®ÂçÂÂ工堷箱ä¸Âï¼ÂéÂÂä¸Âåªè®Âä½ æÂÂçÂÂèµ·ä¾Âä¸Âè´çÂÂ工堷åÂÂï¼Âä¹Âå¯以è®Âä½ å¨ ãÂÂ檢è¦Â>工堷åÂÂã ä¸Âï¼Âå¿«éÂÂå°å°Âä½ çÂÂ工堷åÂÂé±èÂÂæÂÂæ¯顯示ãÂÂ
è®ÂæÂÂÃ¥ÂÂå°Â注æÂÂÃ¥ÂÂæ¾åÂÂå° toolbar å Âç´ ï¼ÂæÂÂÃ¥ÂÂæÂÂå°ÂéÂÂÃ¥ÂÂå Âç´ æ¾å¨ toolbox ä¹Âä¸ÂãÂÂçÂÂçÂÂéÂÂÃ¥ÂÂç¯Âä¾Âï¼Â
<toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> </toolbar>
è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂéÂÂÃ¥ÂÂå Âç´ çÂÂ屬æ§ï¼Â
- toolbarname - éÂÂÃ¥ÂÂå Âç´ æÂÂå®Âå¥Â件çÂÂÃ¥ÂÂ稱(éÂÂæÂÂæ¯你å¨ãÂÂ檢è¦Â>工堷åÂÂãÂÂçÂÂå°çÂÂæÂÂÃ¥ÂÂ)ãÂÂ
- accesskey - 給éÂÂÃ¥ÂÂ工堷åÂÂæÂÂå®ÂÃ¥ÂÂæ¯Âï¼Âç¨ä¾Âç¶ä½Âå¿«éÂÂéµ使ç¨ãÂÂå¨éÂÂÃ¥ÂÂ工堷åÂÂæÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂ使ç¨大寫ç T ãÂÂéÂÂç¶éÂÂæ¯éÂÂå¿ è¦ÂçÂÂ屬æ§ï¼ÂéÂÂæ¯強çÂÂ建è°你使ç¨å®Âï¼ÂéÂÂè½è®Â使ç¨è åªè¦Âç¨快éÂÂéµ就è½éÂÂÃ¥ÂÂæÂÂéÂÂéÂÂä½ çÂÂ工堷åÂÂãÂÂ
- class - çº工堷åÂÂæÂÂå®Âç¹å®ÂçÂÂ樣å¼Âé¡Âå¥ãÂÂé Âè¨Âå¼ chromeclass-toolbar æ¯ç¨ä¾Âè¦Âç¯Â工堷åÂÂ顯示模å¼ÂçÂÂé¡Âå¥ï¼ÂÃ¥ÂÂ樣å°ï¼ÂéÂÂæ¯建è°使ç¨çÂÂéÂÂå¿ è¦Â屬æ§ãÂÂ
- context - æÂÂå®Âç¶å¨工堷åÂÂä¸ÂæÂÂå³éµæÂÂï¼ÂæÂÂ顯示çÂÂ工堷åÂÂé¸å®(context menu)ãÂÂä½ å¯以æÂÂä¾Âä½ çÂÂé¸å® ID å¼ï¼ÂæÂÂæ¯使ç¨ toolbar-context-menu ä¾Âå°Âé¸å®æ¾置å¨ãÂÂ檢覠> 工堷åÂÂãÂÂãÂÂ
- hidden - æÂÂå®Â工堷åÂÂæ¯å¦é±èÂÂãÂÂé Âè¨ÂçÂÂæ æ³Âä¸Âï¼ÂæÂÂÃ¥ÂÂè¦Âè®Â使ç¨è çÂÂè¦ÂæÂÂÃ¥ÂÂçÂÂ工堷åÂÂï¼ÂæÂÂ以è¨Âå®ÂéÂÂÃ¥ÂÂå¼çº false (ç¸åÂÂçº ture )ãÂÂ
- persist - This attribute is a space separated list of attributes that should persist across browser sessions. å¨ä¸Âé¢çÂÂç¯Âä¾Âï¼ÂæÂÂ使ç¨ hidden ï¼Âç¨ä¾ÂÃ¥ÂÂ訴 Firefox å¨ sessions è¨Âä½Â工堷åÂÂçÂÂé±èÂÂçÂÂæ ÂãÂÂ注æÂÂå°ï¼Âå¦ÂæÂÂä½ çÂÂ工堷åÂÂæ²ÂæÂÂ使ç¨ id 屬æ§ï¼Âå persist 屬æ§ä¸ÂæÂÂç¼çÂÂä½Âç¨ï¼ÂæÂÂ以è¦Â確å®Âä½ æÂÂçº你çÂÂ工堷åÂÂæÂÂå® id å Âç´ ãÂÂ
ä½ å¯以å¨ XUL Planet toolbar element's attributes çÂÂå°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂ建ç«Â好çÂÂè¦Âè¼ÂæªÂæ¡Â[View XUL Overlay Revision 1]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> </toolbar> </toolbox> </overlay>
工堷åÂÂæÂÂé (Toolbar Buttons)
å¨ Firefox ä¸Âï¼Â工堷åÂÂæÂÂéÂÂæÂÂä¸Â種ï¼Âä¸Âè‹ÂÂé¸å®ãÂÂæÂÂéÂÂé¸å®ãÂÂéÂÂäºÂé½æ¯ç¨ toolbarbutton ä¾Â建ç«ÂçÂÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂå¥çÂÂçÂÂãÂÂè¨Âä½Âï¼ÂéÂÂäºÂå Âç´ å¿ é Âæ¾å¨ toolbar å Âç´ ä¹Âä¸ÂãÂÂ
ä¸Âè¾ÂÂé (Normal Buttons)
éÂÂæ¯ç¨ä¾Â建ç«Âä¸ÂèÂÂæÂÂéÂÂï¼Â
<toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" />
å®ÂæÂÂä¹Âå¾Âï¼Âä¾ÂçÂÂçÂÂéÂÂÃ¥ÂÂå Âç´ çÂÂ屬æ§ï¼Â
- tooltiptext - ç¶æ»Â鼠移åÂÂå°æÂÂéÂÂä¸ÂæÂÂåºç¾çÂÂ說æÂÂãÂÂ
- label - 工堷åÂÂæÂÂéÂÂ顯示çÂÂæÂÂÃ¥ÂÂãÂÂ
- oncommand - ç¶ oncommand äºÂ件觸ç¼æÂÂ(æÂÂä¸ÂæÂÂéÂÂ)ï¼Âä½ æÂÂæÂÂå®ÂçÂÂç¨Âå¼Â碼ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼Â使ç¨ TutTB_Search()å½å¼Âï¼ÂæÂÂÃ¥ÂÂå°Âå¨第å Â章詳細說æÂÂãÂÂ
ä½ å¯以å¨ XUL Planet toolbarbutton element's attributes æ¾å°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
é¸å®æÂÂé (Menu Buttons)
ç¶é»ÂæÂÂæÂÂéÂÂé¸å®æÂÂï¼ÂæÂÂåºç¾ä¸ÂæÂÂå¼Âé¸å®ã åÂÂ管éÂÂÃ¥ÂÂæÂÂéÂÂæ¨Âè¨Âé¡Âä¼¼ä¸Âè¾ÂÂéÂÂæ¨Âè¨Âï¼ÂæÂÂÃ¥ÂÂéÂÂæ¯忠é Âå 堥 menupopup å Âç´ ï¼Âè®Âé¸å®以æÂÂÃ¥ÂÂæ³è¦ÂçÂÂ樣åÂÂåºç¾ãÂÂçºäºÂç°¡æ½Âé»Âï¼Âä¸Âé¢çÂÂç¯Âä¾Âåªå å«堩åÂÂé¸å®頠ç®ãÂÂ
<toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton>
toolbarbutton æÂÂå ©åÂÂè¦Â注æÂÂçÂÂè®ÂÃ¥ÂÂãÂÂ第ä¸Âï¼Âtype 屬æ§æÂÂå®Â亠menu çÂÂå¼ï¼Â說æÂÂäºÂéÂÂæ¯åÂÂé¸å®æÂÂéÂÂï¼ÂèÂÂä¸Âæ¯ä¸Âè¾ÂÂéÂÂãÂÂ第äºÂï¼Âä½ æÂÂ注æÂÂå°éÂÂ裡é¢æ²Âæ oncommand 屬æ§ãÂÂå çºé¸å®æÂÂéÂÂçÂÂå¯ä¸Âç®çÂÂæ¯çºäºÂ顯示跳åºå¼Âé¸å®ï¼Â並ä¸ÂéÂÂè¦Âå·è¡Âä»»ä½Âç¨Âå¼Â碼ï¼ÂèÂÂ顯示é¸å®çÂÂÃ¥ÂÂä½ÂæÂÂç± Firefox èªåÂÂå®ÂæÂÂãÂÂ
ä¹Âè«Â注æÂÂå° menupopup ï¼Âmenuitem ï¼Âmenuseparator éÂÂä¸ÂÃ¥ÂÂå Âç´ ãÂÂmenupopup æÂÂæÂÂé¸å®頠ç®çÂÂ容å¨ï¼Âç¨ä¾Â建ç«ÂèÂÂ顯示é¸å®ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Â裡ï¼ÂéÂÂÃ¥ÂÂå Âç´ æ²ÂæÂÂ屬æ§ãÂÂÃ¥ÂÂ樣å°ï¼Âmenuseparator ä¹Âå¾Âç°¡å®ï¼Âå¨ä¸ÂæÂÂå¼Âé¸å®ä¸Âæ¾置水平åÂÂéÂÂç·Âï¼Âç¨ä¾ÂÃ¥ÂÂéÂÂä¸ÂÃ¥ÂÂçÂÂé¸å®ãÂÂ
menuitem ç¨Âå¾®æÂÂé»Âè¤ÂéÂÂãÂÂå¨ä¸Âé¢çÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂæÂÂå®ÂçÂÂ屬æ§ï¼Â
- label - æÂÂå®Âé¸å®頠ç®çÂÂæÂÂÃ¥ÂÂãÂÂ
- tooltiptext - éÂÂÃ¥ÂÂ屬æ§就åÂÂæ¯æÂÂÃ¥ÂÂå¨ toolbarbutton çÂÂå°çÂÂï¼Âä½Âæ¯æÂÂä¸Âé»Âè¦Âè¦åÂÂçÂÂãÂÂç±æ¼ Firefox ç bug (bug #147670)ï¼ÂéÂÂÃ¥ÂÂ屬æ§æ¯忠è¦ÂçÂÂãÂÂå¦ÂæÂÂ你決å®Âå¾ menuitem ä¸ÂåªæÂÂéÂÂÃ¥ÂÂ屬æ§ï¼Âç¶使ç¨è å°Âæ»Â鼠移åÂÂå°é¸å®頠ç®æÂÂï¼ÂæÂÂçÂÂä¸Âå°æÂÂ示說æÂÂãÂÂé¸å®ä¸ÂæÂÂ顯示工堷æÂÂ示ï¼ÂéÂÂçÂÂæ¯åÂÂ令人ä¸Â滿æÂÂçÂÂãÂÂç¹è²ãÂÂï¼Â
ä½ å¯以å¨ XUL Planet menuitem element's attributes æ¾å°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
æÂÂéÂÂé¸å® (Button-Menu Buttons)
第ä¸Âä¹Âæ¯æÂÂå¾ÂçÂÂæÂÂéÂÂé¸å®æ¯ä¸Â種ä¹Âä¸ÂæÂÂè¤ÂéÂÂçÂÂãÂÂ實éÂÂä¸Âï¼ÂçµÂÃ¥ÂÂäºÂÃ¥ÂÂ堩種æÂÂéÂÂï¼ÂæÂÂä¾Âå¯é»ÂæÂÂæÂÂéÂÂçÂÂä¸ÂæÂÂå¼Âé¸å®ãÂÂ
ãÂÂä¸Âä¸Âé ÂãÂÂèÂÂãÂÂä¸Âä¸Âé ÂãÂÂçÂÂ覽é¸å®æ¯éÂÂÃ¥ÂÂæÂÂéÂÂé¸å®çÂÂç¯Âä¾Âï¼ÂéÂÂæ¯éÂÂè¦Â建ç«ÂçÂÂæ¨Âè¨Âï¼Â
<toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton>
æÂÂå ©åÂÂå¼å¾Â注æÂÂçÂÂè®ÂÃ¥ÂÂï¼Âå¨ toolbarbutton ç type 屬æ§æÂÂå®ÂäºÂå¼ menu-button ï¼ÂèÂÂä¸ÂæÂÂå¦å¤Âä¸Âè¡Âç¨Âå¼Â碼 oncommand ï¼ÂæÂÂæÂÂå¨第å Â章解éÂÂéÂÂé¡Âå¤ÂçÂÂç¨Âå¼Â碼ãÂÂæÂ¥èÂÂ注æÂÂå°ï¼ÂéÂÂ裡æÂÂè·ÂãÂÂä¸Âè¾ÂÂéÂÂãÂÂä¸Â樣ç toolbarbutton æ oncommand 屬æ§ï¼Â以åÂÂå¨ãÂÂé¸å®æÂÂéÂÂãÂÂ裡çÂÂå·¢çÂÂå Âç´ menupopup è menuitem ãÂÂ
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂè¨Âè«Âå®Âä¸ÂÃ¥ÂÂçÂÂæÂÂéÂÂï¼Âä¾ÂçÂÂçÂÂç¨Âå¼Â碼çÂÂ樣åÂÂ[View XUL Overlay Revision 2]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbar> </toolbox> </overlay>
ä¸ÂæÂÂå¼Â編輯å (Drop-Down Edit Box)
ä¸Âä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂè¦Âå¨工堷åÂÂå 堥çÂÂæ¯ä¸ÂæÂÂå¼Â編輯åÂÂãÂÂéÂÂæ¯ç¨ menulist ä¾Â建ç«ÂçÂÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼ï¼Â
<toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem>
注æÂÂå°ï¼ÂæÂÂÃ¥ÂÂæ menulist æ¾å¨ toolbaritem ä¹Âä¸ÂãÂÂä»»ä½Âä¸ÂÃ¥ÂÂå¨ toolbar çÂÂé  ç®é½ä¸Âæ¯工堷åÂÂæÂÂéÂÂï¼Âå¨ toolbaritem 裡é ÂçÂÂæÂÂæ¯ãÂÂä¹Âè«Â注æÂÂå°ï¼ÂæÂÂÃ¥ÂÂçº toolbaritem æÂÂå®Â亠id ï¼Âä¸Âè¨Âå®ÂäºÂ寬度(èÂÂç±å©ç¨亠persist 屬æ§)ãÂÂ
menulist æÂÂæ¯çÂÂæ£ç¨ä¾Â建ç«Âä¸ÂæÂÂå¼Â編輯åÂÂçÂÂãÂÂæÂÂå¹¾åÂÂå¨éÂÂÃ¥ÂÂå Âç´ åºç¾çÂÂæ°屬æ§ï¼Â
- editable - ç¶è¨Âå®Âçº true æÂÂï¼Â使ç¨è å¯以å¨編輯åÂÂä¸ÂæÂÂÃ¥ÂÂãÂÂ
- flex - 使éÂÂÃ¥ÂÂå Âç´ æ¯å¯è®ÂÃ¥ÂÂçÂÂãÂÂéÂÂæ¯åÂÂæ´æ¸å¼ï¼Âç¸å°Âæ¼堶ä»Âå¯è®ÂÃ¥ÂÂ工堷åÂÂå Âç´ ï¼ÂæÂÂå®Â堶大å°ÂãÂÂè¨Âå®Âå¼ 2 代表èÂÂè¨Âå®Âå¼ 1 çÂÂå ©åÂÂ寬ï¼Â0 Ã¥ÂÂæ¯ä¸Âè½è®ÂÃ¥ÂÂçÂÂåºå®Â寬度ãÂÂ
- minwidth - æÂÂå°Â寬度ï¼Âå®ä½ÂçºåÂÂç´ ãÂÂ
- width - Ã¥ÂÂå§Â寬度ï¼Âå®ä½ÂçºåÂÂç´ ãÂÂ
- onkeypress - ç¶使ç¨è 輸堥æÂÂÃ¥ÂÂæÂÂï¼Âç¨ä¾Âå·è¡ÂçÂÂç¨Âå¼Â碼ãÂÂ
ä½ å¯以å¨ XUL Planet menulist element's attributes çÂÂå°å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
è·ÂæÂÂÃ¥ÂÂä¹ÂÃ¥ÂÂçÂÂå°çÂÂãÂÂé¸å®æÂÂéÂÂãÂÂä¸Â樣ï¼Âå¨ menulist 裡ç menupopup å å«亠menuitem å Âç´ ãÂÂonpopupshowing éÂÂÃ¥ÂÂäºÂ件æÂÂå¨編輯åÂÂçÂÂé¸å®頠ç®顯示åÂÂ觸ç¼ï¼Âå ¶ä¸ÂæÂÂå®Âä¸ÂÃ¥ÂÂè½åÂÂæ Â寫堥é¸å®頠ç®çÂÂå½å¼Âï¼ÂéÂÂÃ¥ÂÂå½å¼ÂæÂÂÃ¥ÂÂç¨Âå¾ÂæÂÂæÂÂÃ¥ÂÂãÂÂä½ ä¹Âå¯以å 堥éÂÂæ ÂçÂÂé¸å®ï¼ÂéÂÂç¨Âè·ÂãÂÂé¸å®æÂÂéÂÂãÂÂæ¯ä¸Â樣çÂÂãÂÂ
ç¾å¨ï¼ÂéÂÂÃ¥ÂÂå¥Â件已ç¶Âè®Âå¾Âæ´堷é«Âä¸Âé»ÂäºÂï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼[View XUL Overlay Revision 3]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbar> </toolbox> </overlay>
å¯調æ´çÂÂ移é§Âæ¨Â訠(Resizing Gripper)
éÂÂè¨Âå¾Âä¹ÂÃ¥ÂÂå å«å¨ menulist 丠toolbaritem å Âç´ æÂÂæÂÂå°ç persist 屬æ§åÂÂï¼Âè¨Âå®ÂéÂÂÃ¥ÂÂ屬æ§以è®ÂæÂÂÃ¥ÂÂå¨çÂÂ覽å¨使ç¨æÂÂéÂÂï¼Âå¯以å²åÂÂæÂÂå°ÂÃ¥ÂÂçÂÂ寬度ãÂÂçºäºÂè®Â使ç¨è å¯以æ¹è®Â寬度ï¼ÂæÂÂÃ¥ÂÂè¦ÂæÂÂ侠移é§Âæ¨Â訠ãÂÂç¨ä¾ÂÃ¥ÂÂéÂÂ件äºÂçÂÂå Âç´ æ¯ splitter ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂç¨Âå¼Â碼ï¼Â
<splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter>
éÂÂæ¯ splitter çÂÂ屬æ§ï¼Â
- state - æÂÂå®ÂÃ¥ÂÂå²æ¨Âè¨Âæ¯å¦æºçÂÂ(é±èÂÂ)堧容@open å¼æÂÂå®Âä¸Â管æ¯å¦æÂÂ堧容çÂÂ顯示ãÂÂ
- collapse - 決å®ÂåªéÂÂç splitter 被é±èÂÂãÂÂæÂÂÃ¥ÂÂ使ç¨ none ï¼Âä¸Âè®Âä»»ä½Âä¸ÂéÂÂç splitter 被é±èÂÂãÂÂ
- resizebefore - ç¶ splitter æ¹è®ÂæÂÂï¼ÂæÂÂå® splitter å·¦éÂÂçÂÂåªåÂÂå Âç´ å¿ é Â被éÂÂæ°調æ´ãÂÂç¶ splitter 移åÂÂæÂÂï¼Â使ç¨ closest ä¾ÂéÂÂæ°調æ´æÂÂé 迠splitter å·¦éÂÂçÂÂ編輯åÂÂãÂÂ
- resizeafter - ç¶ splitter æ¹è®ÂæÂÂï¼ÂæÂÂå® splitter å³éÂÂçÂÂåªåÂÂå Âç´ å¿ é Â被éÂÂæ°調æ´ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Â裡ï¼ÂæÂÂÃ¥ÂÂ使ç¨ farthest ä¾ÂéÂÂæ°調æ´æÂÂå³éÂÂçÂÂå½Âæ§空éÂÂãÂÂ
vbox æ¯ç¨ä¾Âè¨Âå®Â樣å¼ÂçÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¨第äºÂç« è¨Âè«Âé¢æ¿æÂÂï¼ÂæÂÂå°éÂÂé»Âã 你å¯以å¨ XUL Planet splitter element's attributes çÂÂå°æ´å®Âæ´çÂÂÃ¥ÂÂèÂÂæÂÂçÂȋÂÂ
è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå å« splitter è toolbaritem çÂÂè¦Âè¼Âç¨Âå¼Â碼[View XUL Overlay Revision 4]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter> <toolbaritem flex="0"> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbaritem> </toolbar> </toolbox> </overlay>
çºäºÂé¿å Â移é§Âæ¨Âè¨Âè¨ÂÃ¥ÂÂçÂÂ細微顯示åÂÂé¡Âï¼ÂæÂÂÃ¥ÂÂéÂÂéÂÂè¦Â建ç«Âé¡Âå¤Âç toolbaritem ï¼ÂéÂÂèÂÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂå¨ãÂÂé¸å®æÂÂéÂÂãÂÂä¸ÂçÂÂæÂÂå°ÂæÂÂéÂÂæÂÂÃ¥ÂÂçÂÂä¸Â樣ã åÂÂä¸Â次確宠flex 屬æ§çÂÂå¼çº 0ï¼ÂéÂÂå°ÂæÂÂé¿å Âï¼Âç¶æÂÂÃ¥ÂÂçÂÂé¸å®æÂÂéÂÂ被æÂÂæ³å°左éÂÂæÂÂ被移é¤ãÂÂ
æÂ¥èÂÂï¼Âè®ÂæÂÂÃ¥ÂÂÃ¥ÂÂä¾Âå¢Âå 堩åÂÂé  ç®ãÂÂé¦Âå Âï¼Âå° toolbarseparator æ¾置å¨æÂÂå¾Âå ©åÂÂæÂÂéÂÂä¸Âï¼Âæ¤ç®çÂÂæ¯çºäºÂè£Â飾ãÂÂÃ¥ÂÂä¾Âï¼Âå° toolbarspring æ¾置å¨æÂÂå¾Âç toolbaritem å Âç´ ä¹Âå¾ÂãÂÂThis spring will allow us to drag the resizer all the way to the right, so that we can see the full resizing effect in action. éÂÂå ©åÂÂæ¨Â示æ¯å¾Âç°¡å®çÂÂï¼ÂÃ¥ÂÂæ¯éÂÂ樣ï¼Â
<toolbarseparator /> <toolbarspring />
è®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå®Âæ´çÂÂè¦Âè¼Âç¯Âä¾Â[View XUL Overlay Revision 5]ï¼Â
<?xml version="1.0"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbaritem flex="0"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> </toolbaritem> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter> <toolbaritem flex="0"> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarseparator /> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbaritem> <toolbarspring /> </toolbar> </toolbox> </overlay>
第åÂÂç« ï¼ÂÃ¥ÂÂæ ÂéÂÂç¼ (Dynamic Development)
(è¯è ï¼Âå¦ÂæÂÂä¸Âæ³ç¨æ¤éÂÂç¼ç°å¢Âï¼Âå¯以çÂ¥éÂÂæ¤章ï¼Â並ç¨第ä¸Âç« çÂÂæ¹å¼Â測試å¥Â件ãÂÂ)
å¨ Firefox 1.5 ä¸Âï¼ÂÃ¥ÂÂæ Âå¥Â件éÂÂç¼æ¯æ°çÂÂæÂÂè¡Âï¼Âå°ÂéÂÂç¼è èÂÂè¨Âï¼ÂéÂÂæ¯æÂÂæÂÂç¨çÂÂéÂÂå åÂÂè½ãÂÂéÂÂé  æÂÂè¡Âå¯以è®Âä½ å¨éÂÂç¼å¥Â件æÂÂï¼Âå³æÂÂå°çÂÂå°çµÂæÂÂãÂÂç¶你è¦Â測試 XUL è¦Âè¼ÂæÂÂæ¯ JavaScript ç¨Âå¼Â碼æÂÂï¼Âä¸Âç¨æ¯Â次åÂÂéÂÂæ°å°Âè£Âå¥Â件ãÂÂéÂÂä¸Âåªç¯ÂçÂÂäºÂä½ çÂÂæÂÂéÂÂï¼Âä¹Âè®Âä½ è½æ´快éÂÂå°é¤é¯ãÂÂ
é£麼ï¼ÂéÂÂé  ç¹è²æ¯å¦Âä½ÂéÂÂä½ÂçÂÂå¢ï¼ÂéÂÂå°±è¦ÂæÂÂè¬ÂæÂÂÃ¥ÂÂå¨第äºÂ章建ç«Âç chrome 渠å®äºÂãÂÂç´å°ç¾å¨çºæ¢ï¼ÂæÂÂé½éÂÂæ²Âè·Â你說 chrome 渠å®試ä½ÂçÂÂ麼ç¨éÂÂãÂÂå¨éÂÂÃ¥ÂÂæÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂä¸ÂéÂÂå§Â建ç«ÂçÂÂçÂÂæ¬就æ¯ç¹åÂ¥çºåÂÂæ ÂéÂÂç¼èÂÂè¨Âè¨ÂçÂÂãÂÂæÂÂè¨Âä¹Âï¼ÂæÂÂÃ¥ÂÂä¸Âå¿ éÂÂæ°å°Âè£Âé£份çÂÂæÂÂå¥Â件ï¼Âä½ÂéÂÂæ¯æÂÂäºÂæ¹è®ÂéÂÂè¦Âå®ÂæÂÂï¼ÂæÂÂå¯以å°Âè£ÂãÂÂæÂÂå¹¾åÂÂç¨ä¾ÂãÂÂÃ¥ÂÂÃ¥ÂÂãÂÂå¥Â件åÂÂæ ÂéÂÂç¼çÂÂæÂ¥é©Âï¼Âå¨é£ä¹ÂÃ¥ÂÂï¼ÂæÂÂè¦Âå Â給你幾åÂÂ建è°ãÂÂ
注æÂÂäºÂé  (A Word of Warning)
å¥Â件éÂÂç¼æÂÂæÂÂæÂÂæÂÂé»Âå±éªï¼Â尤堶æ¯è¨Â訠XUL è¦Âè¼ÂæªÂæ¡ÂæÂÂãÂÂæÂÂå¼·çÂÂ建è°你è¦Âé¿å ÂéÂÂç¼å¥Â件è·Â平常çÂÂ覽網é Âå ±ç¨ä¸ÂÃ¥ÂÂè¨Âå®ÂæªÂ(profile)ãÂÂæÂÂè¨Âä¹Âï¼Âä½ å¿ é Âçº你çÂÂéÂÂç¼ç°å¢Â建ç«Âä¸ÂÃ¥ÂÂæ°çÂÂè¨Âå®ÂæªÂãÂÂéÂÂå¯以é¿å Â你失å»ä¸ÂäºÂéÂÂéµçÂÂè³ÂæÂÂï¼Âå¦Âï¼Âå²åÂÂçÂÂå¯Â碼ãÂÂcookiesãÂÂæ¸籤æÂÂæ¯堶ä»Âä½ ä¸Âæ³éº失çÂÂæ±西ãÂÂ
æÂÂå¸ÂæÂÂè½åÂÂå¿« Born Geek å¨ç¼表éÂÂæ¼å¦Âä½Â建ç«ÂèÂÂ使ç¨è¨Âå®ÂæªÂçÂÂæÂÂå¸ãÂÂå¨é£ä¹ÂÃ¥ÂÂï¼Âä½ å¯以å ÂçÂÂçÂÂå¨ Mozilla.org çÂÂè¨Âå®ÂæªÂæÂÂ件ãÂÂ建ç«ÂèÂÂ使ç¨è¨Âå®ÂæªÂæ¯å¾Âç°¡å®çÂÂï¼ÂéÂÂæÂÂé¿å Âè®Âä½ é ÂçÂÂçÂÂæ æ³Âç¼çÂÂãÂÂ
å¦Âä½ÂÃ¥ÂÂæ ÂéÂÂç¼ (How to Develop Dynamically)
æÂÂ主è¦ÂçÂÂå·¥ä½Âï¼ÂæÂÂÃ¥ÂÂå·²ç¶Âå¨ chrome 渠å®å®ÂæÂÂ(å³使你éÂÂä¸ÂäºÂ解æÂÂÃ¥ÂÂé£æÂÂÃ¥ÂÂäºÂä»Â麼)ãÂÂç¾å¨ï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂçÂÂï¼Âæ¯ä¸ÂÃ¥ÂÂå° Firefox æÂÂÃ¥ÂÂ硬ç¢Âä¸Âå¥Â件ä½Âç½®çÂÂæªÂæ¡Âï¼ÂæÂÂÃ¥ÂÂå°ÂèÂÂç± pointer æªÂæ¡Âä¾Âå®ÂæÂÂãÂÂ
é¦Âå Âï¼Âå¨你çÂÂé»蠦çÂÂé¨便ä¸ÂÃ¥ÂÂå°æ¹ï¼Â以æÂÂÃ¥ÂÂå¨å®Âè£Â渠å®(install manifest)ä¸ÂæÂÂ使ç¨ç GUID Ã¥ÂÂ稱ï¼Â建ç«Âä¸ÂÃ¥ÂÂæÂÂÃ¥ÂÂæªÂãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂä¸Âï¼ÂæÂÂÃ¥ÂÂ使ç¨ tuttoolbar@borngeek.com ä½ÂçºæªÂÃ¥ÂÂãÂÂä¸Â幸çÂÂæ¯ï¼Âå¨微è»Âè¦ÂçªÂç°å¢Â裡ï¼ÂãÂÂ.comãÂÂçÂÂæªÂæ¡Âæ¯被ç¨ä¾Âç¶ä½Âå·è¡ÂæªÂï¼ÂèÂÂæÂÂÃ¥ÂÂéÂÂè¦ÂçÂÂæ¯æÂÂÃ¥ÂÂæªÂãÂÂä½ å¯以æÂÂãÂÂ.comãÂÂæ¿æÂÂï¼Âä½Âä¹Âè¨Âå¾Âå»修æ¹å¨å®Âè£Â渠å®ç GUIDï¼Â確ä¿Âå ©åÂÂÃ¥ÂÂ稱æ¯ä¸Â樣çÂÂãÂÂ
å¨éÂÂÃ¥ÂÂæªÂæ¡Â裡ï¼ÂæÂÂÃ¥ÂÂå°Âè¦Â輸堥ä¸Âè¡ÂæÂÂÃ¥ÂÂï¼Âå¥Â件å²åÂÂçÂÂçµÂå°Âä½Âç½®ï¼Âä¹Âå°±æ¯åÂÂæ¾ install.rdf è chrome.manifest æªÂæ¡ÂçÂÂç®éÂÂãÂÂå¨æÂÂçÂÂä¾ÂÃ¥ÂÂï¼Âå²åÂÂè·¯å¾Âå¦Âä¸Âï¼Â
C:\Born Geek\TutToolbar
ä½ å¿ é Â使ç¨你èª己è¨Âå®ÂçÂÂè·¯å¾Âï¼Âé¤éÂÂä½ çÂÂè·¯å¾Âè·ÂæÂÂçÂÂä¸Â樣ãÂÂ輸堥å®Âè·¯å¾Âå¾Âï¼Âå²åÂÂæªÂæ¡ÂãÂÂ
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå¿ é Âå°ÂéÂÂÃ¥ÂÂæªÂæ¡Â移åÂÂå°è·ÂéÂÂç¼ç°å¢ÂçÂÂè¨Âå®ÂæªÂ(profile)Ã¥ÂÂä¸ÂÃ¥ÂÂç®éÂÂ(å¦Âï¼ÂC:\Documents and Settings\Administrator\Application Data\Mozilla\Firefox\Profiles)ãÂÂæÂÂÃ¥ÂÂÃ¥ÂÂæÂÂå°çÂÂè¨Âå®ÂæªÂæÂÂ件æÂÂè¨Âè«Âå°è¨Âå®ÂæªÂç®éÂÂçÂÂä½Âç½®ãÂÂç¶你æ¾å°è¨Âå®ÂæªÂç®éÂÂæÂÂï¼Âå°ÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç pointer æªÂæ¡Â移åÂÂå°該ç®éÂÂç extensions ç®éÂÂä¸ÂãÂÂéÂÂæ¯æÂÂçÂÂä¾ÂÃ¥ÂÂï¼Â
+- tl5wlpz3.Nightly/ +- bookmarkbackups/ +- chrome/ +- extensions/ +- tuttoolbar@borngeek.com +- (... other files and folders ...)
ä½ å¯以çÂÂå°æÂÂçÂÂè¨Âå®ÂæªÂæÂÂä¸Â層ç®éÂÂï¼ÂæÂÂ使ç¨以ãÂÂNightlyãÂÂçºåÂÂçÂÂè¨Âå®ÂæªÂï¼Âä¾Âä½ÂçºæÂÂçÂÂå¥Â件éÂÂç¼ç°å¢ÂãÂÂä¸Âæ¦你æ pointer æªÂæ¡Âæ¾å¨é©ç¶çÂÂä½Âç½®ï¼ÂéÂÂå Firefoxï¼Â確å®Â你使ç¨çÂÂæ¯å¥Â件éÂÂç¼çÂÂè¨Âå®ÂæªÂ(Ã¥ÂÂ次æÂÂéÂÂï¼ÂÃ¥ÂÂÃ¥ÂÂæÂÂå°çÂÂè¨Âå®ÂæªÂæÂÂ件æÂÂÃ¥ÂÂ訴你å¦Âä½ÂéÂÂ樣åÂÂ)ã å°ç®åÂÂçºæ¢ï¼Âå¦ÂæÂÂä½ æ¯Â樣é½åÂÂçÂÂæ£確ï¼Âä½ æÂÂçÂÂå°æ²ÂæÂÂé¢æ¿çÂÂç°è²工堷åÂÂãÂÂ
éÂÂç¼é±æ (The Development Cycle)
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶ÂÃ¥ÂÂÃ¥ÂÂäºÂÃ¥ÂÂæ ÂéÂÂç¼ç°å¢Âï¼Âé£è¦Âå¦Âä½ÂÃ¥ÂȌ©ç¨å¢ï¼ÂéÂÂç¨Â堶實æ¯éÂÂ常簡å®çÂÂï¼Â
- 編輯你çÂÂå¥Â件æªÂæ¡Â
- éÂÂæ°éÂÂÃ¥ÂÂå·²æ´æ¹æªÂæ¡ÂæÂÂå¥Âç¨çÂÂè¦ÂçªÂï¼ÂæÂÂæ¯使ç¨ Extension Developer's Extension çÂÂéÂÂæ°æ´çÂÂ(Reload Chrome)ãÂÂ
æÂÂ堩件äºÂæ¯你è¦ÂçÂ¥éÂÂçÂÂï¼Â
- å¦ÂæÂÂä½ æ¹è®Â亠chrome.manifest æªÂæ¡Âï¼Âä½ å¿ é ÂéÂÂæ°éÂÂå Firefox (éÂÂÃ¥ÂÂæªÂæ¡ÂåªæÂÂå¨ç¨Âå¼ÂÃ¥ÂÂÃ¥ÂÂæÂÂæÂÂç¼çÂÂä½Âç¨)ãÂÂ
- å¦ÂæÂÂä½ æ¹è®Â亠install.rdf æªÂæ¡Âï¼Âä½ å¿ é Âæ¹讠pointer æªÂæ¡ÂæÂÂæÂÂÃ¥ÂÂç®éÂÂçÂÂä¿®æ¹æÂÂéÂÂãÂÂå¨ Linux ä¸Âï¼Âä½ åªè¦Â使ç¨ touch æÂÂ令ãÂÂèÂÂå¨ Windows 裡就æÂÂé»Âé£度ï¼Âé¤éÂÂä½ å®Âè£ÂäºÂå¯以使ç¨ touch æÂÂ令ç Cygwin 工堷ãÂÂå¯ä¸Âè¦ÂÃ¥ÂÂçÂÂï¼Âå°±æ¯å¨å¥Â件æÂÂä¸Â層ç®éÂÂ建ç«Âä¸ÂÃ¥ÂÂæ°ç®éÂÂï¼Âç¶å¾Âåªé¤æ°ç®éÂÂ以æ¹è®Âç®éÂÂçÂÂãÂÂä¸Âä¸Â次修æ¹ãÂÂæÂÂéÂÂãÂÂ
ä½ å¯以çÂÂå°ï¼ÂæÂÂÃ¥ÂÂæÂÂäºÂæ¹便çÂÂéÂÂç¼èÂÂé¤é¯工堷ãÂÂéÂÂÃ¥ÂÂéÂÂæ¼ï¼Âå¨ 1.5 çÂÂä¹ÂÃ¥ÂÂçÂÂæ¨ÂæºÂéÂÂç¨Âï¼Âå°±æ¯æ¯Â次å¨å¥Â件éÂÂç¼éÂÂç¨Âé½è¦Âå°Âè£ÂæªÂæ¡ÂãÂÂ
ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂæÂÂéÂÂÃ¥ÂÂéÂÂéÂÂçÂÂ工堷åÂÂè®Âå¾Âæ´æ¼Â亮ä¸Âé»Âå§ï¼Â
第äºÂç« ï¼Âé¢æ¿製你(Skinning the Toolbar)
é¢æ¿æ¯ç±樣å¼Âæ¨ÂæºÂèÂÂÃ¥ÂÂçÂÂæÂÂæ§ÂæÂÂçÂÂãÂÂè¨Âä½Âï¼ÂÃ¥ÂÂ管è¨Âè¨Âé¢æ¿æ¯éÂÂå¿ è¦ÂçÂÂï¼Âä½Âæ¯å®Âè½æÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂ質ãÂÂç¢ç«Â使ç¨è å°Âå¥Â件çÂÂ第ä¸Âå°象æ¯å®ÂçÂÂå¤Âè§Âï¼ÂèÂÂä¸Âæ¯å®ÂçÂÂÃ¥ÂÂè½ãÂÂç¶èÂÂï¼Âå¦ÂæÂÂ你覺å¾Â使ç¨æÂÂÃ¥ÂÂæ¨Â籤è®Âä½ æ¯Âè¼Âèªå¨ï¼ÂæÂÂæ¯ä¸ÂéÂÂè¦Â建ç«Âå¤Âè§Âï¼Âä½ å¯以çÂ¥éÂÂéÂÂÃ¥ÂÂç« ç¯ÂãÂÂ
æ´æ°æªÂæ¡ÂçµÂ槠(Updating the File Structure)
è¨Âè¨Âé¢æ¿çÂÂ第ä¸Âæ¥就æ¯建ç«Âä¸ÂÃ¥ÂÂç®éÂÂï¼Âç¨ä¾ÂÃ¥ÂÂæ¾éÂÂæ¼é¢æ¿çÂÂæªÂæ¡ÂãÂÂå¨ chrome ç®éÂÂä¸Â建ç«Âä¸Âå skin ç®éÂÂãÂÂæªÂæ¡ÂçµÂæ§ÂæÂÂÃ¥ÂÂéÂÂ樣ï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul +- skin/
ç¾å¨æÂÂÃ¥ÂÂæÂÂÃ¥ÂÂæ¾é¢æ¿æªÂæ¡ÂçÂÂå°æ¹äºÂï¼Âä¹Âå¾Âå¿ é Âè¦Âå¨ chrome 裡註åÂÂéÂÂÃ¥ÂÂä½Âç½®ãÂÂ
æ´æ° Chrome 渠å® (Updating the Chrome Manifest)
éÂÂè¨Âå¾ÂæÂÂÃ¥ÂÂå¨第äºÂ章建ç«Âç chrome 渠å®åÂÂï¼ÂæÂÂÃ¥ÂÂå¿ é Âå¨éÂÂÃ¥ÂÂæªÂæ¡Âå 堥ä¸Âè¡Âç¨Âå¼Â碼ï¼Âç¨ä¾Â註åÂÂæÂÂÃ¥ÂÂçÂÂé¢æ¿ãÂÂæ°å 堥çÂÂä½Âç½®(第ä¸Âè¡Â)ï¼Â
content tuttoolbar chrome/content/ overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul skin tuttoolbar classic/1.0 chrome/skin/
æ°å 堥çÂÂéÂÂä¸Âè¡Âç¸ç¶簡å®ï¼ÂèÂÂä¸ÂåªæÂÂÃ¥ÂÂÃ¥ÂÂé¨份ãÂÂ第ä¸Âé¨份ï¼Âskin 說æÂÂéÂÂä¸Âè¡Âè¦Â註åÂÂé¢æ¿çÂÂè³Âè¨ÂãÂÂæÂ¥èÂÂæ¯å¥Â件çÂÂÃ¥ÂÂ稱ï¼ÂéÂÂ裡使ç¨ tuttoolbar ç¶ä½ÂæÂÂÃ¥ÂÂçÂÂå¥Â件åÂÂ稱ãÂÂ第ä¸Âé¨份ï¼Â說æÂÂæÂÂÃ¥ÂÂå°ÂæÂÂæ´å±ÂçÂÂå·²å®Âè£Âå¥Â件åÂÂ稱ï¼ÂãÂÂclassic/1.0ãÂÂæ¯你æÂÂä¸Âç´ç¨å°çÂÂå¼ãÂÂæÂÂå¾Âï¼Âä¹Âæ¯æÂÂéÂÂè¦ÂçÂÂé¨份ï¼Âå°±æ¯å å«é¢æ¿æªÂæ¡ÂçÂÂç®éÂÂè·¯å¾ÂãÂÂ注æÂÂå°éÂÂÃ¥ÂÂè·¯å¾Âå¾Âé¢çÂÂæÂÂç·Â(/)ï¼ÂéÂÂÃ¥ÂÂæÂÂç·Âæ¯忠è¦ÂçÂÂï¼Â確å®Âä½ æÂÂ輸堥ãÂÂ
建ç«ÂÃ¥ÂÂçÂÂæªÂæ¡ (Creating the Image Files)
æÂÂÃ¥ÂÂæÂÂè®Âæ¯ÂÃ¥ÂÂ工堷åÂÂæÂÂéÂÂ使ç¨åÂÂèªçÂÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂå°ï¼ÂéÂÂä¸Âæ¯æÂÂæÂÂæÂÂçÂÂæÂÂæ¯精緻çÂÂä½Âæ³Âï¼Âä½Âæ¯å¯以è®Â人æ´容æÂÂäºÂ解ãÂÂæ´好çÂÂæ¹å¼Âæ¯使ç¨åÂÂÃ¥ÂÂ樣å¼Â表ï¼Âä½Âæ¯é£趠åºéÂÂ份æÂÂÃ¥ÂÂçÂÂç¯ÂÃ¥ÂÂãÂÂ
æÂÂÃ¥ÂÂéÂÂè¦ÂäºÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂä¾Â工堷åÂÂçÂÂçµÂÃ¥ÂÂé¸å®使ç¨ï¼Â主è¦Âé¸å®ãÂÂç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂãÂÂ網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂÃ¥ÂÂçÂÂæÂÂå°Âé¸å®以åÂÂå¯調æ´çÂÂ移é§Âæ¨Âè¨ÂãÂÂå¨ä¸Âé¢çÂÂÃ¥ÂÂ表ä¸Âï¼ÂæÂÂäºÂÃ¥ÂÂæÂÂç¨å¨éÂÂÃ¥ÂÂå¥Â件çÂÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂï¼ éÂÂäºÂÃ¥ÂÂÃ¥ÂÂé½æ¯éÂÂæÂÂç PNG æ ¼å¼ÂæªÂæ¡Âï¼Âå¦ÂæÂÂ你使ç¨ IE æÂÂæ¯堶ä»ÂçÂÂ覽å¨ï¼Âå¯è½ä¸Âè½æ£確å°顯示ãÂÂ
主è¦Âé¸å®åÂÂ示 Main Menu Icon (main.png): http://wiki.moztw.org/uimages/b/b7/Borngeek_main.png
ç¶ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ示 Combined Search Icon (combined.png): http://wiki.moztw.org/uimages/3/36/Borngeek_combined.png
網é ÂæÂÂå°ÂÃ¥ÂÂ示 Web Search Icon (web.png): http://wiki.moztw.org/uimages/9/9c/Borngeek_web.png
Ã¥ÂÂçÂÂæÂÂå°ÂÃ¥ÂÂ示 Images Search Icon (images.png): http://wiki.moztw.org/uimages/6/61/Borngeek_images.png
å¯調æ´移é§Âæ¨Âè¨ÂÃ¥ÂÂ示 Resizing Gripper Icon (gripper.png): http://wiki.moztw.org/uimages/5/50/Borngeek_gripper.png
å°ÂéÂÂäºÂÃ¥ÂÂÃ¥ÂÂå²åÂÂå¨æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç skin ç®éÂÂ裡ï¼ÂæªÂæ¡ÂçµÂæ§ÂæÂÂÃ¥ÂÂéÂÂ樣ï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png
èÂÂç±串æ¥樣å¼Â表å¥Âç¨åÂÂç (Applying the Images with CSS)
ç¾å¨ï¼ÂæÂÂéÂÂäºÂÃ¥ÂÂÃ¥ÂÂå¯以使ç¨ï¼Âé¢æ¿ç®éÂÂä¹Âå·²ç¶Â註åÂÂï¼ÂæÂÂÃ¥ÂÂå¯以éÂÂå§ÂæÂÂÃ¥ÂÂÃ¥ÂÂå¥Âç¨å¨工堷åÂÂæÂÂéÂÂä¸ÂäºÂãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂèÂÂç± CSS ä¾Âå®ÂæÂÂãÂÂå°±å¦ÂæÂÂå¨æÂÂÃ¥ÂÂä¸ÂéÂÂå§ÂæÂÂå°çÂÂï¼Âå¦ÂæÂÂä½ å° CSS ä¸ÂçÂÂæÂÂï¼Âå¯以åÂÂè W3Schools ç excellent CSS tutorial ãÂÂ
è®ÂæÂÂÃ¥ÂÂéÂÂå§Â建章CSS æªÂæ¡Âå§ï¼Âå¨ skin ç®éÂÂä¸Âï¼Â建ç«Âä¸ÂÃ¥ÂÂæªÂÃ¥ÂÂçº tuttoolbar.css çÂÂæªÂæ¡Âï¼ÂæÂÂéÂÂÃ¥ÂÂæªÂæ¡Âè·ÂÃ¥ÂÂÃ¥ÂÂæ¾å¨ä¸Âèµ·ãÂÂæªÂæ¡ÂçµÂæ§Âå¦Âä¸Âï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
å¨說æÂÂç´°ç¯ÂÃ¥ÂÂï¼Âå Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂ樣å¼Â表çÂÂ堧容ï¼Â
#TutTB-MainMenu { list-style-image: url("chrome://tuttoolbar/skin/main.png"); } #TutTB-Combined-Button { list-style-image: url("chrome://tuttoolbar/skin/combined.png"); } #TutTB-Combined-Button > .toolbarbutton-menubutton-button { -moz-box-orient: horizontal; } #TutTB-Web-Button, #TutTB-Combined-Web { list-style-image: url("chrome://tuttoolbar/skin/web.png"); } #TutTB-Combined-Image { list-style-image: url("chrome://tuttoolbar/skin/images.png"); } #TutTB-ResizeBar { background-image: url("chrome://tuttoolbar/skin/gripper.png"); min-height: 22px; min-width: 3px; } #TutTB-ResizeSplitter { background: transparent; border: none !important; }
第ä¸Âé  è¦ÂÃ¥ÂÂæ¯æÂÂå®Â該åÂÂÃ¥ÂÂ給ãÂÂ主è¦Âé¸å®ãÂÂæÂÂéÂÂ使ç¨ãÂÂÃ¥ÂÂ顧ä¸Âä¸Â第ä¸Âç« ï¼ÂæÂÂÃ¥ÂÂ給äºÂ該æÂÂéÂÂä¸Âå ID å¼ï¼ÂTutTB-MainMenuï¼ÂæÂÂÃ¥ÂÂç¨該å¼ä¾Âè¨Âå®ÂæÂÂéÂÂ顯示çÂÂÃ¥ÂÂÃ¥ÂÂãÂÂå¨åÂÂé¢çÂÂäºÂèÂÂ(#)æ¯ ID é¸åÂÂå¨(ID selector)ï¼Âä¹Âå°±æ¯ç¨ä¾ÂæÂÂå® CSS å Âç´ è¦ÂÃ¥ÂÂçÂÂç¹å®ÂèÂÂå¥å¼ãÂÂå¨工堷åÂÂæÂÂéÂÂ裡ï¼ÂæÂÂÃ¥ÂÂ使ç¨ CSS 屬æ§ç list-style-image ä¾ÂæÂÂå®ÂÃ¥ÂÂÃ¥ÂÂãÂÂ注æÂÂå°æÂÂÃ¥ÂÂ使ç¨çÂÂæ¯ chrome è·¯å¾Âï¼Âä¹Âå°±æ¯å¥Â件æªÂæ¡ÂçµÂæ§Âä¸ÂçÂÂÃ¥ÂÂÃ¥ÂÂè·¯å¾Âï¼Â常ç¨çÂÂæ ¼å¼Âå¦Âä¸Âï¼Â
chrome://<packagename>/skin/<image_file_name>
å¨æÂÂÃ¥ÂÂçÂÂç¯Âä¾Â裡ï¼Âå°Âè£ÂÃ¥ÂÂ稱(package name)æ¯ tuttoolbarï¼ÂèÂÂ主è¦Âé¸å®使ç¨çÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ稱çº main.pngãÂÂä½ å¯以çÂÂå°ï¼ÂæÂÂæÂÂçÂÂ工堷åÂÂæÂÂéÂÂ使ç¨é¡Âä¼¼çÂÂè¦ÂÃ¥ÂÂï¼Âå¨ç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂçÂÂé¸å®頠ç®ä¹Âæ¯ä¸Â樣ãÂÂThere's one caveat to handling menu item icons, however. Ã¥ÂÂæ³ä¸Âä¸Âï¼Âå¨ç¶ÂÃ¥ÂÂæÂÂå°Âé¸å®ä¸Âï¼ÂæÂÂÃ¥ÂÂçºé¸å®頠ç®使ç¨äºÂä¸ÂÃ¥ÂÂç¹åÂ¥çÂÂé¡Âå¥å¼ï¼Âmenuitem-iconicï¼ÂéÂÂæ¯ Firefox 堧建çÂÂãÂÂéÂÂÃ¥ÂÂå¼ãÂÂÃ¥ÂÂÃ¥ÂÂãÂÂÃ¥ÂÂ示æ¯æ´使ç¨å®ÂçÂÂæ¯ÂÃ¥ÂÂé¸å®頠ç®ãÂÂ
æ³忠你ä¹Â注æÂÂå°äºÂéÂÂÃ¥ÂÂç¶ÂÃ¥ÂÂæÂÂå°ÂæÂÂéÂÂçÂÂç¹å®Âè¦ÂÃ¥ÂÂï¼Â
#TutTB-Combined-Button > .toolbarbutton-menubutton-button { -moz-box-orient: horizontal; }
éÂÂÃ¥ÂÂç¹åÂ¥ç CSS 屬æ§å¨éÂÂ裡使ç¨ -moz-box-orientï¼ÂéÂÂæÂÂå®ÂæÂÂéÂÂçÂÂæ¨Â籤該å¦Âä½Â顯示ï¼Âæ°´å¹³æÂÂæ¯åÂÂç´顯示ãÂÂ工堷åÂÂæÂÂéÂÂæ¨Â籤çÂÂé Âè¨Âå¼æ¯åÂÂç´顯示ï¼Âä¹Âå°±æ¯顯示å¨åÂÂ示ä¸Âæ¹ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼Âä¸Â使ç¨éÂÂ樣çÂÂæ¹å¼Âï¼ÂæÂÂ以æÂÂÃ¥ÂÂæ¹çº水平顯示ï¼Â以使æ¨Â籤顯示å¨åÂÂ示ä¹Âå¾ÂãÂÂ
å¨èÂÂçÂÂå¯調æ´çÂÂ移é§Âæ¨Âè¨Â(resizing gripper)æÂÂï¼ÂæÂÂå ©æ¢Â樣å¼Â表çÂÂè¦ÂÃ¥ÂÂãÂÂéÂÂè¨Âå¾Âå¨第åÂÂ章裡ï¼ÂæÂÂÃ¥ÂÂå¨åÂÂé¢çÂÂå Âç´ (splitter element)使ç¨ç vbox å Âç´ åÂÂï¼ÂæÂÂÃ¥ÂÂçº移é§Âæ¨Âè¨Â使ç¨亠vbox ä¾Â顯示èÂÂæ¯åÂÂÃ¥ÂÂãÂÂéÂÂ次ï¼ÂæÂÂÃ¥ÂÂ使ç¨ background-image 屬æ§ãÂÂæÂÂÃ¥ÂÂå¿ é ÂèÂÂç± min-height è min-width 屬æ§ï¼ÂæÂÂä¾ÂæÂÂå°Âé«Â度èÂÂæÂÂå°Â寬度ï¼Â以è®Â移é§Âæ¨Âè¨Â顯示åºä¾ÂãÂÂvbox è hbox 屬æ§çÂÂé Âè¨Âå¼å¯è½æ¯ä¾Â堧容大å°Âå¤å®ÂãÂÂç±æ¼ vbox æ¯空çÂÂï¼Âé Âè¨Âå¼就æ¯ 0ï¼ÂéÂÂä¹Âé¿å ÂæÂÂÃ¥ÂÂæÂÂçÂÂå°èÂÂæ¯åÂÂÃ¥ÂÂãÂÂ
æÂÂÃ¥ÂÂä¹ÂçºåÂÂé¢çÂÂå Âç´ æÂÂä¾Âä¸Âæ¢Âè¦ÂÃ¥ÂÂã æÂÂÃ¥ÂÂè®ÂèÂÂæ¯æ¯éÂÂæÂÂçÂÂï¼ÂèÂÂä¸Âä¸Â使ç¨éÂÂæ¡Â(Ã¥ÂÂé¢å Âç´ çÂÂé Âè¨Âå¼æ¯æÂÂ使ç¨éÂÂæ¡ÂçÂÂ)ãÂÂç¾å¨ï¼ÂCSS æªÂæ¡Âå·²ç¶Âå®ÂæÂÂï¼ÂæÂÂÃ¥ÂÂè¦Âè¨Âå®Âè¦Âè¼Â(overlay)以使ç¨å®ÂãÂÂ
使ç¨樣å¼Â表 (Using the Style Sheet)
åªæÂÂä¸Âè¡Âç¨Âå¼Â碼æ¯éÂÂè¦Â被å 堥å¨ XUL è¦Âè¼ÂçÂÂï¼ÂéÂÂç¨ä¾ÂÃ¥ÂÂÃ¥ÂÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂ建ç«ÂçÂÂ樣å¼Â表ãÂÂéÂÂå¿ é Âæ¾置å¨ XML 宣åÂÂæÂÂ令çÂÂä¸Âæ¹ï¼Â以åÂÂè¦Âè¼Â(overlay)å Âç´ ä¹ÂÃ¥ÂÂãÂÂä¸Âé¢ï¼ÂæÂÂÃ¥ÂÂåºè¦Âè¼ÂæªÂæ¡ÂçÂÂÃ¥ÂÂå¹¾è¡ÂéÂÂè¦Âæ´åÂÂçÂÂå°æ¹ï¼Â
<?xml version="1.0"?> <?xml-stylesheet href="chrome://tuttoolbar/skin/tuttoolbar.css" type="text/css"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> (... rest of XUL overlay file ...)
å°±åÂÂæÂÂÃ¥ÂÂå¨樣å¼Â表ä¸ÂçÂÂå°çÂÂÃ¥ÂÂÃ¥ÂÂä¸Â樣ï¼Âchrome è·¯å¾Â被ç¨ä¾ÂæÂÂå®Âä½Âç½®ãÂÂè type 屬æ§åªæ¯æÂÂæÂÂéÂÂæ¯ CSS çÂÂæªÂæ¡ÂãÂÂç¾å¨è®ÂæÂÂÃ¥ÂÂçÂÂçÂÂè¦Âè¼ÂæªÂæ¡Âå¨å 堥éÂÂä¸Âè¡Âå¾ÂçÂÂå®Âæ´堧容[View XUL Overlay Revision 6]ï¼Â
<?xml version="1.0"?> <?xml-stylesheet href="chrome://tuttoolbar/skin/tuttoolbar.css" type="text/css"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbaritem flex="0"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> </toolbaritem> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter> <toolbaritem flex="0"> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarseparator /> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbaritem> <toolbarspring /> </toolbar> </toolbox> </overlay>
å¥å¿Âè¨Âè¦Â測試ï¼Âç¨åÂÂæ ÂéÂÂç¼ç Firefox å¯æÂŽÂÂÃ¥ÂÂï¼Âç¶å¾ÂçÂÂçÂÂå¥Â件çÂÂ樣åÂÂãÂÂæÂ¥ä¸Âä¾Âï¼ÂæÂÂÃ¥ÂÂè¦Âçº工堷åÂÂ注堥çÂÂå½ãÂÂ
第å Âç« ï¼Â主ç¨Âå¼ (Scripting the Toolbar)
å¥Â件éÂÂ常æ¯ç¨ JavaScript å·è¡ÂçÂÂï¼ÂéÂÂæ¯ä¸Â種簡å®æÂÂå¸çÂÂç¨Âå¼ÂèªÂè¨ÂãÂÂä½ å°ÂæÂÂç¼ç¾ï¼ÂæÂÂÃ¥ÂÂçÂÂ工堷åÂÂå¥Â件çÂÂç¨Âå¼Â碼æ¯éÂÂ常簡å®çÂÂãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂ大éÂÂ使ç¨æÂÂ件ç©件模åÂÂ(DOM)ï¼ÂéÂÂå¯以è®ÂæÂÂÃ¥ÂÂèÂÂçÂÂå®ç¨çÂÂå Âç´ ãÂÂ
å¨æÂÂÃ¥ÂÂéÂÂå§ÂÃ¥ÂÂï¼Âä½ è¦Âå ÂçÂ¥éÂÂä¸ÂÃ¥ÂÂéÂÂé»ÂãÂÂid 屬æ§忠é Âæ¯æ´åÂÂçÂÂ覽å¨å¯ä¸ÂçÂÂï¼Âè JavaScript çÂÂè®Âæ¸åÂÂå½å¼Âä¹Âæ¯ãÂÂå¨çÂÂ覽å¨è¦Âè¼Âä¸ÂçÂÂJavaScript æ¯堨åÂÂæ§çÂÂï¼Âå æ¤æÂÂæÂÂæÂÂéÂÂÃ¥ÂÂéÂÂå¶ãÂÂæÂÂÃ¥ÂÂå°ÂæÂÂ使ç¨跠XUL å Âç´ ä¸Â樣çÂÂæÂÂå·§ï¼ÂæÂÂæÂÂçÂÂè®Âæ¸åÂÂå½å¼ÂçÂÂÃ¥ÂÂ稱ï¼Âå°ÂæÂÂæÂÂ以æÂÂÃ¥ÂÂå¥Â件çºåÂÂèµ·å§ÂÃ¥ÂÂ稱ãÂÂæÂÂÃ¥ÂÂ使ç¨ TutTB_ ç¶ä½Âèµ·å§ÂÃ¥ÂÂ稱ï¼ÂæÂÂ以æÂÂÃ¥ÂÂçÂÂæÂÂå°Âå½å¼ÂæÂÂæ¯ TutTB_Search()ãÂÂ
ç¾å¨ï¼Âè®ÂæÂÂÃ¥ÂÂ建章JavaScript æªÂæ¡ÂãÂÂå¨ content ç®éÂÂä¸Âï¼Â建ç«Âä¸Âå tuttoolbar.js çÂÂæÂÂÃ¥ÂÂæªÂãÂÂç®éÂÂçµÂæ§Âå¦Âä¸Âï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- content/ +- tuttoolbar.xul +- tuttoolbar.js +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
å¨建ç«Âä»»ä½Âç¨Âå¼Â碼åÂÂï¼Âå ÂÃ¥ÂÂ訴 XUL æªÂæ¡Â該å¦Âä½Â使ç¨ JavaScript æªÂæ¡ÂãÂÂ
é£絠XUL è JavaScript (Tying XUL to JavaScript)
æÂÂÃ¥ÂÂç XUL æªÂæ¡ tuttoolbar.xul éÂÂè¦Â被åÂÂçÂ¥ç¸å°ÂæÂÂç JavaScript æªÂï¼ÂæÂÂÃ¥ÂÂå¯以使ç¨ä¸Âé¢çÂÂæÂÂè¿°ï¼Â
<script type="application/x-javascript" src="chrome://tuttoolbar/content/tuttoolbar.js" />
éÂÂå¿ é Âæ¾置å¨ overlay å Âç´ ä¹Âä¸ÂãÂÂtype 屬æ§æ¯æÂÂå®Â使ç¨ JavaScriptï¼Âsrc 屬æ§æ¯æÂÂå®ÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç JavaScript æªÂãÂÂ堧容å¦Âä¸Â[View XUL Overlay Revision 7]ï¼Â
<?xml version="1.0"?> <?xml-stylesheet href="chrome://tuttoolbar/skin/tuttoolbar.css" type="text/css"?> <overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://tuttoolbar/content/tuttoolbar.js" /> <toolbox id="navigator-toolbox"> <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden"> <toolbaritem flex="0"> <toolbarbutton id="TutTB-MainMenu" type="menu" tooltiptext="Tutorial Toolbar Main Menu"> <menupopup> <menuitem label="Google Home Page" accesskey="G" tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" /> <menuseparator /> <menuitem label="Born Geek Website" accesskey="B" tooltiptext="Navigate to Born Geek" oncommand="TutTB_LoadURL('http://www.borngeek.com/')" /> </menupopup> </toolbarbutton> </toolbaritem> <toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem> <splitter id="TutTB-ResizeSplitter" state="open" collapse="none" resizebefore="closest" resizeafter="farthest" tooltiptext="Resize the Search Box"> <vbox id="TutTB-ResizeBar" /> </splitter> <toolbaritem flex="0"> <toolbarbutton id="TutTB-Combined-Button" label="Search" type="menu-button" tooltiptext="Combined Search" oncommand="TutTB_Search(event, 'web')"> <menupopup> <menuitem id="TutTB-Combined-Web" label="Web Search" class="menuitem-iconic" tooltiptext="Search the Web" oncommand="TutTB_Search(event, 'web'); event.preventBubble();" /> <menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" /> </menupopup> </toolbarbutton> <toolbarseparator /> <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search the Web" label="Web Search" oncommand="TutTB_Search(event, 'web')" /> </toolbaritem> <toolbarspring /> </toolbar> </toolbox> </overlay>
çºæÂÂéÂÂå ä¸ÂÃ¥ÂÂè½ (Adding Functionality to the Buttons)
éÂÂè¨Âå¾ÂæÂÂÃ¥ÂÂçº工堷åÂÂæÂÂéÂÂæÂÂä¾Âç oncommand 屬æ§åÂÂï¼ÂéÂÂÃ¥ÂÂ屬æ§æ¯æÂÂå®Âç¨Âå¼Â碼å·è¡ÂçÂÂäºÂ件ãÂÂæÂÂÃ¥ÂÂä¹Âå¯以使ç¨ onclick 代æ¿ oncommandï¼Âä½Âæ¯ onclick å°Âéµç¤ç¡æÂÂï¼Âè oncommand å¯以åÂÂæÂÂÃ¥ÂÂæÂÂéµç¤èÂÂæ»Âé¼ çÂÂÃ¥ÂÂä½ÂãÂÂè®ÂæÂÂÃ¥ÂÂÃ¥ÂÂ顧ä¸Âä¸ÂæÂÂå°ÂæÂÂéÂÂï¼Â
oncommand="TutTB_Search(event, 'web')"
éÂÂÃ¥ÂÂå¼å¼å« TutTB_Search() å½å¼Âï¼Âå ¶ä¸Âå å«堩åÂÂå¼ï¼ÂéÂÂÃ¥ÂÂå½å¼Âå¼å«çÂÂäºÂ件(event)ï¼Â以åÂÂæÂÂå°ÂçÂÂ網é Â(web)ãÂÂ
ç¨Âå¼Â碼å¦Âä¸Â[View JavaScript Revision 1]ï¼Â
//////////////////////////////////////////////////////////////////////////////// // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã //////////////////////////////////////////////////////////////////////////////// function TutTB_Search(event, type) { // å°Âè¦ÂçÂÂ覽çÂÂ網å var URL = ""; // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ var isEmpty = false; // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> å Âç´ ) var searchTermsBox = document.getElementById("TutTB-SearchTerms"); // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿ è¦ÂçÂÂ空ç½ // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠var searchTerms = TutTB_TrimString(searchTermsBox.value); if(searchTerms.length == 0) // Is the search terms box empty? isEmpty = true; // If so, set the isEmpty flag to true else // If not, convert the terms to a URL-safe string searchTerms = TutTB_ConvertTermsToURI(searchTerms); // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨è å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã // å¦åÂÂï¼ÂæÂÂå°Â輸堥çÂÂæÂÂÃ¥ÂÂã switch(type) { // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å case "image": if(isEmpty) { URL = "http://images.google.com/"; } else { URL = "http://images.google.com/images?q=" + searchTerms; } break; // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å case "web": default: if(isEmpty) { URL = "http://www.google.com/"; } else { URL = "http://www.google.com/search?q=" + searchTerms; } break; } // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼Â堥網å TutTB_LoadURL(URL); } //////////////////////////////////////////////////////////////////////////////// // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã //////////////////////////////////////////////////////////////////////////////// function TutTB_TrimString(string) { // å¦ÂæÂÂå³堥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ if (!string) return ""; string = string.replace(/^\s+/, ''); // Remove leading whitespace string = string.replace(/\s+$/, ''); // Remove trailing whitespace // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ string = string.replace(/\s+/g, ' '); return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ } //////////////////////////////////////////////////////////////////////////////// // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³堥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®Âå ¨çÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_ConvertTermsToURI(terms) { // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 var termArray = new Array(); // ç¨空ç½åÂÂå ÂÃ¥ÂÂå²åÂÂ串 termArray = terms.split(" "); // ç¨ä¾ÂÃ¥ÂÂæ¾å®Âå ¨çÂÂ網å var result = ""; // å¨åÂÂ串ä¸ÂéÂÂè¿´ for(var i=0; i<termArray.length; i++) { // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé if(i > 0) result += "+"; // 使ç¨ Firefox 堧建ç encodeURIComponent() å½å¼Âå 寠result += encodeURIComponent(termArray[i]); } return result; // å³åÂÂçµÂæ } //////////////////////////////////////////////////////////////////////////////// // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼Âå ¥ç¹å®ÂçÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_LoadURL(url) { // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³堥çÂÂ網å window._content.document.location = url; // Make sure that we get the focus window.content.focus(); }
éÂÂÃ¥ÂÂä½ ç Firefox éÂÂç¼çÂÂæ¬ï¼Âå¨æÂÂÃ¥ÂÂçÂÂ工堷åÂÂå¥Â件輸堥æÂÂå°ÂçÂÂå¼ï¼Âç¶å¾ÂæÂÂä¸Â網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂç¨Âå¼Â碼æÂÂ該æÂÂå·è¡Âï¼Âç¶å¾ÂæÂÂåºç¾æÂÂå°ÂçµÂæÂÂãÂÂéÂÂÃ¥ÂÂÃ¥ÂÂæ ÂéÂÂç¼çÂÂæ¬確實æ¯ç¸ç¶便å©çÂÂå§ï¼Â
æÂÂéÂÂé¸å®çÂÂ注æÂÂäºÂé  (A Special Note About Button-Menu Buttons)
å¨æÂÂÃ¥ÂÂé²堥ä¸Âä¸Â張章ç¯Âä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸Âé»ÂéÂÂæ¼æÂÂéÂÂé¸å®æÂÂè¦Â注æÂÂçÂÂãÂÂÃ¥ÂÂæ³ä¸Âä¸Âï¼ÂéÂÂé¡ÂÃ¥ÂÂçÂÂæÂÂéÂÂæÂÂä¾Âå¯以é»ÂæÂÂçÂÂæÂÂéÂÂèÂÂå½Âåºå¼Âé¸å®(主è¦Âç¯Âä¾Âçºå¾ÂÃ¥ÂÂèÂÂÃ¥ÂÂå¾ÂçÂÂ覽)ãÂÂä¹Âæ³ä¸Âä¸Âï¼Âtoolbarbutton 以åÂÂå å« oncommand ç menuitem å Âç´ ãÂÂç¶工堷åÂÂæÂÂéÂÂçÂÂä¸Âé¨åÂÂ被åÂÂÃ¥ÂÂï¼Âtoolbarbutton å Âç´ ç oncommand ç¨Âå¼Â碼å¦Âä½ æÂÂæÂÂæÂÂçÂÂ被å·è¡ÂãÂÂä½Âæ¯ï¼Âç¶使ç¨è åÂÂÃ¥ÂÂäºÂmenuitem å Âç´ çÂÂå ¶ä¸Âä¸ÂÃ¥ÂÂæÂÂï¼ÂæÂÂç¼çÂÂä»Â麼äºÂï¼Â
ä¸Âåªæ¯ menuitem å Âç´ ç oncommand äºÂ件å·è¡Âï¼Âtoolbarbutton å Âç´ çÂÂäºÂ件ä¹Â被å·è¡ÂãÂÂæÂÂ以堩åÂÂäºÂ件æ¯åÂÂæÂÂå·è¡ÂçÂÂï¼ÂÃ¥ÂÂ管你åªæ¯æ³è¦Âå ¶ä¸Âä¸Â件被å·è¡ÂãÂÂå çº toolbarbutton äºÂ件æ¯æÂÂå¾Âç¼çÂÂçÂÂï¼ÂæÂÂ以實éÂÂå·è¡ÂçÂÂæ¯ toolbarbutton äºÂ件ãÂÂæÂÂå¥話說ï¼Âmenuitem äºÂ件æ²ÂæÂÂæ©ÂæÂÂå·è¡ÂãÂÂé£æÂÂÃ¥ÂÂè¦ÂæÂÂ樣解決éÂÂÃ¥ÂÂÃ¥ÂÂé¡Âå¢ï¼ÂäºÂ實ä¸Âï¼Âæ¯æÂÂ辦æ³ÂçÂÂãÂÂè®ÂæÂÂÃ¥ÂÂå¾ÂÃ¥ÂÂçÂÂç menuitem å Âç´ ï¼Â
<menuitem id="TutTB-Combined-Image" label="Image Search" class="menuitem-iconic" tooltiptext="Search Images" oncommand="TutTB_Search(event, 'image'); event.preventBubble();" />
èÂÂç±使ç¨ DOM å½张preventBubble()ï¼ÂæÂÂÃ¥ÂÂå¯以é¿堠oncommand 被å·è¡ÂãÂÂçºäºÂé¿å Âå¤Âé·夢å¤Âï¼Âè¨Âä½Âä¸Â件äºÂï¼Âç¶你建ç«ÂæÂÂéÂÂé¸å®æÂÂï¼Âè¨Âå¾Âå¨ menuitem å Âç´ ç oncommand 屬æ§å 堥 event.preventBubble()ãÂÂ
çºæÂÂå°ÂÃ¥ÂÂå 堥åÂÂè½ (Adding Functionality to the Search Box)
ç¾å¨ï¼ÂæÂÂÃ¥ÂÂå·²ç¶Âè®ÂæÂÂå°ÂæÂÂéÂÂå¯以使ç¨ï¼ÂæÂ¥ä¸Âä¾Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦Â幫æÂÂå°ÂÃ¥ÂÂå 堥ä¸ÂäºÂÃ¥ÂÂè½ãÂÂè®Â使ç¨è å¯以å¨輸堥åÂÂ串å¾ÂæÂÂä¸ÂãÂÂEnterãÂÂ以å·è¡ÂæÂÂå°ÂãÂÂè¦ÂæÂÂ麼åÂÂå¢ï¼Âè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂè¦Â使ç¨çÂÂå½å¼Âï¼Â
<toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem>
éÂÂ次ï¼ÂæÂÂÃ¥ÂÂ使ç¨ onkeypress 代æ¿ oncommandãÂÂéÂÂÃ¥ÂÂäºÂ件æÂÂå¨使ç¨è å¨æÂÂå°ÂÃ¥ÂÂæÂÂä¸ÂæÂÂéµæÂÂ觸ç¼ãÂÂå¨éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂ建ç«Âä¸ÂÃ¥ÂÂç¸ç¶簡å®ç TutTB_KeyHandler()å½å¼Âï¼Â
function TutTB_KeyHandler(event) { if(event.keyCode == event.DOM_VK_RETURN) TutTB_Search(event, 'web'); }
éÂÂÃ¥ÂÂå½å¼Âåªä¸ÂéÂÂæ¯è¦Â檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被æÂÂä¸ÂãÂÂå¦ÂæÂÂæ¯ï¼ÂTutTB_Search()æÂÂ被å¼å«ãÂÂå¦åÂÂï¼Âä¸ÂÃ¥ÂÂä»»ä½ÂäºÂãÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå 堥æ¤å½å¼Âç JavaScript æªÂæ¡Â[View JavaScript Revision 2]ï¼Â
//////////////////////////////////////////////////////////////////////////////// // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã //////////////////////////////////////////////////////////////////////////////// function TutTB_Search(event, type) { // å°Âè¦ÂçÂÂ覽çÂÂ網å var URL = ""; // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ var isEmpty = false; // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> å Âç´ ) var searchTermsBox = document.getElementById("TutTB-SearchTerms"); // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿ è¦ÂçÂÂ空ç½ // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠var searchTerms = TutTB_TrimString(searchTermsBox.value); if(searchTerms.length == 0) // æÂÂå°Âæ¬Âä½Âæ¯空ç½çÂÂÃ¥ÂÂï¼ isEmpty = true; // æ¯ï¼Âè¨Âå® isEmpty çº true else // ä¸Âï¼Âè½ÂæÂÂçºå®Âå ¨çÂÂ網å searchTerms = TutTB_ConvertTermsToURI(searchTerms); // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨è å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã // å¦åÂÂï¼ÂæÂÂå°Â輸堥çÂÂæÂÂÃ¥ÂÂã switch(type) { // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å case "image": if(isEmpty) { URL = "http://images.google.com/"; } else { URL = "http://images.google.com/images?q=" + searchTerms; } break; // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å case "web": default: if(isEmpty) { URL = "http://www.google.com/"; } else { URL = "http://www.google.com/search?q=" + searchTerms; } break; } // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼Â堥網å TutTB_LoadURL(URL); } //////////////////////////////////////////////////////////////////////////////// // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã //////////////////////////////////////////////////////////////////////////////// function TutTB_TrimString(string) { // å¦ÂæÂÂå³堥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ if (!string) return ""; string = string.replace(/^\s+/, ''); // Remove leading whitespace string = string.replace(/\s+$/, ''); // Remove trailing whitespace // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ string = string.replace(/\s+/g, ' '); return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ } //////////////////////////////////////////////////////////////////////////////// // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³堥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®Âå ¨çÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_ConvertTermsToURI(terms) { // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 var termArray = new Array(); // ç¨空ç½åÂÂå ÂÃ¥ÂÂå²åÂÂ串 termArray = terms.split(" "); // ç¨ä¾ÂÃ¥ÂÂæ¾å®Âå ¨çÂÂ網å var result = ""; // å¨åÂÂ串ä¸ÂéÂÂè¿´ for(var i=0; i<termArray.length; i++) { // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé if(i > 0) result += "+"; // 使ç¨ Firefox 堧建ç encodeURIComponent() å½å¼Âå 寠result += encodeURIComponent(termArray[i]); } return result; // å³åÂÂçµÂæ } //////////////////////////////////////////////////////////////////////////////// // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼Âå ¥ç¹å®ÂçÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_LoadURL(url) { // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³堥çÂÂ網å window._content.document.location = url; // Make sure that we get the focus window.content.focus(); } //////////////////////////////////////////////////////////////////////////////// // TutTB_KeyHandler() 檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被輸堥ãÂÂæ¯çÂÂ話ï¼Âå°±å·è¡ÂæÂÂå° //////////////////////////////////////////////////////////////////////////////// function TutTB_KeyHandler(event) { // [ENTER]被æÂÂä¸ÂäºÂÃ¥ÂÂï¼Âå¦ÂæÂÂæ¯ï¼Âå·è¡ÂæÂÂå° if(event.keyCode == event.DOM_VK_RETURN) TutTB_Search(event, 'web'); }
å¨ä¸Â次ï¼Âå·è¡Âä½ ç Firefox éÂÂç¼çÂÂæ¬ï¼Âå¨æÂÂå°ÂÃ¥ÂÂ輸堥æÂÂå°ÂÃ¥ÂÂ串ï¼Âç¶å¾ÂæÂÂä¸ÂãÂÂEnterãÂÂãÂÂå°±åÂÂæ¯æÂÂä¸ÂæÂÂå°ÂæÂÂéÂÂä¸Â樣ï¼ÂæÂÂå°ÂçµÂæÂÂæÂÂ該æÂÂåºç¾ãÂÂç¾å¨ï¼ÂæÂÂÃ¥ÂÂçÂÂå¥Â件已ç¶ÂæÂÂäºÂçÂÂå½ï¼Â
Ã¥ÂÂæ Â置堥é¸å® (Dynamically Populating a Menu)
Ã¥ÂÂæ ÂçÂÂå°Âé¸å®頠ç®æ¾置å¨é¸å®裡æ¯å¾ÂæÂÂç¨çÂÂï¼ÂéÂÂ好éÂÂÃ¥ÂÂç¹è²æ¯å¾Â容æÂÂå®ÂæÂÂçÂÂãÂÂå¨éÂÂÃ¥ÂÂæÂÂÃ¥ÂÂ裡ï¼ÂæÂÂÃ¥ÂÂå°ÂæÂÂå¨æÂÂå°ÂÃ¥ÂÂä¸ÂæÂÂå¼Âé¸å®åÂÂæ ÂçÂÂå 堥ä¸ÂäºÂé  ç®ãÂÂè®ÂæÂÂÃ¥ÂÂçÂÂçÂÂç¨ä¾Â建ç«Â工堷åÂÂçÂÂé¨份ï¼Â
<toolbaritem id="TutTB-SearchTerms-TBItem" persist="width"> <menulist id="TutTB-SearchTerms" editable="true" flex="1" minwidth="100" width="250" onkeypress="TutTB_KeyHandler(event);"> <menupopup id="TutTB-SearchTermsMenu" onpopupshowing="TutTB_Populate()" /> </menulist> </toolbaritem>
注æÂÂå°ï¼Âå¨ menupopup å Âç´ ç onpopupshowing 屬æ§ãÂÂæÂÂÃ¥ÂÂæÂÂå® TutTB_Populate()å½å¼Âå¨æ¯Â次ãÂÂå½Âåºå¼Âé¸å®ãÂÂå³å°Â顯示æÂÂ被å·è¡Âï¼ÂéÂÂÃ¥ÂÂå½å¼Âå°ÂæÂÂ建ç«ÂæÂÂÃ¥ÂÂçÂÂÃ¥ÂÂæ Âé¸å®頠ç®ãÂÂè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂçÂÂå½å¼ÂçÂÂç¨Âå¼Â碼[View TutTB_Populate() Code]ï¼Â
//////////////////////////////////////////////////////////////////////////////// // TutTB_Populate() å½å¼Âå¨工堷åÂÂæ¬Âä½ÂçÂÂä¸ÂæÂÂå¼Âé¸å®æ¾置åÂÂæ Âç¢çÂÂçÂÂé¸å®頠ç®ã // éÂÂç¶éÂÂä¸Âæ¯éÂÂ常實ç¨çÂÂï¼Âä½Âæ¯èÂÂç±éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂå¯以çÂÂçÂÂÃ¥ÂÂæ Âé¸å®置堥çÂÂéÂÂä½Âæ¹å¼Âã //////////////////////////////////////////////////////////////////////////////// function TutTB_Populate() { // Ã¥ÂÂå¾Âå½Âåºé¸å®å Âç´ var menu = document.getElementById("TutTB-SearchTermsMenu"); // 移é¤å¨å½Âåºé¸å®ç®åÂÂçÂÂé  ç® for(var i=menu.childNodes.length - 1; i >= 0; i--) { menu.removeChild(menu.childNodes.item(i)); } // æÂÂå®Âè¦Âå¨é¸å®å¢Âå çÂÂé  ç®æ¸é var numItemsToAdd = 10; for(var i=0; i<numItemsToAdd; i++) { // 建ç«Âè¦Âå¢Âå çÂÂæ°é¸å®頠ç® var tempItem = document.createElement("menuitem"); // è¨Âå®Âæ°é¸å®頠ç®çÂÂæ¨Â籤 tempItem.setAttribute("label", "Dynamic Item Number " + (i+1)); // å¨é¸å®ä¸Âæ°å¢Âé  ç® menu.appendChild(tempItem); } }
éÂÂÃ¥ÂÂå½å¼Âç¯Âä¾Âä¸ÂæÂÂå½令æ¯Âå menuitem å Âç´ åÂȌ·è¡Âé¸æÂÂçÂÂæÂÂ令ãÂÂçºäºÂè®Âæ¯Âå menuitem çÂ¥éÂÂæÂÂ該å·è¡ÂçÂÂæÂÂ令ï¼ÂæÂÂÃ¥ÂÂå å åªè¦Âå 堥 setAttribute()å½å¼Âä¾ÂèÂÂçÂÂäºÂ件åÂÂå·è¡Âç¨Âå¼Â碼ãÂÂéÂÂæ¯èÂÂç oncommand äºÂ件çÂÂç¯Âä¾Âï¼Â
tempItem.setAttribute("oncommand", "TutTB_SomeFunction()");
å 堥 TutTB_Populate()å½å¼Âå¾Âç JavaScript æªÂæ¡Â[View JavaScript Revision 3]ï¼Â
//////////////////////////////////////////////////////////////////////////////// // TutTB_Search() å½å¼ÂæÂÂçºæÂÂÃ¥ÂÂå®ÂæÂÂæÂÂå°ÂãÂÂevent Ã¥ÂÂæ¸æÂÂ觸ç¼å½å¼ÂçÂÂå¼å«ï¼Âtype Ã¥ÂÂæ¸ // çºæÂÂå°ÂçÂÂé¡ÂÃ¥ÂÂã //////////////////////////////////////////////////////////////////////////////// function TutTB_Search(event, type) { // å°Âè¦ÂçÂÂ覽çÂÂ網å var URL = ""; // 辨åÂ¥æÂÂå°Âæ¬Âä½Âæ¯å¦çº空å¼ var isEmpty = false; // èÂÂçÂÂæÂÂå°Âæ¬Âä½ ( <menulist> å Âç´ ) var searchTermsBox = document.getElementById("TutTB-SearchTerms"); // å¾ÂæÂÂå°Âæ¬Âä½ÂÃ¥ÂÂåºåÂÂ串ï¼Âæ´çÂÂå¿ è¦ÂçÂÂ空ç½ // å¯以å¨ä¸Âé¢çÂÂç TutTB_TrimString() å½å¼ÂéÂÂä½ÂçÂÂ細篠var searchTerms = TutTB_TrimString(searchTermsBox.value); if(searchTerms.length == 0) // æÂÂå°Âæ¬Âä½Âæ¯空ç½çÂÂÃ¥ÂÂï¼ isEmpty = true; // æ¯ï¼Âè¨Âå® isEmpty çº true else // ä¸Âï¼Âè½ÂæÂÂçºå®Âå ¨çÂÂ網å searchTerms = TutTB_ConvertTermsToURI(searchTerms); // é¸æÂÂæÂÂå°ÂçÂÂé¡Âå // å¦ÂæÂÂæ¬Âä½Âæ¯空ç½çÂÂï¼ÂæÂÂÃ¥ÂÂæÂÂå¼Âå°Â使ç¨è å° Google 網é Âä¸Âé©ç¶çÂÂå°æ¹ã // å¦åÂÂï¼ÂæÂÂå°Â輸堥çÂÂæÂÂÃ¥ÂÂã switch(type) { // 建ç«ÂÃ¥ÂÂçÂÂæÂÂå°ÂçÂÂ網å case "image": if(isEmpty) { URL = "http://images.google.com/"; } else { URL = "http://images.google.com/images?q=" + searchTerms; } break; // 建ç«Â網é ÂæÂÂå°ÂçÂÂ網å case "web": default: if(isEmpty) { URL = "http://www.google.com/"; } else { URL = "http://www.google.com/search?q=" + searchTerms; } break; } // 使ç¨ TutTB_LoadURL å½å¼Âå¨çÂÂ覽è¦ÂçªÂä¸Âè¼Â堥網å TutTB_LoadURL(URL); } //////////////////////////////////////////////////////////////////////////////// // TutTB_TrimString() å½å¼ÂæÂÂä¿®åªåÂÂ串çÂÂÃ¥ÂÂå¾Â空ç½é¨份ï¼Âç¶å¾Âå°ÂæÂÂæÂÂçÂÂ空ç½é¨份è½ÂæÂÂæ // å®ä¸ÂÃ¥ÂÂ空ç½ï¼Âç¶å¾Âå³åÂÂä¿®æ¹å¾ÂÃ¥ÂÂ串ã //////////////////////////////////////////////////////////////////////////////// function TutTB_TrimString(string) { // å¦ÂæÂÂå³堥çÂÂÃ¥ÂÂ串ç¡æÂÂï¼ÂæÂÂæ¯æ²ÂæÂÂæ±西ï¼ÂÃ¥ÂÂå³åÂÂ空å¼ if (!string) return ""; string = string.replace(/^\s+/, ''); // 移é¤åÂÂé¢空ç½ string = string.replace(/\s+$/, ''); // 移é¤å¾Âé¢空ç½ // å°ÂæÂÂæÂÂ空ç½é¨份ç¨å®ä¸Â空ç½代æ¿ string = string.replace(/\s+/g, ' '); return string; // å³åÂÂæ¹è®Âå¾ÂçÂÂå¼ } //////////////////////////////////////////////////////////////////////////////// // TutTB_ConvertTermsToURI() å½å¼Âå°Âå³堥çÂÂæÂÂå°ÂÃ¥ÂÂ串è½ÂæÂÂçºå®Âå ¨çÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_ConvertTermsToURI(terms) { // 建ç«Âé£åÂÂÃ¥ÂÂæ¾æ¯ÂÃ¥ÂÂæÂÂå°ÂÃ¥ÂÂ串 var termArray = new Array(); // ç¨空ç½åÂÂå ÂÃ¥ÂÂå²åÂÂ串 termArray = terms.split(" "); // ç¨ä¾ÂÃ¥ÂÂæ¾å®Âå ¨çÂÂ網å var result = ""; // å¨åÂÂ串ä¸ÂéÂÂè¿´ for(var i=0; i<termArray.length; i++) { // å¨第ä¸ÂÃ¥ÂÂÃ¥ÂÂ串å¾ÂçÂÂæÂÂæÂÂçÂÂÃ¥ÂÂ串æÂÂç¨å èÂÂ(+)éÂÂé if(i > 0) result += "+"; // 使ç¨ Firefox 堧建ç encodeURIComponent() å½å¼Âå 寠result += encodeURIComponent(termArray[i]); } return result; // å³åÂÂçµÂæ } //////////////////////////////////////////////////////////////////////////////// // TutTB_LoadURL() å½å¼Âå¨çÂÂ覽å¨ä¸Âè¼Âå ¥ç¹å®ÂçÂÂ網å //////////////////////////////////////////////////////////////////////////////// function TutTB_LoadURL(url) { // å¨網åÂÂÃ¥ÂÂè¨Âå®Âå³堥çÂÂ網å window._content.document.location = url; // Make sure that we get the focus window.content.focus(); } //////////////////////////////////////////////////////////////////////////////// // TutTB_KeyHandler() 檢æÂ¥ãÂÂEnterãÂÂæ¯å¦被輸堥ãÂÂæ¯çÂÂ話ï¼Âå°±å·è¡ÂæÂÂå° //////////////////////////////////////////////////////////////////////////////// function TutTB_KeyHandler(event) { // [ENTER]被æÂÂä¸ÂäºÂÃ¥ÂÂï¼Âå¦ÂæÂÂæ¯ï¼Âå·è¡ÂæÂÂå° if(event.keyCode == event.DOM_VK_RETURN) TutTB_Search(event, 'web'); } //////////////////////////////////////////////////////////////////////////////// // TutTB_Populate() å½å¼Âå¨工堷åÂÂæ¬Âä½ÂçÂÂä¸ÂæÂÂå¼Âé¸å®æ¾置åÂÂæ Âç¢çÂÂçÂÂé¸å®頠ç®ã // éÂÂç¶éÂÂä¸Âæ¯éÂÂ常實ç¨çÂÂï¼Âä½Âæ¯èÂÂç±éÂÂÃ¥ÂÂç¯Âä¾Âï¼ÂæÂÂÃ¥ÂÂå¯以çÂÂçÂÂÃ¥ÂÂæ Âé¸å®置堥çÂÂéÂÂä½Âæ¹å¼Âã //////////////////////////////////////////////////////////////////////////////// function TutTB_Populate() { // Ã¥ÂÂå¾Âå½Âåºé¸å®å Âç´ var menu = document.getElementById("TutTB-SearchTermsMenu"); // 移é¤å¨å½Âåºé¸å®ç®åÂÂçÂÂé  ç® for(var i=menu.childNodes.length - 1; i >= 0; i--) { menu.removeChild(menu.childNodes.item(i)); } // æÂÂå®Âè¦Âå¨é¸å®å¢Âå çÂÂé  ç®æ¸é var numItemsToAdd = 10; for(var i=0; i<numItemsToAdd; i++) { // 建ç«Âè¦Âå¢Âå çÂÂæ°é¸å®頠ç® var tempItem = document.createElement("menuitem"); // è¨Âå®Âæ°é¸å®頠ç®çÂÂæ¨Â籤 tempItem.setAttribute("label", "Dynamic Item Number " + (i+1)); // å¨é¸å®ä¸Âæ°å¢Âé  ç® menu.appendChild(tempItem); } }
Ã¥ÂÂæ Âå 堥工堷åÂÂæÂÂé (Dynamically Adding Toolbar Buttons)
å 堥åÂÂæ Â工堷åÂÂæÂÂéÂÂå°±è·ÂÃ¥ÂÂæ Â置堥é¸å®ä¸Â樣簡å®ï¼ÂèÂÂä¸ÂéÂÂéÂÂ常ç¸似ãÂÂé¦Âå Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦Âä¸ÂÃ¥ÂÂå å«åÂÂæ ÂæÂÂéÂÂçÂÂ容å¨ãÂÂå¨éÂÂå Âï¼ toolbaritem å Âç´ æ¯ä¸Âé¯çÂÂé¸æÂÂï¼Âæ¨Âè¨Âå¦Âä¸Âï¼Â
<toolbaritem id="TutTB-DynButtonContainer" />
ç¾å¨ï¼Â容å¨已ç¶Âå¯以å©ç¨äºÂï¼ÂæÂÂÃ¥ÂÂå¯以使ç¨å®Âï¼Âä¾Âå 堥åÂÂæ  toolbarbutton å Âç´ ï¼Âè®ÂæÂÂÃ¥ÂÂä¾ÂçÂÂä¸Âä¸Âå¯以è®ÂæÂÂÃ¥ÂÂå 堥åÂÂæ ÂæÂÂéÂÂçÂÂå½å¼Âç¯Âä¾Âï¼Â
function TutTB_AddDynamicButtons() { // Ã¥ÂÂå¾ÂæÂÂÃ¥ÂÂå¨ XUL æÂÂè¿°ä¸Âå¢Âå çÂÂ工堷åÂÂé  ç®ãÂÂ容å¨ã var container = document.getElementById("TutTB-DynButtonContainer"); // 移é¤æÂÂæÂÂÃ¥ÂÂå¨çÂÂæÂÂé for(i=container.childNodes.length; i > 0; i--) { container.removeChild(container.childNodes[0]); } // å¢Âå äºÂÃ¥ÂÂÃ¥ÂÂæ ÂæÂÂé for(var i=0; i<5; i++) { var tempButton = null; tempButton = document.createElement("toolbarbutton"); tempButton.setAttribute("label", "Button " + i); tempButton.setAttribute("tooltiptext", "Button " + i); tempButton.setAttribute("oncommand", "TutTB_SomeFunction()"); container.appendChild(tempButton); } }
éÂÂÃ¥ÂÂå½å¼ÂÃ¥ÂÂ置堥åÂÂæ Âé¸å®éÂÂ常ç¸似ãÂÂæÂÂÃ¥ÂÂå¾Â容å¨ä¸Â移é¤ç¾æÂÂçÂÂÃ¥ÂÂæ ÂæÂÂéÂÂï¼Âç¶å¾Âå 堥æ°çÂÂãÂÂ
Optional Programming Exerciseï¼Â試èÂÂç¨éÂÂÃ¥ÂÂæ¦Â念ä¾Âå¢Âå ãÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂéÂÂ(search word buttons)ãÂÂå°工堷åÂÂãÂÂç¶使ç¨è å¨æÂÂå°ÂÃ¥ÂÂ串æÂÂéÂÂéµ堥æÂÂÃ¥ÂÂæÂÂï¼ÂÃ¥ÂÂæ Âå°å¢Âå æÂÂéÂÂå°工堷åÂÂçÂÂæÂÂå¾Âï¼Âä¸ÂÃ¥ÂÂæÂÂéÂÂä¸ÂÃ¥ÂÂÃ¥ÂÂãÂÂéÂÂå ÂæÂÂå¹¾åÂÂæÂÂ示ï¼Â
- ä½ éÂÂè¦Âå¢Âå toolbaritem 容å¨å° XUL æÂÂè¿°æªÂçÂÂæÂÂå¾Â(right before the toolbarspring element is a good choice)ãÂÂ確宠ID æ¯å¯ä¸ÂçÂÂãÂÂ
- å¨ menulist å Âç´ ä¸Â使ç¨ oninput äºÂ件ï¼ÂéÂÂÃ¥ÂÂäºÂ件æÂÂå¨使ç¨è 輸堥æÂÂÃ¥ÂÂæÂÂ觸ç¼ãÂÂ
- ä½ å¼å«ç JavaScript æÂÂÃ¥ÂÂä¸ÂÃ¥ÂÂçÂÂäºÂï¼Â(a)å¨æÂÂå°Âæ¬Âä½Âä¸ÂÃ¥ÂÂå¾ÂæÂÂå°ÂæÂÂÃ¥ÂÂ(b)移é¤æÂÂæÂÂå ÂÃ¥ÂÂ建ç«ÂçÂÂÃ¥ÂÂæ ÂæÂÂéÂÂ(c)以空ç½åÂÂéÂÂæÂÂå°ÂæÂÂÃ¥ÂÂ(d)çºæ¯ÂÃ¥ÂÂç¨ç«ÂçÂÂæÂÂÃ¥ÂÂ建ç«ÂæÂÂéÂÂãÂÂ
éÂÂå°±æ¯æÂÂèÂÂç Googlebar Lite çÂÂæ¹å¼ÂãÂÂ
éÂÂéÂÂèÂÂÃ¥ÂÂÃ¥ÂÂæÂÂé (Disabling and Enabling Buttons)
(éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂ工堷åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ãÂÂ
ä½ å¶ç¾å¯è½æÂÂæ³è¦ÂéÂÂéÂÂæÂÂæ¯åÂÂÃ¥ÂÂ工堷åÂÂæÂÂéÂÂãÂÂèÂÂÃ¥ÂÂä¾ÂÃ¥ÂÂï¼ÂGooglebar Lite çÂÂé«Â亮度æ¨Âè¨ÂæÂÂéÂÂä¸ÂæÂÂå¨æÂÂå°Âæ¬Âä½Âæ²ÂæÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂç¼çÂÂä½Âç¨ï¼Âåªè½å·è¡Âæ¼æÂÂæÂÂå°ÂÃ¥ÂÂ串æÂÂãÂÂ
ä¸Âé¢çÂÂä¾ÂÃ¥ÂÂæ¯å¦Âä½Â建ç«Âä¸ÂÃ¥ÂÂå¯以æ§å¶éÂÂéÂÂçÂÂä¸Âè¬工堷åÂÂæÂÂéÂÂãÂÂÃ¥ÂÂ次æÂÂéÂÂï¼ÂéÂÂä¸Âæ¯實ç¨çÂÂç¯Âä¾Âï¼Âåªæ¯èÂÂæÂÂéÂÂÃ¥ÂÂæÂÂæÂÂæ¯å¯以åÂÂå¾Âå°çÂÂãÂÂæÂ¥èÂÂæ¯é¸å®頠ç®çÂÂæÂÂè¿°æ¨Âè¨Âï¼Â
<menuitem label="Toggle Web Search Button" tooltiptext="Toggle Web Search Button" oncommand="TutTB_ToggleWebSearchButton()" />
TutTB_ToggleWebSearchButton()å½å¼ÂçÂÂç¨Âå¼Â碼ï¼Â
function TutTB_ToggleWebSearchButton() { var button = document.getElementById("TutTB-Web-Button"); var value = button.disabled; if(value == true) button.disabled = false; else button.disabled = true; }
é¦Âå Âï¼ÂæÂÂÃ¥ÂÂå°ÂæÂÂèÂÂ趣çÂÂ工堷åÂÂæÂÂéÂÂ使ç¨ ID å¼以å getElementById()å½å¼ÂãÂÂåªè¦ÂæÂÂæÂÂéÂÂï¼ÂæÂÂÃ¥ÂÂå°±è½使ç¨ disabled 屬æ§æ§å¶該æÂÂéÂÂç©件çÂÂç¾æÂÂçÂÂæ Â(Ã¥ÂÂÃ¥ÂÂæÂÂéÂÂéÂÂ)ãÂÂå¦ÂæÂÂå¼çº trueï¼Â就使ç¨ false Ã¥ÂÂæ¶ÂæÂÂéÂÂéÂÂéÂÂï¼ÂÃ¥ÂÂä¹Â亦ç¶ãÂÂFirefox æÂÂ幫æÂÂÃ¥ÂÂèÂÂçÂÂæÂÂéÂÂçÂÂéÂÂéÂÂï¼Âè®Â該æÂÂéÂÂä¸Âè½é»ÂæÂÂ(note that the button's image may not appeared grayed out: we must rely on skinning for that)ãÂÂ
Ã¥ÂÂæ Â顯示èÂÂé±èÂÂæÂÂé (Dynamically Showing and Hiding Buttons)
(éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂ工堷åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ãÂÂ
Googlebar Lite å Â許使ç¨è é¸æÂÂæÂÂéÂÂå¨工堷åÂÂæÂÂçÂÂå°çÂÂ樣åÂÂãÂÂä¹Âå°±æ¯說ï¼Â工堷åÂÂå¿ é Âè½夠åÂÂæ ÂçÂÂ顯示æÂÂæ¯é±èÂÂå¯ç¨çÂÂæÂÂéÂÂãÂÂéÂÂæ¯æÂÂÃ¥ÂÂè¦Âå®ÂæÂÂç JavaScriptç¨Âå¼Â碼çÂÂ段ï¼Â
var TB_Web = document.getElementById("TutTB-Web-Button"); TB_Web.setAttribute("hidden", !TutTB_ShowWebButton);
é¦Âå ÂæÂÂÃ¥ÂÂè®Â工堷åÂÂæÂÂéÂÂ使ç¨ getElementById() å½å¼Âï¼Âç¶å¾ÂæÂÂÃ¥ÂÂå¼å« setAttribute()å½å¼Âä¾Âæ¹讠hidden 屬æ§çÂÂå¼ãÂÂä½ æÂÂç¼ç¾éÂÂå hidden å¼è·ÂæÂÂå¨ TutTB_ShowWebButton æÂÂè¨Âå®ÂçÂÂç¸åÂÂãÂÂéÂÂÃ¥ÂÂå¼æ¯åÂÂå¸ÂæÂÂæ¨Â籤(boolean flag)ï¼Âç¨ä¾Â辨å¥使ç¨è æ¯å¦æ³è¦ÂçÂÂå°ãÂÂ網é ÂæÂÂå°ÂãÂÂæÂÂéÂÂãÂÂå²åÂÂå¨éÂÂÃ¥ÂÂè®Âæ¸çÂÂå¼ï¼Âæ¯å¾Â使ç¨è è¨Âå®Âä¸Âè®ÂÃ¥ÂÂå°çÂÂãÂÂç¹¼çºÂé±è®Âï¼Âä¾ÂçÂÂçÂÂæÂÂÃ¥ÂÂå¦Âä½ÂÃ¥ÂÂå°éÂÂé»ÂãÂÂ
è®ÂÃ¥ÂÂèÂÂå²åÂÂ使ç¨è è¨Âå® (Reading and Storing User Preferences)
(éÂÂé¨份åªæ¯åÂÂ訴你æÂÂ麼ç¨ï¼Âå¨éÂÂÃ¥ÂÂ工堷åÂÂç¯Âä¾Â並ä¸ÂæÂÂåºç¾)ãÂÂ
çºäºÂè®ÂÃ¥ÂÂæÂÂå²åÂÂçÂÂè¨Âå®Âï¼ÂæÂÂÃ¥ÂÂéÂÂè¦ÂÃ¥ÂÂå Firefox è¨Âå®ÂæÂÂÃ¥ÂÂä»Âé¢(preferences service interface)ãÂÂæÂÂÃ¥ÂÂå¯以建ç«Âä¸ÂÃ¥ÂÂè®Âæ¸ä¾Âå®ÂæÂÂï¼Â
const TutTB_PrefService = Components.classes["@mozilla.org/preferences-service;1"]. getService(Components.interfaces.nsIPrefService);
ä¸Âæ¦åÂÂÃ¥ÂÂè¨Âå®Âä»Âé¢ï¼ÂæÂÂÃ¥ÂÂå°±å¯以ç²å¾Âå¥Â件è¨Âå®ÂçÂÂä¸Âé¨åÂÂ(i.e. the location in the preferences "registry" where our extension's settings are kept)ï¼Â
const TutTB_Branch = TutTB_PrefService.getBranch("tuttoolbar.");
Ã¥ÂÂè¨ÂéÂÂÃ¥ÂÂå¥Â件ç¯Âä¾ÂçÂÂè¨Âå®Âèµ·å§Âæ¼ tuttoolbar æÂÂÃ¥ÂÂï¼Âå æ¤ï¼ÂæÂÂÃ¥ÂÂè¨Âå®ÂÃ¥ÂÂ串 getBranch() (堧建ç Fireofx å½å¼Â) ãÂÂéÂÂÃ¥ÂÂå½å¼Âå¯以è®ÂæÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂå¥Â件çÂÂè¨Âå®Âï¼ÂæÂÂå¾Âå¯以ç²å¾ÂÃ¥ÂÂå¥é¸頠çÂÂå¼ãÂÂéÂÂæ¯æÂÂÃ¥ÂÂÃ¥ÂÂÃ¥ÂÂæÂÂå°ãÂÂ顯示網é ÂæÂÂå°ÂæÂÂéÂÂãÂÂé¸頠å¯以åÂÂå¾ÂçÂÂå¼ï¼Â
if(TutTB_Branch.prefHasUserValue("show.button.web")) TutTB_ShowWebButton = TutTB_Branch.getBoolPref("show.button.web"); else { TutTB_Branch.setBoolPref("show.button.web", false); TutTB_ShowWebButton = false; }
é¦Âå Âï¼ÂæÂÂÃ¥ÂÂ測試éÂÂÃ¥ÂÂè¨Âå®Âæ¯å¦åÂÂå¨æ¼è¨Âå®Â樹çÂÂçµÂæ§Â裡ãÂÂå¦ÂæÂÂÃ¥ÂÂå¨ï¼Âå°±ç¨ getBoolPref()å½å¼Âè®ÂÃ¥ÂÂå®ÂçÂÂå¼(å²åÂÂæ¼ TutTB_ShowWebButton è®Âæ¸)ãÂÂå¦åÂÂï¼ÂæÂÂÃ¥ÂÂå°±è¨Âå®Âçºé Âè¨Âå¼(è¨Âå®ÂçÂÂ樹èÂÂå ¨åÂÂè®Âæ¸)ãÂÂ
å²åÂÂè¨Âå®Âæ¯å¾Âç°¡å®çÂÂå§ï¼Âä½ åªè¦ÂæÂÂä¾Âè¨Âå®ÂçÂÂÃ¥ÂÂ稱ï¼Âç¶å¾Â使ç¨éÂÂÃ¥ÂÂå¼ï¼Â
TutTB_Branch.setBoolPref("show.button.web", TutTB_ShowWebButton);
ãÂÂè®ÂÃ¥ÂÂèÂÂå²åÂÂè¨Âå®ÂãÂÂç¨ä¾Âå²åÂÂä½ çÂÂå¥Â件è¨Âå®Âæ¯å¾Âæ¹便çÂÂæ¹å¼ÂãÂÂ大é¨åÂÂçÂÂå¥Â件é½使ç¨éÂÂÃ¥ÂÂÃ¥ÂÂè½ï¼ÂæÂÂ許å¤Âå¯使ç¨çÂÂç¯Âä¾ÂçÂÂèÂÂä½ å»ç Â究ãÂÂå¦å¤Âï¼Âå¯以çÂÂç MozillaZine knowledge base çÂÂæÂÂç« ãÂÂ
第ä¸Âç« ï¼Âå°Â裠(Packaging the Toolbar)
å°ç®åÂÂçºæ¢ï¼ÂæÂÂÃ¥ÂÂç¨åÂÂæ ÂéÂÂç¼ä¾ÂèÂÂçÂÂå®Âè£ÂçÂÂé¨份ãÂÂä½Âæ¯使ç¨è 並ä¸ÂæÂÂæ³ç¨éÂÂ樣çÂÂæ¹å¼Âä¾Âå®Âè£Âå¥Â件ï¼ÂæÂÂ以æÂÂÃ¥ÂÂå¿ é Âå°Âè£ÂæªÂæ¡ÂæÂÂä¸ÂÃ¥ÂÂå®Âè£ÂæªÂãÂÂæÂÂÃ¥ÂÂå°Âè¦Â建ç«Âå ©åÂÂæªÂæ¡Âï¼ÂXPI å JARãÂÂå¥被éÂÂ樣çÂÂæªÂæ¡ÂÃ¥ÂÂ稱給é¨ÂäºÂï¼Âä»ÂÃ¥ÂÂåªä¸ÂéÂÂæ¯ç¨ zip å£Â縮æªÂæ¡Âæ ¼å¼Âå½è£ÂçÂÂãÂÂ
ç¾å¨æ¯å£Â縮工堷ç¼æ®åÂÂæÂÂçÂÂæÂÂÃ¥ÂÂäºÂï¼ÂæÂÂÃ¥ÂÂ人建è°使ç¨ WinZip (å½令åÂÂ模å¼Â)ï¼Âä½Âæ¯網路ä¸Âä¹ÂæÂÂä¸Âå°Âå Âè²»çÂÂ工堷ãÂÂå¨éÂÂ份æÂÂÃ¥ÂÂ丠@æÂÂæÂÂ使ç¨ UNIX å£Â縮工堷;å¨ Windows ä¸Âï¼Âå¯以使ç¨ Cygwin ãÂÂ
æ´æ° Chrome 渠å® (Updating the Chrome Manifest)
第ä¸ÂæÂ¥å°Âè£Âå å«äºÂæ´æ° chrome 渠å®ãÂÂ注æÂÂï¼Âå¦ÂæÂÂè¦Âç¹¼çºÂÃ¥ÂÂæ ÂéÂÂç¼ï¼Âä½ è¦ÂæÂÂå ©å chrome 渠å®ï¼Âä¸ÂÃ¥ÂÂæ¯å°Âè£Âç¨çÂÂï¼Âå¦ä¸ÂÃ¥ÂÂæ¯åÂÂæ ÂéÂÂç¼ç¨çÂÂãÂÂèÂÂçÂÂéÂÂå ©åÂÂæªÂæ¡Âæ¯å¾Â麻砩çÂÂï¼ÂæÂÂ以æÂÂÃ¥ÂÂåªéÂÂå°ÂæÂÂÃ¥ÂÂä¸Âå·²åÂÂå¨ç chrome 渠å®åÂÂèÂÂçÂÂãÂÂ注æÂÂï¼Âå¨æÂÂÃ¥ÂÂä¿®æ¹渠å®å¾Âï¼Âå°±ä¸Âè½ç¨å¨åÂÂæ ÂéÂÂç¼äºÂï¼Âé¤éÂÂä½ ä¿®æ¹åÂÂä¾ÂãÂÂè®ÂæÂÂÃ¥ÂÂå Âä¾ÂÃ¥ÂÂæ¶ä¸Âä¸Â渠å®çÂÂ堧容ï¼Â
content tuttoolbar chrome/content/ overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul skin tuttoolbar classic/1.0 chrome/skin/
æÂÂå ©åÂÂå°æ¹éÂÂè¦Âä¿®æ¹ï¼Âå ÂçÂÂçÂÂ第ä¸Âè¡Âï¼Â
content tuttoolbar jar:chrome/tuttoolbar.jar!/content/
æÂÂÃ¥ÂÂå 堥äºÂå ©åÂÂé  ç®ãÂÂé¦Âå Âæ¯ jar: ï¼Âæ¾置å¨路å¾ÂçÂÂÃ¥ÂÂé¢ãÂÂéÂÂæÂÂå® Firefox å¿ é Âå¾ JAR æªÂæ¡Âä¸ÂÃ¥ÂÂåºå¥Â件çÂÂ堧容ãÂÂÃ¥ÂÂä¾Âï¼ÂæÂÂÃ¥ÂÂå 堥 tuttoolbar.jar!/ï¼Âä»Âæ¼ chrome/ å content/ ç®éÂÂä¸ÂéÂÂï¼ÂéÂÂæÂÂè¿°äºÂåªå JAR éÂÂè¦Â被åÂÂåºçÂÂãÂÂéÂÂå JAR çÂÂæªÂÃ¥ÂÂå¿ é Âè¦Âè·Âå¥Â件çÂÂæªÂÃ¥ÂÂç¸åÂÂï¼ÂÃ¥ÂÂ樣å°ï¼Âå¿ é Âè·ÂæªÂÃ¥ÂÂä¸Â樣使ç¨å°Â寫åÂÂé«ÂãÂÂ注æÂÂï¼Âé©ÂÃ¥ÂÂèÂÂä¸Âæ¯æÂÂÃ¥ÂÂé¯誤ï¼ÂéÂÂæ¯忠è¦ÂçÂÂãÂÂå¦ä¸ÂÃ¥ÂÂéÂÂè¦Âä¿®æ¹çÂÂè·¯å¾Âæ¯ skin ï¼Âä¾ÂçÂÂçÂÂä¿®æ¹å¾ÂçÂÂ堧容ï¼Â
content tuttoolbar jar:chrome/tuttoolbar.jar!/content/ overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul skin tuttoolbar classic/1.0 jar:chrome/tuttoolbar.jar!/skin/
建章JAR æªÂæ¡ (Creating the JAR File)
第ä¸ÂÃ¥ÂÂè¦Âå°Âè£ÂçÂÂæ¯ JAR æªÂæ¡ÂãÂÂé¦Âå ÂæÂÂÃ¥ÂÂèÂÂç chrome ç®éÂÂï¼Âå å«亠XULãÂÂJavaScriptãÂÂCSS 以åÂÂÃ¥ÂÂçÂÂãÂÂæªÂæ¡ÂçµÂæ§Âå¦Âä¸Âï¼Â
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/ +- tuttoolbar.jar +- content/ +- tuttoolbar.xul +- tuttoolbar.js +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
å°Â裠JAR æÂÂæ¯ XPI æÂÂï¼ÂæÂÂ容æÂÂç¯çÂÂé¯誤就æ¯éºæ¼ÂäºÂç¸éÂÂçÂÂæªÂæ¡ÂãÂÂå¦ÂæÂÂæÂÂÃ¥ÂÂÃ¥ÂÂ裠JAR æªÂæ¡Âæ¯åÂÂç®éÂÂï¼Â裡é¢å å«äºÂï¼Â
+- content/ +- tuttoolbar.xul +- tuttoolbar.js +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
éÂÂæ¯æÂÂç¨ UNIX 工堷çÂÂæ¹å¼Â(å½令åÂÂ模å¼Â)ï¼Â
zip -r tuttoolbar.jar content/* skin/*
(è¯è ï¼Âä¸Âè¬ Windows 使ç¨è å¯以ç´æ¥尠content å skin ç®éÂÂ以 zip æ ¼å¼Âå£Â縮æÂÂå¯æªÂå .jar çÂÂæªÂæ¡ÂãÂÂ)
建章XPI æªÂæ¡Â(Creating the XPI File)
å¨建ç«Â好 JAR æªÂæ¡Âä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå¿ é Â建章XPI æªÂæ¡Âï¼ÂéÂÂæ¯çÂÂæ£你è¦Â給使ç¨è ç¨çÂÂå¥Â件å®Âè£ÂæªÂãÂÂæÂÂÃ¥ÂÂå¿ é Âå¨æÂÂä¸Â層ç®éÂÂä¸Â建ç«ÂéÂÂÃ¥ÂÂæªÂæ¡Âï¼ÂçµÂæ§Âå¦Âä¸Âï¼Â
+- TutToolbar/ +- tuttoolbar.xpi +- install.rdf +- chrome.manifest +- chrome/ +- tuttoolbar.jar +- content/ +- tuttoolbar.xul +- tuttoolbar.js +- skin/ +- combined.png +- gripper.png +- images.png +- main.png +- web.png +- tuttoolbar.css
è· JAR æªÂæ¡Âä¸Â樣ï¼ÂXPI å¿ é Âç¶ÂæÂÂç¸å°ÂçÂÂè·¯å¾ÂãÂÂå¨ XPI æªÂæ¡Âä¸Âï¼Âå å«äºÂä¸ÂÃ¥ÂÂæªÂæ¡Âï¼Âå®Âè£Â渠å®ãÂÂchrome 渠å®åÂÂÃ¥ÂÂÃ¥ÂÂ建ç«Âç JAR æªÂæ¡ÂãÂÂXPI 裡å å«äºÂï¼Â
+- install.rdf +- chrome.manifest +- chrome/ +- tuttoolbar.jar
使ç¨ UNIX 工堷çÂÂæ¹å¼Âï¼Â
zip tuttoolbar.xpi install.rdf chrome.manifest chrome/tuttoolbar.jar
å¥Â件å®Âè£Â測試 (Installing Your Toolbar Extension)
æÂÂ亠XPI æªÂæ¡Âä¹Âå¾Âï¼Âå°±å¯以éÂÂå§Âå®Âè£ÂçÂÂæÂ¥é©ÂãÂÂå¨ç¼表å¥Â件åÂÂï¼Âä½ ä¸Âå®Âè¦Âå Â確å®Âå¥Â件å¯以å®Âè£ÂãÂÂä¸Âå¯以使ç¨éÂÂç¼è¨Âå®ÂæªÂä¾Â測試å®Âè£Âï¼ÂÃ¥ÂÂ管å¨é£份è¨Âå®ÂæªÂå·²ç¶ÂæÂÂå¥Â件çÂÂå®Âè£ÂçÂÂæ‹ÂÂç¨你ä¸Âè¬使ç¨çÂÂï¼ÂæÂÂæ¯å¦ä¸ÂÃ¥ÂÂè¨Âå®ÂæªÂï¼Âä¾Âä¸Âé¢çÂÂæÂ¥é©Âä¾Â測試å®Âè£Âï¼Â
- æªÂæ¡ > éÂÂÃ¥ÂÂæªÂæ¡ (æÂÂæ¯ç¨ Ctrl+O) ãÂÂ
- å¨å°Â話æ¡Âä¸Âï¼Âæ¾å°你ç XPI æªÂæ¡Âï¼Âé»Âé¸ãÂÂéÂÂÃ¥ÂÂãÂÂãÂÂ
å¦ÂæÂÂæ£確å°å®ÂæÂÂå¾Âï¼Âä½ æÂÂçÂÂå°å®Âè£Âç«é¢ãÂÂé¸æÂÂä½ è¦Âå®Âè£Âå¾Âï¼ÂéÂÂæ°éÂÂå FirefoxãÂÂä¹Âå¾Âï¼Âä½ æÂÂ該æÂÂçÂÂå°工堷åÂÂäºÂï¼ÂæÂÂÃ¥ÂÂä½ å®ÂæÂÂ第ä¸ÂÃ¥ÂÂ工堷åÂÂå¥Â件ï¼Â
å éÂÂå°Âè£ÂéÂÂ稠(Speeding Up the Packaging Process)
æÂÂÃ¥ÂÂå°Âè£Âå¥Â件å¾Âè®Â人åÂÂç ©çÂÂï¼Âçºä½Âä¸Âç¨æÂÂè¿°æªÂä¾Âå®ÂæÂÂå¢ï¼Âå¦ÂæÂÂæÂÂå½令åÂÂ模å¼Âç ZIP 工堷ï¼Âä½ å¯以å°ÂéÂÂç¨ÂèªåÂÂÃ¥ÂÂãÂÂä¸Âé¢çÂÂç¯Âä¾Â使ç¨ DOS æ¹次æªÂå UNIX å£Â縮工堷ãÂÂ
é¦Âå Â建ç«Âå ©åÂÂæÂÂÃ¥ÂÂæªÂï¼ÂæÂÂä¸Â層ç®éÂÂç xpizip.txt ï¼Âå chrome ç®éÂÂä¸Âç jarzip.txt ã æªÂæ¡Âä¸Âå å«äºÂè¦Âå°Âè£ÂçÂÂé  ç®@[View xpizip.txt] [View jarzip.txt]
ä¸Âä¸ÂæÂ¥ï¼Âå¨æÂÂä¸Â層ç®éÂÂä¸Â建章DOS æ¹次æªÂ(.bat)ï¼Â堧容å¦Âä¸Âï¼Â
zip -r chrome/tuttoolbar.jar -@ < chrome/jarzip.txt zip -r tuttoolbar.xpi -@ < xpizip.txt
å¦Âä½ æÂÂè¦Âï¼ÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂç¸ç¶簡å®ãÂÂç¶èÂÂï¼Âä½ çÂÂæÂÂè¿°æªÂå¯è½æ¯ÂéÂÂÃ¥ÂÂæ´è¤ÂéÂÂãÂÂæÂÂç¨ä¾Â建章Googlebar Lite çÂÂæÂÂè¿°æªÂå¯以åÂÂæ´å¤ÂäºÂãÂÂå®Âå¯以çºæÂÂèªåÂÂæ´æ°æÂÂæÂÂçÂÂçÂÂæ¬代èÂÂï¼ÂÃ¥ÂÂå®ÂæÂÂæªÂæ¡ÂçÂÂå°Âè£ÂãÂÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂæ¯ç¨ Perl å®ÂæÂÂçÂÂï¼ÂèÂÂä¸Â使ç¨ 1.0.x çÂÂå®Âè£Âæ¹æ¡Â(èÂÂéÂÂ份æÂÂÃ¥ÂÂæÂÂäºÂå¾®çÂÂä¸ÂÃ¥ÂÂ)ãÂÂæÂÂæÂÂä¾ÂéÂÂÃ¥ÂÂæÂÂè¿°æªÂ給æÂÂèÂÂ趣çÂÂ人ï¼Â[View the Googlebar Lite Build Script]ãÂÂ
(Ant Support)
å¦ÂæÂÂ你寧é¡Â使ç¨ Ant ä¾Â建ç«Âä½ çÂÂå¥Â件ï¼Âå¯以åÂÂè sample XML file sent in by Brett Clippingdale. éÂÂÃ¥ÂÂæÂÂè¿°æªÂæÂÂ該è·Âå®Âè£Â渠å®æ¾置å¨åÂÂä¸ÂÃ¥ÂÂç®éÂÂï¼Âç¶å¾Â使ç¨ ant æÂÂ令ãÂÂ
第堫章ï¼Â測試 (Testing Our Extension)
å¨第åÂÂç« è¨Âè«ÂçÂÂÃ¥ÂÂæ ÂéÂÂç¼å°Âæ¼å¥Â件測試æÂÂå¾Â大çÂÂ幫å©ï¼Âä½Âæ¯éÂÂ裡éÂÂæÂÂä¸ÂäºÂç« éÂÂæ¯éÂÂç¼è éÂÂè¦ÂçÂ¥éÂÂçÂÂãÂÂJavaScript æ¯å¾Âé£é¤é¯ç ï¼Â幸好 Firefox çÂÂä¸ÂäºÂç¹è²å¯以è®ÂæÂÂÃ¥ÂÂé¿å Âé£äºÂæ±人çÂÂè¦示(æ¤æ alert() å½å¼Âå¼å«)ãÂÂ
ç¶ Firefox æÂÂæ¯ÂæÂÂ該æÂÂ麼辦 (What to Do if Firefox Breaks)
æÂÂæÂÂÃ¥ÂÂå¥Â件æÂÂç¢çÂÂç½é£æ§çÂÂé¯誤ï¼Âå°Âè´ Firefox æÂÂçµÂéÂÂÃ¥ÂÂãÂÂç¶éÂÂ種æ æ³Âç¼çÂÂæÂÂï¼Âä½ å¿ é Âå Â檢æ¥工ä½Â管çÂÂå¡æ¯å¦æÂÂç¶æÂÂç Firefox å¨å·è¡Âä¸Âï¼Â並æÂÂå®ÂéÂÂéÂÂãÂÂä¸Âæ¦確å®Âæ²Âæ Firefox å¨å·è¡Âï¼Âä½ éÂÂè¦Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂ移é¤çÂÂæ¹æ³ÂÃ¥ÂÂ決æ¼你æ¯å¦æ£å¨使ç¨åÂÂæ ÂéÂÂç¼系統ãÂÂ
å¦ÂæÂÂä½ æ£å¨ç¨åÂÂæ ÂéÂÂç¼ï¼Âåªè¦ÂçÂÂ覽åÂÂæ ÂéÂÂç¼è¨Âå®ÂçÂÂå¥Â件ç®éÂÂ(第åÂÂç« )ï¼Âç¶å¾Âå°Âå¥Â件çÂÂæÂÂæ¨ÂæªÂæ¡Â(tuttoolbar@borngeek.com)移åÂÂå°æ«åÂÂçÂÂä½Âç½®ãÂÂç¨你çÂÂÃ¥ÂÂæ ÂéÂÂç¼è¨Âå®ÂæªÂéÂÂæ°éÂÂå Firefox (å Â許å®Â渠é¤æÂÂæ°移é¤çÂÂå¥Â件)ï¼ ç¶å¾ÂÃ¥ÂÂ次éÂÂéÂÂçÂÂ覽å¨ãÂÂå¨你解決éÂÂÃ¥ÂÂå°Âè´ Firefox ç¶æÂÂçÂÂÃ¥ÂÂé¡Âä¹Âå¾Âï¼Âå°Âä½ çÂÂæÂÂæ¨ÂæªÂæ¡Â移åÂÂå°å¥Â件ç®éÂÂï¼Âç¶å¾ÂéÂÂæ°éÂÂå Firefox ãÂÂ
å¦ÂæÂÂä½ æ²ÂæÂÂ使ç¨åÂÂæ ÂéÂÂç¼çÂÂ話ï¼Âå°±ç¨ Firefox çÂÂå®Â堨模å¼Âä¾Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂä½ å¯以ç¨堩種æ¹å¼Âä¾Âï¼Â
- éÂÂ姠> æÂÂæÂÂç¨Âå¼ > Mozilla Firefox >> Mozilla Firefox (Safe Mode) ãÂÂ
- å¨ Firefox æ·å¾Âä¸Âå 堥 -safe-mode å½令åÂÂÃ¥ÂÂæ¸ãÂÂ
å¨å®Â堨模å¼Âä¸Âï¼ Firefox ä¸ÂæÂÂè¼Â堥任ä½Âå¥Â件æÂÂæ¯主é¡ÂãÂÂä¸Âæ¦å¨å®Â堨模å¼Âä¸Âï¼Âä½ å°±å¯以使ç¨å¥Â件管çÂÂå¡ä¾Â移é¤æÂÂÃ¥ÂÂé¡ÂçÂÂå¥Â件ãÂÂå¨移é¤å¥Â件ä¹Âå¾Âï¼Âè¨Âå¾Âå° -safe-mode å½令åÂÂÃ¥ÂÂæ¸移é¤(å¦ÂæÂÂä½ å¨æ·å¾Âä¸ÂæÂÂÃ¥ÂÂå 堥)ãÂÂ
æÂÂç¨çÂÂçÂÂ覽å¨è¨Âå® (Useful Browser Settings)
å¨ about:config ä»Âé¢ä¸Âï¼ÂæÂÂå ©åÂÂè¨Âå®Âå¯以è®Âä½ æ´容æÂÂéÂÂç¼ï¼ÂéÂÂæÂÂå½±é¿ JavaScript 主æ§å°çÂÂ輸åºè¨Âæ¯ãÂÂ
第ä¸ÂÃ¥ÂÂè¨Âå®Âæ¯ javascript.options.showInConsole ãÂÂç¶è¨Âå®Âçº true æÂÂï¼ÂæÂÂæÂÂå¥Â件ç¢çÂÂçÂÂé¯誤æÂÂæ¯è¦åÂÂé½æÂÂ被å³éÂÂå° JavaScript 主æ§å°ãÂÂé Âè¨Âå¼æ¯ false ï¼ æÂÂ以你忠é ÂéÂÂÃ¥ÂÂå®ÂãÂÂéÂÂÃ¥ÂÂè¨Âå®Âå°Âæ¼追蹤é¯誤æ¯å¾Âæ¹便çÂÂãÂÂ
ä¸Âä¸ÂÃ¥ÂÂæ¯ javascript.options.strict ï¼Âé Âè¨Âå¼ä¹Âæ¯ false ãÂÂç¶è¨Âå®Âçº true æÂÂï¼ÂFirefox ç JavaScript èªÂæ³ÂæÂÂè®ÂæÂÂå´謹模å¼Âï¼Âå°Âä½ çÂÂç¨Âå¼Â碼è®ÂæÂÂå´格çÂÂç´ÂæÂÂãÂÂéÂÂè®Âä½ çÂÂç¨Âå¼Â碼æ´å®ÂÃ¥ÂÂï¼Âä¹Âæ´容æÂÂ追蹤ç¨Âå¼Â碼é¯誤ãÂÂ
JavaScript 主æ§å°ç´Âé (Logging to the JavaScript Console)
測試 JavaScript ç¨Âå¼Â碼çÂÂ好æ¹æ³Âå°±æ¯å¨ JavaScript 主æ§å°ä¸Âå°åºé¤é¯å¼ï¼Âä½ å¯以å¨ ãÂÂ工堷 > JavaScript 主æ§å°ãÂÂéÂÂÃ¥ÂÂãÂÂæÂÂÃ¥ÂÂå¿ é Âå Âå¾Âå° nsIConsoleService ä»Âé¢çÂÂ實é«Â(instance)ï¼Âä¸Âé¢æ¯ç¨Âå¼Â碼çÂÂçÂÂ段ï¼Â
const TutTB_ConsoleService = Components. classes['@mozilla.org/consoleservice;1']. getService(Components.interfaces.nsIConsoleService);
注æÂÂå°æÂÂÃ¥ÂÂç¨亠TutTB_ çÂÂÃ¥ÂÂç½®è©Âï¼Âå°±å¦ÂæÂÂ使ç¨æ¼æÂÂæÂÂå½å¼ÂèÂÂè®Âæ¸ä¸Â樣ãÂÂä¸Âæ¦æÂÂÃ¥ÂÂÃ¥ÂÂå¾ÂéÂÂÃ¥ÂÂæ§å¶å°實é«Â(console instance)ï¼ÂæÂÂÃ¥ÂÂå°±å¯以使ç¨å®Âä¾Â編寫èª己çÂÂè¨Âæ¯ãÂÂä¸Âé¢çÂÂå½å¼ÂæÂÂ幫æÂÂÃ¥ÂÂå®ÂæÂÂéÂÂ件äºÂï¼Â
function TutTB_Log(aMessage) { TutTB_ConsoleService.logStringMessage('Tut_Toolbar: ' + aMessage); }
實éÂÂä¸Âï¼Âä½ æÂÂ該æ¹è®Âå¨你çÂÂå¥Â件ä¸ÂãÂÂMy_Extension:ãÂÂçÂÂè¨Âæ¯é¨份åÂÂ稱ãÂÂèÂÂç±使ç¨你çÂÂå¥Â件åÂÂ稱ä¾Âç¶åÂÂç½®è©Âï¼Âä½ å¯以æ´容æÂÂÃ¥ÂÂå¾ÂåªäºÂè¨Âæ¯æ¯è¦ÂçÂ¥éÂÂçÂÂãÂÂç¾å¨ï¼Âè®Âå½å¼Âä½Âç¨ä¹Âå¾Âï¼ÂæÂÂÃ¥ÂÂå¯以å¨ç¨Âå¼Â碼ä¸ÂçÂÂä»»ä¸Âä½Âç½®ä¾Âå¼å«å®Âï¼Â以顯示é¤é¯è¨Âæ¯ï¼Â
TutTB_Log("The value of the URL variable is: " + URL);
è¨Âå¾Âä¸Âå®Âè¦Âå¨ç¼表你çÂÂå¥Â件åÂÂ移é¤éÂÂÃ¥ÂÂå½å¼ÂãÂÂä¸Âç¶ï¼ÂéÂÂä¸Âåªæ¯éÂÂä½Â主æ§å°ç´ÂéÂÂçÂÂéÂÂ度ï¼ÂéÂÂå¢Âå äºÂ使ç¨è 主æ§å°è¦ÂçªÂçÂÂéÂÂå¿ è¦Âè¨Âæ¯ãÂÂè¦Âæ´é²ä¸ÂæÂ¥å°äºÂ解 JavaScript 主æ§å°ï¼Âå¯以åÂÂè MozillaZine knowledge base article ãÂÂ
æ¨ÂæºÂ主æ§å°ç´Âé (Logging to the Standard Console)
å¦ä¸ÂÃ¥ÂÂç´ÂéÂÂé¤é¯è³Âè¨ÂçÂÂæ¹æ³Âï¼Âå°±æ¯使ç¨æ¨ÂæºÂ主æ§å°çÂÂæÂÂå·§ãÂÂå¨使ç¨éÂÂÃ¥ÂÂæ¹æ³Âä¹ÂÃ¥ÂÂï¼ÂæÂÂä¸ÂäºÂçÂÂ覽å¨çÂÂä¿®æ¹忠é Âè¦Âå Âå®ÂæÂÂãÂÂé¦Âå Âï¼ÂæÂÂÃ¥ÂÂå¿ é Âå 堥æ°çÂÂçÂÂ覽å¨è¨Âå®Âï¼Âå¨網åÂÂÃ¥ÂÂ輸堥 about:config ï¼Â並æÂÂ丠Enter ãÂÂå³éÂ悯ÂæÂÂÃ¥ÂÂ表並é¸æ ãÂÂæ°墠> çÂÂÃ¥ÂÂå¼(Boolean)ãÂÂä¾Â建ç«Âä¸ÂÃ¥ÂÂæ°çÂÂå¸ÂæÂÂå¼è¨Âå®ÂãÂÂå°ÂéÂÂÃ¥ÂÂå¼è¨Âå®Âçº browser.dom.window.dump.enabled ï¼Â並åÂÂç¨å®Â(true)ãÂÂ
ä¸Âä¸ÂæÂ¥ï¼Âæ¯å¨ Firefox æ·å¾Âä¸Âå 堥 -console å½令åÂÂ串ãÂÂ使ç¨éÂÂÃ¥ÂÂÃ¥ÂÂæ¸ï¼ÂæÂÂä½ æ¯Â次å·衠Firefox æÂÂï¼Â顯示æ¨ÂæºÂ輸åº主æ§å°ãÂÂä¸Âä½ÂéÂÂé  å®ÂæÂÂå¾Âï¼ Firefox ä¹ÂéÂÂÃ¥ÂÂäºÂï¼Âä»»ä½ÂèÂÂç± dump() å½å¼Âç¢çÂÂçÂÂ輸åºï¼Âé½æÂÂ顯示å¨主æ§å°è¦ÂçªÂä¸ÂãÂÂdump()å½å¼Â就妠JavaScript æ¨ÂæºÂç alert() å½å¼Âä¸Â樣ï¼ÂèªÂæ³Âä¹Âç¸似ãÂÂ
æÂÂ件ç©件模åÂÂ檢æÂ¥å¨ (The DOM Inspector)
å°Âæ¼è¨Âè¨Â工堷åÂÂæÂÂ大çÂÂ幫å©就æ¯ DOM (Document Object Model) Inspector ï¼ÂéÂÂæ¯ä¸ÂÃ¥ÂÂå¯以è®Â你檢æÂÂ¥ XML æÂÂ件(å å« XUL, HTML)çµÂæ§ÂçÂÂ工堷ãÂÂéÂÂÃ¥ÂÂ工堷跠Firefox å è£Âå¨ä¸Âèµ·ï¼Âä½Âæ¯é Âè¨Âæ¯ä¸Âå®Âè£ÂçÂÂï¼Âä½ å¿ é Â使ç¨é²éÂÂå®Âè£Âä¾Âå®Âè£ÂéÂÂÃ¥ÂÂ工堷ãÂÂä¸Âæ¦å¯以使ç¨æÂÂï¼Âå°±æÂÂæÂÂè±Âå¯ÂçÂÂè³Âè¨Âå¯以ç²å¾Âï¼ÂæÂÂ以你è¦Âå Âå¸æÂÂå¦Âä½Â使ç¨å®ÂãÂÂ
å¨ä¸ÂäºÂ網é Âå¯以æ¾å°éÂÂ樣çÂÂä»Âç´¹ï¼Â
- The DOM Inspector (from Creating Applications with Mozilla)
- DOM Inspector FAQ
éÂÂæ¯幫å©æÂÂÃ¥ÂÂå°Âæ¾ XUL è¨Âè¨ÂÃ¥ÂÂé¡ÂçÂÂæÂÂ好工堷ï¼Âå®Âå¯以è®Â你檢è¦Âå¤Âå XUL å Âç´ çÂÂèªÂæ³ÂãÂÂæÂÂå¼·çÂÂ建è°你åÂȌ¸ç¿Âå¦Âä½Â使ç¨éÂÂÃ¥ÂÂ工堷ï¼ÂéÂÂé»Âç¸ç¶容æÂÂï¼ÂèÂÂä¸Âä½ æÂÂå°Âæ¼å¸æÂÂ使ç¨éÂÂ頠工堷æÂÂå°éÂÂ常å°é«ÂèÂÂãÂÂ